SPAのサイトを アプリのwebviewで利用するときのトークンの渡し方

Transcript

1. SPAのサイトを アプリのwebviewで利用するとき のトークンの渡し方 ヒグ！（樋口修也）
2. 発表者 フロントエンド,認証認可 2015年 旭川→岩手大学へ入学 2019年 東京のIT企業に新卒入社 2020年 コープさっぽろへ転職し札幌へ ダブルダッチ、筋トレ、ダンス AWS CDK, Vue.js ワクチンで昨日39.1℃まで上がりました 樋口修也(24) 担当: 経歴: 趣味: 好み: 最近: 新参者なのでお手柔らかにお願いします
3. webviewとは・・ WEBで公開しているサイトなどをアプリから 呼び出して、サイトをあたかもアプリのように 見せて動作させる技術 サイト アプリ
4. 1. Authorization headerでトークンを渡す サイト GET https://xxx.com { “Authorization”:“Bearer ey...” }
5. 1. Authorization headerでトークンを渡す サイト GET https://xxx.com { “Authorization”:“Bearer ey...” } SPAでは不可
6. SPAの構成 index.html xxx.js クライアント API通信
7. SPAの構成 index.html xxx.js クライアント API通信 webview アプリ Authorization あり Authorization なし API通信に必 要なトークンな し
8. SPAではない時の構成 index.html xxx.js クライアント サーバー webview アプリ Authorization あり Authorization なし token保持 SPAではない時なら簡単にトークンの保持ができる
9. 案１クエリでトークンを渡す index.html xxx.js クライアント webview アプリ https://xxx? token=ey... https://xxx? token=ey... • SPAでもURLは残るのでwebview内で活用できる • TLSで暗号化されている場合ドメイン以外は隠されるので通信を傍受されてもクエリは覗かれない • サーバーログに残ってしまう
10. RFC6749でも禁止するような文言が アプリなのでブラウザの履歴にはのこならないが、サーバーログには残るのでやはり避 けるべき
11. 案2ローカルストレージでトークンを渡す index.html xxx.js クライアント webview アプリ https://xxx? token=ey... https://xxx • 「evaluateJavascript」関数を利用してローカルストレージを操作 window. localStorage
12. issue ばっか立っててうまくいっていないっぽい
13. 案3 js発火させた時の引数としてトークンを渡す index.html xxx.js クライアント webview アプリ https://xxx? token=ey... https://xxx • 「evaluateJavascript」関数を利用してjsを発火
14. JSがトランスパイルされてしまうのでうまく呼べない
15. 案4 ワンタイムパスワードを渡す index.html xxx.js クライアント webview アプリ https://xxx https://xxx ?otp=... • トークンの代わりにOTPを渡す • webview側からOTPとトークンの交換を行う • 実装方法が煩雑 トークン交 換API otpとtokenをpostで交換
16. 実装方法の詳細は記事にしたのでご覧ください https://menta.work/post/detail/13200/0m3pMbwd9CxzqXiTPLTM
17. まとめ • リファレンスに乗っているようなベストプラクティスでも現実問題上手くいかない場合 もある • 今のところ案1,4が把握している実現方法 • SPAでwebviewへトークンを渡す方法が正直どれもイケてない • webviewは利用規約ぐらいに留めてトークンを扱う部分はnativeで実装したほうが いい • 誰かいい方法あったら教えて欲しいです！