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
160
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
Yohei Iino
November 02, 2024
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
1年半放置したExpo製アプリを最新化してみた
wheatandcat
0
55
作成中のFlutterアプリの中間発表
wheatandcat
0
50
最近読んだ技術書を簡単紹介
wheatandcat
0
71
Firebase App Checkを実装したので紹介
wheatandcat
0
170
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
320
Flutter HooksとRiverpodの解説
wheatandcat
0
440
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
350
App Routerの紹介
wheatandcat
0
110
Flutter × GraphQLでアプリを作ってみる
wheatandcat
0
280
Other Decks in Technology
See All in Technology
事業開発におけるDify活用事例
kentarofujii
5
1.4k
様々なファイルシステム
sat
PRO
0
230
OSSで50の競合と戦うためにやったこと
yamadashy
3
960
AI時代、“平均値”ではいられない
uhyo
8
2.4k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
1
460
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
120
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
4
2.9k
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
180
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
130
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
A Modern Web Designer's Workflow
chriscoyier
697
190k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Side Projects
sachag
455
43k
Faster Mobile Websites
deanohume
310
31k
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を導入して端末以外からのアクセスを制限してカバーして機能完成予定
ご清聴ありがとうございました 🎉