Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SPAのサイトを アプリのwebviewで利用するときのトークンの渡し方
Search
higuuu
October 13, 2021
Programming
0
1.5k
SPAのサイトを アプリのwebviewで利用するときのトークンの渡し方
higuuu
October 13, 2021
Tweet
Share
More Decks by higuuu
See All by higuuu
副業で入ったけどタスクがないからPMっぽいことをした話
higuuu
0
160
年700万円損するサーバレスの 認可システムをご紹介します!!
higuuu
3
940
もしも、 上司に鬼退治を命じられたら~プロジェクト計画編~
higuuu
0
570
フロントエンドが知って おきたいセキュリティについて
higuuu
1
830
今年の抱負 81日でやり遂げるぞー
higuuu
1
260
Testing rules for teams that do not write test code
higuuu
1
190
コードレビューで 開発が加速した話
higuuu
0
630
Other Decks in Programming
See All in Programming
"config" ってなんだ? / What is "config"?
okashoi
0
210
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
330
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.8k
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
300
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
8
2.2k
Ruby GitHub Packages
bkuhlmann
0
620
受託開発でGitLab CI を活用していく
xiombatsg
1
270
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
210
Designing for tomorrow's programming workflows
honnibal
PRO
2
110
ONE WEDGE_company_guide
1wedge_one
0
370
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
2
2.1k
Folding Cheat Sheet #2
philipschwarz
PRO
0
110
Featured
See All Featured
Docker and Python
trallard
33
2.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
Optimizing for Happiness
mojombo
370
69k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
How GitHub (no longer) Works
holman
304
140k
Raft: Consensus for Rubyists
vanstee
132
6.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
186
16k
What the flash - Photography Introduction
edds
64
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Building Applications with DynamoDB
mza
88
5.6k
How STYLIGHT went responsive
nonsquared
92
4.8k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Transcript
SPAのサイトを アプリのwebviewで利用するとき のトークンの渡し方 ヒグ!(樋口修也)
発表者 フロントエンド,認証認可 2015年 旭川→岩手大学へ入学 2019年 東京のIT企業に新卒入社 2020年 コープさっぽろへ転職し札幌へ ダブルダッチ、筋トレ、ダンス AWS
CDK, Vue.js ワクチンで昨日39.1℃まで上がりました 樋口修也(24) 担当: 経歴: 趣味: 好み: 最近: 新参者なのでお手柔らかにお願いします
webviewとは・・ WEBで公開しているサイトなどをアプリから 呼び出して、サイトをあたかもアプリのように 見せて動作させる技術 サイト アプリ
1. Authorization headerでトークンを渡す サイト GET https://xxx.com { “Authorization”:“Bearer ey...” }
1. Authorization headerでトークンを渡す サイト GET https://xxx.com { “Authorization”:“Bearer ey...” }
SPAでは不可
SPAの構成 index.html xxx.js クライアント API通信
SPAの構成 index.html xxx.js クライアント API通信 webview アプリ Authorization あり Authorization
なし API通信に必 要なトークンな し
SPAではない時の構成 index.html xxx.js クライアント サーバー webview アプリ Authorization あり Authorization
なし token保持 SPAではない時なら簡単にトークンの保持ができる
案1クエリでトークンを渡す index.html xxx.js クライアント webview アプリ https://xxx? token=ey... https://xxx? token=ey...
• SPAでもURLは残るのでwebview内で活用できる • TLSで暗号化されている場合ドメイン以外は隠されるので通信を傍受されてもクエリは覗かれない • サーバーログに残ってしまう
RFC6749でも禁止するような文言が アプリなのでブラウザの履歴にはのこならないが、サーバーログには残るのでやはり避 けるべき
案2ローカルストレージでトークンを渡す index.html xxx.js クライアント webview アプリ https://xxx? token=ey... https://xxx •
「evaluateJavascript」関数を利用してローカルストレージを操作 window. localStorage
issue ばっか立っててうまくいっていないっぽい
案3 js発火させた時の引数としてトークンを渡す index.html xxx.js クライアント webview アプリ https://xxx? token=ey... https://xxx
• 「evaluateJavascript」関数を利用してjsを発火
JSがトランスパイルされてしまうのでうまく呼べない
案4 ワンタイムパスワードを渡す index.html xxx.js クライアント webview アプリ https://xxx https://xxx ?otp=...
• トークンの代わりにOTPを渡す • webview側からOTPとトークンの交換を行う • 実装方法が煩雑 トークン交 換API otpとtokenをpostで交換
実装方法の詳細は記事にしたのでご覧ください https://menta.work/post/detail/13200/0m3pMbwd9CxzqXiTPLTM
まとめ • リファレンスに乗っているようなベストプラクティスでも現実問題上手くいかない場合 もある • 今のところ案1,4が把握している実現方法 • SPAでwebviewへトークンを渡す方法が正直どれもイケてない • webviewは利用規約ぐらいに留めてトークンを扱う部分はnativeで実装したほうが
いい • 誰かいい方法あったら教えて欲しいです!