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
240
年700万円損するサーバレスの 認可システムをご紹介します!!
higuuu
3
1.2k
もしも、 上司に鬼退治を命じられたら~プロジェクト計画編~
higuuu
0
660
フロントエンドが知って おきたいセキュリティについて
higuuu
1
1.1k
今年の抱負 81日でやり遂げるぞー
higuuu
1
300
Testing rules for teams that do not write test code
higuuu
1
230
コードレビューで 開発が加速した話
higuuu
0
730
Other Decks in Programming
See All in Programming
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Team operations that are not burdened by SRE
kazatohiei
1
310
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
880
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
4 Signs Your Business is Dying
shpigford
184
22k
Faster Mobile Websites
deanohume
307
31k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Raft: Consensus for Rubyists
vanstee
140
7k
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で実装したほうが
いい • 誰かいい方法あったら教えて欲しいです!