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
150
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
Yohei Iino
November 02, 2024
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
1年半放置したExpo製アプリを最新化してみた
wheatandcat
0
51
作成中のFlutterアプリの中間発表
wheatandcat
0
49
最近読んだ技術書を簡単紹介
wheatandcat
0
70
Firebase App Checkを実装したので紹介
wheatandcat
0
150
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
310
Flutter HooksとRiverpodの解説
wheatandcat
0
430
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
350
App Routerの紹介
wheatandcat
0
100
Flutter × GraphQLでアプリを作ってみる
wheatandcat
0
280
Other Decks in Technology
See All in Technology
タスクって今どうなってるの?3.14の新機能 asyncio ps と pstree でasyncioのデバッグを (PyCon JP 2025)
jrfk
1
220
o11yで育てる、強い内製開発組織
_awache
3
100
多野優介
tanoyusuke
1
170
GopherCon Tour 概略
logica0419
2
160
extension 現場で使えるXcodeショートカット一覧
ktombow
0
190
Tomorrow graphlib, Let us use everybody
hayaosuzuki
0
160
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
150
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
35
10k
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
130
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
110
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
820
BirdCLEF+2025 Noir 5位解法紹介
myso
0
180
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
How GitHub (no longer) Works
holman
315
140k
Become a Pro
speakerdeck
PRO
29
5.5k
Context Engineering - Making Every Token Count
addyosmani
4
160
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
We Have a Design System, Now What?
morganepeng
53
7.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
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を導入して端末以外からのアクセスを制限してカバーして機能完成予定
ご清聴ありがとうございました 🎉