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

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ではない時なら簡単にトークンの保持ができる

案１クエリでトークンを渡す 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で実装したほうが
いい • 誰かいい方法あったら教えて欲しいです！

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

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

higuuu

Other Decks in Programming

Featured

Transcript