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
37
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
Yohei Iino
November 02, 2024
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
作成中のFlutterアプリの中間発表
wheatandcat
0
15
最近読んだ技術書を簡単紹介
wheatandcat
0
33
Firebase App Checkを実装したので紹介
wheatandcat
0
51
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
190
Flutter HooksとRiverpodの解説
wheatandcat
0
270
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
260
App Routerの紹介
wheatandcat
0
77
Flutter × GraphQLでアプリを作ってみる
wheatandcat
0
240
T3 Stack + Supabaseでアプリを作ってみる
wheatandcat
0
210
Other Decks in Technology
See All in Technology
君も受託系GISエンジニアにならないか
sudataka
2
370
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Bash Introduction
62gerente
610
210k
Automating Front-end Workflow
addyosmani
1367
200k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Statistics for Hackers
jakevdp
797
220k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
The Pragmatic Product Professional
lauravandoore
32
6.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を導入して端末以外からのアクセスを制限してカバーして機能完成予定
ご清聴ありがとうございました 🎉