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
2.3k
SPAのサイトを アプリのwebviewで利用するときのトークンの渡し方
higuuu
October 13, 2021
Tweet
Share
More Decks by higuuu
See All by higuuu
副業で入ったけどタスクがないからPMっぽいことをした話
higuuu
0
250
年700万円損するサーバレスの 認可システムをご紹介します!!
higuuu
3
1.2k
もしも、 上司に鬼退治を命じられたら~プロジェクト計画編~
higuuu
0
670
フロントエンドが知って おきたいセキュリティについて
higuuu
1
1.1k
今年の抱負 81日でやり遂げるぞー
higuuu
1
300
Testing rules for teams that do not write test code
higuuu
1
240
コードレビューで 開発が加速した話
higuuu
0
740
Other Decks in Programming
See All in Programming
Constant integer division faster than compiler-generated code
herumi
2
700
TanStack DB ~状態管理の新しい考え方~
bmthd
2
340
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
270
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9.1k
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
340
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
🔨 小さなビルドシステムを作る
momeemt
2
580
CSC305 Summer Lecture 06
javiergs
PRO
0
100
コンテキストエンジニアリング Cursor編
kinopeee
1
720
State of CSS 2025
benjaminkott
1
120
Langfuseと歩む生成AI活用推進
licux
3
310
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Practical Orchestrator
shlominoach
190
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Invisible Side of Design
smashingmag
301
51k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
A designer walks into a library…
pauljervisheath
207
24k
YesSQL, Process and Tooling at Scale
rocio
173
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
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で実装したほうが
いい • 誰かいい方法あったら教えて欲しいです!