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
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
Search
Yohei Iino
November 02, 2024
Technology
0
120
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
Yohei Iino
November 02, 2024
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
1年半放置したExpo製アプリを最新化してみた
wheatandcat
0
39
作成中のFlutterアプリの中間発表
wheatandcat
0
37
最近読んだ技術書を簡単紹介
wheatandcat
0
60
Firebase App Checkを実装したので紹介
wheatandcat
0
110
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
270
Flutter HooksとRiverpodの解説
wheatandcat
0
380
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
340
App Routerの紹介
wheatandcat
0
97
Flutter × GraphQLでアプリを作ってみる
wheatandcat
0
270
Other Decks in Technology
See All in Technology
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
130
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
390
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.4k
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
200
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
670
TLSから見るSREの未来
atpons
2
310
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
240
SREのためのeBPF活用ステップアップガイド
egmc
2
1.3k
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
670
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1k
Featured
See All Featured
Faster Mobile Websites
deanohume
308
31k
KATA
mclloyd
30
14k
Fireside Chat
paigeccino
37
3.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Invisible Side of Design
smashingmag
301
51k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Adopting Sorbet at Scale
ufuk
77
9.5k
How STYLIGHT went responsive
nonsquared
100
5.6k
Producing Creativity
orderedlist
PRO
346
40k
Transcript
ユニバーサルリンク/アプリリンクを使って QRコードでゲストログインできるようにする Press Space for next page
自己紹介 📝 飯野陽平(wheatandcat) 🏢 会社: 合同会社UNICORN 代表社員 📚 Blog: https://www.wheatandcat.me/
🛠 今までに作ったもの memoir OOMAKA MarkyLinky
実装した機能の概要 以下のissueで実装 QRコードでユーザーを招待できるようにする 概要 ログインしているユーザーが招待用のQRコードを生成 QRコードを読み取ると、招待したユーザーがゲストログインできる モチベーション アプリの使用にはアカウント作成が必要 アプリ的に家族と共有して使用したいユースケースが多い その際にアカウント作成を求めるのはハードルが高いので、QRコードでゲストログインできるように
したい QRコードの読み取りはアプリ内、アプリ外どちらでも可能にしたい
実装に必要な技術 backend/アプリのゲストログインの実装 QRコード作成/スキャン QRコードをスキャンした時にアプリに指定の動作をさせる
実装に必要な技術 backend/アプリのゲストログインの実装 ゲストユーザーログインのトークンを発行してHeaderに設定して認証するミドルウェアを実装 QRコード作成/スキャン QRコード作成: qr_flutter QRコードスキャン: mobile_scanner QRコードをスキャンした時にアプリに指定の動作をさせる iOS:
ユニバーサルリンク Android: アプリリンク 上記のリンクからアプリを起動するためのURLスキーム設定: go_router
ユニバーサルリンクとは Webサイトのリンクをクリックした時にiOSのアプリを起動させる仕組み Appleデバイス専用のディープリンクのためのプロトコル アプリを起動時にパラメータを付与することができるので、それを利用して特定の画面に遷移させることが できる iOS 9以降で利用可能
ユニバーサルリンクの実装① XCodeでアプリを開いて、CapabilitiesのAssociated Domainsを追加 Associated Domainsに applinks:****.com を追加 ` `
ユニバーサルリンクの実装② 先ほどのapplinksに設定をしたドメインの .well-known/apple-app-site-association で以下のjson を設定 appID は Apple Developer のteam
id と bundle id を組み合わせたものを指定 これでiOS端末から https://stock-keeper-review.web.app を開いた時に、アプリがインストール済 みの場合にアプリが起動できる ` ` { "applinks": { "apps": [], "details": [ { "appID": "7KWTGL2ZDY.com.unicorn.stockkeeper", "paths": ["/"] } ] } } ` ` ` ` ` ` ` `
アプリリンクとは 先ほど説明したユニバーサルリンクのAndroid版 Android 6.0以降で対応
アプリリンクの実装① AndroidManifest.xmlに以下を追加 android:host にアプリに遷移させたいドメインを指定 <intent-filter android:autoVerify="true"> <action android:name="android.intent.action.VIEW" /> <category
android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="http" android:host="stock-keeper-review.web.app" /> <data android:scheme="https" /> </intent-filter> ` `
アプリリンクの実装① AndroidManifest.xmlに以下を追加 android:host にアプリに遷移させたいドメインを指定 <data android:scheme="http" android:host="stock-keeper-review.web.app" /> <intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="https" /> </intent-filter> ` `
アプリリンクの実装② 先ほどの android:host に設定をしたドメインの .well-known/assetlinks.json で以下のjsonを設 定 sha256_cert_fingerprints は アプリの署名証明書
のSHA-256ハッシュ値を指定 これでAndroid端末から https://stock-keeper-review.web.app を開いた時に、アプリがインストー ル済みの場合にアプリが起動できる ` ` ` ` [ { "relation": ["delegate_permission/common.handle_all_urls"], "target": { "namespace": "android_app", "package_name": "com.unicorn.stockkeeper", "sha256_cert_fingerprints": [ "B7:FA:3A:2D:DA:29:22:6B:FF:02:40:55:69:E8:6D:8D:54:40:89:CE:69:8C:E6:E3:7C:FF:1B:9B:8E:82:EF:A8" ] } } ] ` ` ` ` ` `
go_routerでURLスキーマを定義 以下のようにgo_routerでURLスキーマを定義 https://stock-keeper-review.web.app/guest/login/xxxxxx のURLでゲストログインが可能 final goRouter = GoRouter( initialLocation: '/',
routes: [ GoRoute( path: '/', name: "home", pageBuilder: (context, state) { return MaterialPage(key: state.pageKey, child: const AuthWrapper()); }, routes: [ GoRoute( path: "guest/login/:code", name: "guest_login", pageBuilder: (context, state) { final code = state.pathParameters['code']!; return BottomSheetPage(builder: (_) => ShareBottomSheet(code: code)); }, ), ` `
go_routerでURLスキーマを定義 以下のようにgo_routerでURLスキーマを定義 https://stock-keeper-review.web.app/guest/login/xxxxxx のURLでゲストログインが可能 path: "guest/login/:code", final goRouter = GoRouter(
initialLocation: '/', routes: [ GoRoute( path: '/', name: "home", pageBuilder: (context, state) { return MaterialPage(key: state.pageKey, child: const AuthWrapper()); }, routes: [ GoRoute( name: "guest_login", pageBuilder: (context, state) { final code = state.pathParameters['code']!; return BottomSheetPage(builder: (_) => ShareBottomSheet(code: code)); }, ), ` `
go_routerでURLスキーマを定義 以下のようにgo_routerでURLスキーマを定義 https://stock-keeper-review.web.app/guest/login/xxxxxx のURLでゲストログインが可能 GoRoute( path: "guest/login/:code", name: "guest_login", pageBuilder:
(context, state) { final code = state.pathParameters['code']!; return BottomSheetPage(builder: (_) => ShareBottomSheet(code: code)); }, ), final goRouter = GoRouter( initialLocation: '/', routes: [ GoRoute( path: '/', name: "home", pageBuilder: (context, state) { return MaterialPage(key: state.pageKey, child: const AuthWrapper()); }, routes: [ ` `
動作検証 QRコードに招待URLを設定 ※PRにアプリ内でQRコードを読み取るデモと、アプリ外でQRコードを読み取るデモの動画を貼っている
まとめ ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインを作ることができた 設定箇所さえ分かれば、実装はそれほど難しくない ゲストの認証がHeaderに設定されたトークンのみ行っていてセキュリティ的には問題がある なので、この後Firebase App Checkを導入して端末以外からのアクセスを制限してカバーして機能完成予定
ご清聴ありがとうございました 🎉