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.7k
SPAのサイトを アプリのwebviewで利用するときのトークンの渡し方
higuuu
October 13, 2021
Tweet
Share
More Decks by higuuu
See All by higuuu
副業で入ったけどタスクがないからPMっぽいことをした話
higuuu
0
180
年700万円損するサーバレスの 認可システムをご紹介します!!
higuuu
3
1k
もしも、 上司に鬼退治を命じられたら~プロジェクト計画編~
higuuu
0
590
フロントエンドが知って おきたいセキュリティについて
higuuu
1
910
今年の抱負 81日でやり遂げるぞー
higuuu
1
260
Testing rules for teams that do not write test code
higuuu
1
190
コードレビューで 開発が加速した話
higuuu
0
650
Other Decks in Programming
See All in Programming
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
CSC307 Lecture 06
javiergs
PRO
0
360
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
780
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
AHC035解説
terryu16
0
730
Jetpack for KMP
fornewid
1
290
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
リハビリmruby
kishima
1
160
CSC307 Lecture 07
javiergs
PRO
0
220
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
Featured
See All Featured
Debugging Ruby Performance
tmm1
71
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
What's in a price? How to price your products and services
michaelherold
239
11k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Being A Developer After 40
akosma
72
580k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
The Cult of Friendly URLs
andyhume
75
5.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
For a Future-Friendly Web
brad_frost
173
9.2k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
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で実装したほうが
いい • 誰かいい方法あったら教えて欲しいです!