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
飲食業イベント向けLIFFアプリを開発した話
Search
sumihiro3
December 03, 2022
Technology
0
1.3k
飲食業イベント向けLIFFアプリを開発した話
LINE Developer Community忘年LT大会 での発表資料
sumihiro3
December 03, 2022
Tweet
Share
More Decks by sumihiro3
See All by sumihiro3
Tech Post Cast
sumihiro3
0
110
LIFF Mock 使ってますか?
sumihiro3
1
700
20240120_SeikaEXPHack2024_テクニカルインプット.pdf
sumihiro3
0
89
LINE API を使って自治会を活性化する地域ポイントPFを開発した話
sumihiro3
0
240
TechSeeker Hackathon LINE API テクニカルインプット
sumihiro3
0
170
TechSeeker Hackathon 本番で使えるLINEのAPI紹介&過去作の紹介
sumihiro3
0
190
安否確認を LINE Bot で
sumihiro3
0
420
LINE ミニアプリ開発の現場から
sumihiro3
2
750
LINE API 総復習シリーズ LINE ミニアプリ 編
sumihiro3
1
370
Other Decks in Technology
See All in Technology
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.8k
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.9k
バイブコーディングと継続的デプロイメント
nwiizo
2
420
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
120
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
500
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
120
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
0
160
extension 現場で使えるXcodeショートカット一覧
ktombow
0
210
about #74462 go/token#FileSet
tomtwinkle
1
330
自動テストのコストと向き合ってみた
qa
0
150
SOC2取得の全体像
shonansurvivors
1
380
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
150
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Code Review Best Practice
trishagee
72
19k
Thoughts on Productivity
jonyablonski
70
4.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The Cult of Friendly URLs
andyhume
79
6.6k
Statistics for Hackers
jakevdp
799
220k
Designing Experiences People Love
moore
142
24k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Transcript
ҿ৯ۀΠϕϯτ͚ -*''ΞϓϦΛ։ൃͨ͠ -*/&%FWFMPQFS$PNNVOJUZ -5େձ 2022.12.02 Sumihiro Kagawa
祝 オフライン会場 イベント再開︕ 🎉 🎉 2
⾃⼰紹介
⾃⼰紹介 n 加川 澄廣(かがわ すみひろ) l 関⻄在住 l LINE API
Expert (2019.04〜) l 所属 Ø 株式会社ブレイブテクノロジー - LINE ミニアプリを利⽤したサービスの開発・運⽤をしています - LINE DC での活動が縁で、趣味が仕事に繋がっちゃいました l 趣味 Ø 開発コンテストへの参加 Ø e-bike でゆるゆる⾛る - 時には 100km 超えの⻑距離(アワイチ、かすいち など)も⾛ります sumihiro3 sumihiro.kagawa 4
本⽇のテーマ
飲⾷業イベント向け LIFFアプリを開発した話 6
開発した LIFF アプリの概要 nイベント対象飲⾷店で利⽤できるチケットの販売と消費 - チケットを⼀つ購⼊すると5ポイント付与される • 決済⽅法︓クレジットカード、コンビニ決済 - ポイントを消費して飲⾷店のイベントメニューと引き換え
開発した LIFF アプリの概要 n⼀定ポイント数を消費すると抽選権獲得 - 1チケット分(5ポイント)消費で、抽選を1回できる - 抽選には当選(特賞〜3等賞)とハズレがある
システム構成・利⽤技術 %FWFMPQFS$PNNVOJUZ ͳͷͰɺ͔͜͜Β͕ϝΠϯ
システム構成図を⼊れる
主な利⽤技術(バックエンド) 利⽤技術 ⽤途など CloudRun GCP が提供するサーバーレスのコンテナ実⾏環境 Ø CI でビルドしたコンテナをデプロイ Firestore
GCP (Firebase) が提供する NoSQL データベース Ø クライアントからも DB にアクセス可能だが、今回はサーバーからのみアクセ ス NestJS バックエンドフレームワーク(Node.js, TypeScript) Ø フロント向けの REST API を提供するサーバーアプリケーションを開発 Ø Open API を活⽤し、API のスキーマ定義からフロントで利⽤する API クライ アントを⾃動⽣成 Ø LINE ログイン認証は Guards を利⽤して共通化
主な利⽤技術(フロントエンド) 利⽤技術 ⽤途など Nuxt3 Vue.js ⽤フレームワーク Ø 2022.11 に stable
版がリリースされたばかり Ø 各種レンダリング(SSR, SPA, SSG など)をサポート(今回は SPA を利⽤) Ø TypeScript をフルサポート OpenAPI Generator API 定義ファイルから各種⾔語の API クライアントを⽣成 Ø `TypeScript Axios` で型付きのリクエスト・レスポンス等を⽣成
主な利⽤技術(SaaS) 利⽤技術 ⽤途など Stripe 決済処理プラットフォーム Ø 多様な決済⼿段を⼿軽に利⽤できる(今回はクレジットカード・コンビニ決 済を利⽤) Ø SDK、開発ドキュメントが充実している
Ø LINE Messaging API と同じ様に、決済イベントを Webhook 受信して処理可 能 Ø ダッシュボードが⾒やすい・情報豊富(⾒習いたい)
今回のアプリ実装での ポイント
1. LINE ログイン認証は NestJS の Guard に⼀任 n認証処理は⼤事だけど毎回書きたくない︕ この処理 https://developers.line.biz/ja/docs/liff/using-user-profile/#sending-id-token
1. LINE ログイン認証は NestJS の Guard に⼀任 n ビジネスロジック実⾏前にリクエストを検証できる `Guard`
で認証処理を実⾏ l ビジネスロジック⾃体に集中して実装できる 認証処理は、ここ (Guard) に任せる https://docs.nestjs.com/guards ビジネスロジックから認証処理を除去で きる
1. LINE ログイン認証は NestJS の Guard に⼀任 @Get() @UseGuards(LiffAuthGuard) @ApiOperation({
operationId: 'Lotteries_findAllʼ, summary: '抽選履歴を取得するʼ, }) // <<中略>> async findAll(@Req() request: Request): Promise<LotteryHistoryDto[]> { this.logger.debug(`LotteriesController.findAll called`); //注⽂履歴取得処理 // <<後略>> } 各エンドポイントには LINE 認証⽤ Guards の 利⽤宣⾔のみ LINE 認証が成功した場合のみビジネスロジック が実⾏される
1. LINE ログイン認証は NestJS の Guard に⼀任 export class LiffAuthGuard
implements CanActivate { private readonly logger = new Logger(LiffAuthGuard.name); constructor( @Inject(LineService) private readonly lineService: LineService) {} async canActivate(context: ExecutionContext): Promise<boolean> { this.logger.debug(`AuthGuard.canActivate called!`); const request = context.switchToHttp().getRequest(); // Get LIFF access token const token: string = request.headers.authorization; // Verify LIFF access token const verifyResult = await this.lineService.verifyLiffToken(token); return verifyResult; } } リクエストヘッダーから LIFF アクセストークン を取得して検証
2. クエリパラメーターを保持するために⼀⼯夫いる n Nuxt3 では LIFF URL に付けたパラメーターを保持でき ない︕︖ Ø
Nuxt3 でパラメーターを付けた LIFF URL からアプリを起動する場合 に`liff.init()` するとクエリパラメーターが消えてしまった https://liff.line.me/12345678-XXXXXX?shop=101&mode=order https://example.com/?shop 23ίʔυΛಡΈࠐΜͰ -*'' ΞϓϦભҠ 何故か1つ⽬のパラメーター キーだけが残る…
2. クエリパラメーターを保持するために⼀⼯夫いる nLIFF の1次リダイレクト〜2次リダイレクトと、 VueRouter の挙動に問題がありそう 2次リダイレクト先 URL の時点でパラ メーターが⽋落してい
る… https://developers.line.biz/ja/docs/liff/opening-liff-app/#redirect-flow
2. クエリパラメーターを保持するために⼀⼯夫いる n【参考】LIFF の1次リダイレクトと2次リダイレクト https://developers.line.biz/ja/docs/liff/opening-liff-app/#setting-second-redirect URL 種別 URL 元の URL
https://liff.line.me/12345678-XXXXXX?shop=101&mode=order 1次リダイレクト先 URL (LIFF Server で変換) https://example.com/?liff.state=urlencoded(shop=101&mode=order) 2次リダイレクト先 URL (`liff.init()` 時に変換) https://example.com/?shop=101&mode=order https://developers.line.biz/ja/docs/liff/opening-liff-app/#create-a-primary-redirect-url
2. クエリパラメーターを保持するために⼀⼯夫いる nLIFF の2次リダイレクト先 URL への変換前に、 VueRouter (hash mode) が
URL を変更しているの が原因の模様 2次リダイレクト先 URL への変換でパラ メーターが⽋落した https://developers.line.biz/ja/docs/liff/opening-liff-app/#redirect-flow `liff.init()` 前に、 VueRouter が URL を変換してしまい
2. クエリパラメーターを保持するために⼀⼯夫いる n`liff.init()` が完了する前に URL やパラメーターを変 更しないでね、と公式ドキュメントに書いてありました https://developers.line.biz/ja/reference/liff/#initialize-liff-app
2. クエリパラメーターを保持するために⼀⼯夫いる nVueRouter は `history mode` を利⽤する Ø SPA でのみ検証済み
https://v3.router.vuejs.org/ja/guide/essentials/history-mode.html mode URL 特徴 hash https://example.com/#/shops?shop=101 Ø VueRouter でデフォルトの mode Ø ルーティングに URL Hash を使⽤ Ø URL に `# (hash)` が⼊ってしまう Ø 古いブラウザでも動く history https://example.com/shops?shop=101 Ø ルーティングに HTML5 の History API を 使⽤ Ø URL に `# (hash)` が⼊らない Ø サーバーで rewrite 設定が必要
2. クエリパラメーターを保持するために⼀⼯夫いる nVueRouter は `history mode` を利⽤する Ø Nuxt3 では
“v3.0.0-rc.10” 以降で使える - rc-8 で⾊々と試していてハマってました - すでに stable 版が出ているので RC 版を使うことはないと思いますが Ø Nuxt3 での設定⽅法 - 公式ドキュメントの `Router Options` 参照 https://nuxt.com/docs/guide/directory-structure/pages/#custom-history-advanced https://github.com/nuxt/framework/releases/tag/v3.0.0-rc.10
まとめ
まとめ 1. フレームワークをうまく使って楽しよう︕ Ø エラい⼈の知⾒を活⽤しよう Ø API 定義から⾃動⽣成すると楽です 2. Nuxt
/ Vue で LIFF アプリを開発する時は、 VueRouter は `history mode` を使おう Ø LIFF の挙動は公式ドキュメントで勉強しよう 3. Stripe はいいぞ︕ Ø 決済処理実装がめっちゃ楽でした Ø コンビニ決済はセブンイレブンにも対応して欲しい
ご清聴 ありがとうございました︕
SNS アカウントなど @sumihiro3 Sumihiro.Kagawa LINE API Expert 29
E.O.C.