LIFFでQRコードに埋め込んだIDと ユーザーのLINEIDを紐づける方法

2023.03.25　初心者・初登壇Welcome！LINEを使ったLT大会

Transcript

1. LIFFでQRコードに埋め込んだIDと ユーザーのLINEIDを紐づける方法 takahara_yuuki 2023.03.25　初心者・初登壇Welcome！LINEを使ったLT大会
2. 自己紹介 - 名前： 高原 友樹 - 会社： 株式会社ネッコス - 職種： フロントエンドエンジニア - 最近の趣味：子供と遊ぶ、ウエイトリフティング - 最近の活動：VueFes 2023 スタッフ参加
3. LIFFでQRコードに埋め込んだIDと ユーザのLINEIDを紐づける方法 本題
4. 今回やりたかったこと。 ・ユーザがそれぞれの店舗からQRコードを読み込んで、店 舗のLINEアカウントと友達になり、それぞれの店舗の情 報のLIFFのコンテンツを使用する。 ・LIFFのコンテンツで、それぞれの店舗の情報を表示す るために、どの店舗のQRコードから読み込んだかという 情報を保存する必要がある。
5. 実装した方法 1.QRコードを読み込む 2.LINEログインの認証と友達追加の画 面が表示される ・LIFFのURLに店舗固有のIDをセットした URLでQRコードを発行し、店舗に配置す る 例) https://liff.line.me/1660729915-Vq2llN A0/initialize?storeId=TESTSHOP_01
6. 実装した方法 3. LIFFのページが一瞬立ち上がり、 URLパラメータから固有のID(storeID)を取得。 LINEIDTokenと一緒にAPIに投げる 5.紐付けが完了したら友達になった、 LINEアカウントのトークルームを開く 詳細：IDトークンからプロフィール情報を取得する 4.LINEIDtokenの検証を行い、 ユーザのLINEIDを取得し、 フロントからポストされた、 URLパラメータの IDとLINEIDを紐づけて、DBに保存する。
7. 今回のざっくりした流れ
8. QRコードに埋め込んだIDとLINEIDを紐付けた方法
9. 詰まった点 - 空ページで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
10. 検証時にたまに使うTips - 認証画面を再度、表示したい - 連動を解除する方法（検証で認証画面を見たい時やる） - 参考：LINEの「連動アプリ」を解除（削除）する方法 - 友達追加画面を再度、表示したい - ブロックして、ブロックリストから削除する - 友達を削除状態にする方法（検証で友だち追加画面をみたい時やる） 参考：LINEで友達を削除する2つの方法　完全な友だち解除にはブロック削除が有効 

11. ご清聴ありがとうございました。