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
48
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
Yohei Iino
November 02, 2024
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
1年半放置したExpo製アプリを最新化してみた
wheatandcat
0
11
作成中のFlutterアプリの中間発表
wheatandcat
0
17
最近読んだ技術書を簡単紹介
wheatandcat
0
36
Firebase App Checkを実装したので紹介
wheatandcat
0
61
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
200
Flutter HooksとRiverpodの解説
wheatandcat
0
290
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
280
App Routerの紹介
wheatandcat
0
80
Flutter × GraphQLでアプリを作ってみる
wheatandcat
0
250
Other Decks in Technology
See All in Technology
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
380
MIMEと文字コードの闇
hirachan
2
1.5k
困難を「一般解」で解く
fujiwara3
8
2.3k
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.8k
マルチアカウント環境における組織ポリシーについて まとめてみる
nrinetcom
PRO
2
110
OPENLOGI Company Profile
hr01
0
60k
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
240
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
380
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
820
Log Analytics を使った実際の運用 - Sansan Data Hub での取り組み
sansantech
PRO
0
120
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.6k
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
230
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Unsuck your backbone
ammeep
669
57k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Six Lessons from altMBA
skipperchong
27
3.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Speed Design
sergeychernyshev
28
820
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
440
A Modern Web Designer's Workflow
chriscoyier
693
190k
Thoughts on Productivity
jonyablonski
69
4.5k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
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を導入して端末以外からのアクセスを制限してカバーして機能完成予定
ご清聴ありがとうございました 🎉