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
380
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
180
LIFF/LINEミニアプリチュートリアル 【基礎知識と開発Tips編】 開発Tips
takaharayuuki
0
170
Other Decks in Business
See All in Business
【DearOne】Dear Newest Member
hrm
1
1.5k
BizMow 会社紹介資料_2024
bizmow
0
460
ラクスル会社紹介資料 / RAKSUL Introduction
raksulrecruiting
5
38k
202403_能登半島地震におけるオープンデータの価値
sushi514
0
190
_株式会社クヌギ_採用資料_20240304.pdf
kunugi_inc
0
140
ドライヘッドマッサージ〜脳疲労改善・睡眠の向上〜:Beauty Salon Lindo 代表 菅原 直美 氏
2720japanoke
0
250
【新卒採用】BuySell Technologies会社紹介資料
buyselltechnologies
0
140k
株式会社EventHub 会社紹介資料
eventhub
0
19k
2023年度ICT職専門研修(海外派遣研修)報告書 No.4
tokyo_metropolitan_gov_digital_hr
0
200
BYARDエレベーターピッチ_Startup Aquarium2024
shunsuke_takeuchi
PRO
0
210
インダストリー・ワン会社紹介
industryone01
0
480
ウェブエンジニアから人事への転職 〜てぃーびーの場合 / Tb's turning point
tbpgr
1
220
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
28
12k
A Tale of Four Properties
chriscoyier
150
22k
In The Pink: A Labor of Love
frogandcode
137
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
How to name files
jennybc
62
92k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
KATA
mclloyd
14
11k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Being A Developer After 40
akosma
56
580k
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つの方法 完全な友だち解除にはブロック削除が有効
ご清聴ありがとうございました。