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でQRコードに埋め込んだIDと ユーザーのLINEIDを紐づける方法
Search
高原友樹
March 25, 2023
Business
0
410
LIFFでQRコードに埋め込んだIDと ユーザーのLINEIDを紐づける方法
2023.03.25 初心者・初登壇Welcome!LINEを使ったLT大会
高原友樹
March 25, 2023
Tweet
Share
More Decks by 高原友樹
See All by 高原友樹
LIFF/LINEミニアプリチュートリアル 【基礎知識と開発Tips編】 LIFFとは
takaharayuuki
0
190
LIFF/LINEミニアプリチュートリアル 【基礎知識と開発Tips編】 開発Tips
takaharayuuki
0
190
Other Decks in Business
See All in Business
MAGMA - Company Guide
magma_info
0
200
プライシングについて②
umzws
0
240
Nstock 採用資料 / We are hiring
nstock
20
150k
AnyMind Group Culture Deck (JP)
anymind
4
93k
挨拶と敬語の基本.pdf
designlabo
0
970
(80枚:講演資料)営業目標を絶対達成させるマネジメント技術(2024年4月3日)
nyattx
PRO
3
220
【株式会社Amazia】採用資料(エンジニア)
amazia200910
1
930
株式会社Gakken LEAP 会社紹介資料
gakkenleap
1
180
税理士法人チェスター_事務所紹介資料
mabhr
1
2.6k
Delivering More With Less: An Introduction to Value Streams
helenjbeal
2
140
【新卒採用】BuySell Technologies会社紹介資料
buyselltechnologies
0
140k
アッテル会社紹介資料/culture deck
attelu
10
10k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
29
46k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
Faster Mobile Websites
deanohume
297
30k
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Bash Introduction
62gerente
604
210k
Reflections from 52 weeks, 52 projects
jeffersonlam
344
19k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Transcript
LIFFでQRコードに埋め込んだIDと ユーザーのLINEIDを紐づける方法 takahara_yuuki 2023.03.25 初心者・初登壇Welcome!LINEを使ったLT大会
自己紹介 - 名前: 高原 友樹 - 会社: 株式会社ネッコス - 職種:
フロントエンドエンジニア - 最近の趣味:子供と遊ぶ、ウエイトリフティング - 最近の活動:VueFes 2023 スタッフ参加
LIFFでQRコードに埋め込んだIDと ユーザのLINEIDを紐づける方法 本題
今回やりたかったこと。 ・ユーザがそれぞれの店舗からQRコードを読み込んで、店 舗のLINEアカウントと友達になり、それぞれの店舗の情 報のLIFFのコンテンツを使用する。 ・LIFFのコンテンツで、それぞれの店舗の情報を表示す るために、どの店舗のQRコードから読み込んだかという 情報を保存する必要がある。
実装した方法 1.QRコードを読み込む 2.LINEログインの認証と友達追加の画 面が表示される ・LIFFのURLに店舗固有のIDをセットした URLでQRコードを発行し、店舗に配置す る 例) https://liff.line.me/1660729915-Vq2llN A0/initialize?storeId=TESTSHOP_01
実装した方法 3. LIFFのページが一瞬立ち上がり、 URLパラメータから固有のID(storeID)を取得。 LINEIDTokenと一緒にAPIに投げる 5.紐付けが完了したら友達になった、 LINEアカウントのトークルームを開く 詳細:IDトークンからプロフィール情報を取得する 4.LINEIDtokenの検証を行い、 ユーザのLINEIDを取得し、
フロントからポストされた、 URLパラメータの IDとLINEIDを紐づけて、DBに保存する。
今回のざっくりした流れ
QRコードに埋め込んだIDとLINEIDを紐付けた方法
詰まった点 - 空ページでIDを紐づけた後LIFFを閉じた後に、指定の LINEのトークルームを開く方法がすぐには見つ けられず試行錯誤しました。 解決策↓ location.href = https://line.me/R/ti/p/{LINEアカウントのボットのベーシック ID}
参照:LINE URLスキーム https://developers.line.biz/ja/docs/messaging-api/using-line-url-scheme/#available-line-url-scheme s
検証時にたまに使うTips - 認証画面を再度、表示したい - 連動を解除する方法(検証で認証画面を見たい時やる) - 参考:LINEの「連動アプリ」を解除(削除)する方法 - 友達追加画面を再度、表示したい -
ブロックして、ブロックリストから削除する - 友達を削除状態にする方法(検証で友だち追加画面をみたい時やる) 参考:LINEで友達を削除する2つの方法 完全な友だち解除にはブロック削除が有効
ご清聴ありがとうございました。