Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
飲食業イベント向けLIFFアプリを開発した話
sumihiro3
December 03, 2022
Technology
0
140
飲食業イベント向けLIFFアプリを開発した話
LINE Developer Community忘年LT大会 での発表資料
sumihiro3
December 03, 2022
Tweet
Share
More Decks by sumihiro3
See All by sumihiro3
LINE ミニアプリ開発の現場から
sumihiro3
2
550
LINE API 総復習シリーズ LINE ミニアプリ 編
sumihiro3
1
130
時代が追いついた!? LINEミニアプリと共に拡大する順番待ちソリューション
sumihiro3
1
650
サーバーレス環境でスピーディーに構築するLINE Platform アプリ
sumihiro3
0
390
これまでのヒーローズリーグ応募作品(VUI 版)
sumihiro3
0
300
ミニアプリとLIFFアプリ仕様・開発環境など
sumihiro3
0
540
AWS でサーバーレスなLINE Bot/LIFF アプリ環境をIaC な感じで構築するよ!
sumihiro3
0
640
LINE × kintoneでアンケートシステムを作ってみよう!
sumihiro3
0
430
LINE Pay API 解説
sumihiro3
0
270
Other Decks in Technology
See All in Technology
日本ディープラーニング協会主催 NeurIPS 2022 技術報告会講演資料
tdailab
0
1k
データベースの発表には RDBMS 以外もありますよ
maroon1st
0
230
Hasuraの本番運用に向けて
nori3tsu
0
280
エンタープライズ領域でのブロックチェーン・インターオペラビリティの発展 / Enterprise Blockchain Interoperability
gakumura
0
130
【Oracle Cloud ウェビナー】事例から見る規模別クラウド・データベースの選び方 (Oracle Database) (2023年1月18日)
oracle4engineer
PRO
0
100
Periodic Multi-Agent Path Planning
hziwara
0
110
SmartHRからOktaへのSCIM連携で作り出すHRドリブンのアカウント管理
jousysmiler
1
110
re:Inventで発表があったIoT事例の紹介と考察
kizawa2020
0
160
プログラミング支援AI GitHub Copilot すごいの話
moyashi
0
280
Dev Containers ことはじめ - 失敗から学ぶ開発環境運用法
streamwest1629
0
300
Cloudflare Workersで動くOG画像生成器
aiji42
1
470
230125 モニターマウントLT ITガジェット翁(Ryu.Cyber)さん
comucal
PRO
0
4.1k
Featured
See All Featured
Embracing the Ebb and Flow
colly
75
3.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
42k
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
A Modern Web Designer's Workflow
chriscoyier
689
180k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
38
3.6k
Typedesign – Prime Four
hannesfritz
34
1.5k
Become a Pro
speakerdeck
PRO
6
3.2k
Web Components: a chance to create the future
zenorocha
304
40k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k
Clear Off the Table
cherdarchuk
79
290k
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.