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

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

Transcript

1. LIFFでQRコードに埋め込んだIDと
   ユーザーのLINEIDを紐づける方法
   takahara_yuuki
   2023.03.25　初心者・初登壇Welcome！LINEを使ったLT大会
   

   View Slide

2. 自己紹介
   - 名前： 高原 友樹
   - 会社： 株式会社ネッコス
   - 職種： フロントエンドエンジニア
   - 最近の趣味：子供と遊ぶ、ウエイトリフティング
   - 最近の活動：VueFes 2023 スタッフ参加
   

   View Slide

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

   View Slide

4. 今回やりたかったこと。
   ・ユーザがそれぞれの店舗からQRコードを読み込んで、店
   舗のLINEアカウントと友達になり、それぞれの店舗の情
   報のLIFFのコンテンツを使用する。
   ・LIFFのコンテンツで、それぞれの店舗の情報を表示す
   るために、どの店舗のQRコードから読み込んだかという
   情報を保存する必要がある。
   

   View Slide

5. 実装した方法
   1.QRコードを読み込む
   2.LINEログインの認証と友達追加の画
   面が表示される
   ・LIFFのURLに店舗固有のIDをセットした
   URLでQRコードを発行し、店舗に配置す
   る
   例)
   https://liff.line.me/1660729915-Vq2llN
   A0/initialize?storeId=TESTSHOP_01
   

   View Slide

6. 実装した方法
   3. LIFFのページが一瞬立ち上がり、
   URLパラメータから固有のID(storeID)を取得。
   LINEIDTokenと一緒にAPIに投げる
   5.紐付けが完了したら友達になった、
   LINEアカウントのトークルームを開く
   詳細：IDトークンからプロフィール情報を取得する
   4.LINEIDtokenの検証を行い、
   ユーザのLINEIDを取得し、
   フロントからポストされた、
   URLパラメータの
   IDとLINEIDを紐づけて、DBに保存する。
   

   View Slide

7. 今回のざっくりした流れ
   

   View Slide

8. QRコードに埋め込んだIDとLINEIDを紐付けた方法
   

   View Slide

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
   

   View Slide

10. 検証時にたまに使うTips
    - 認証画面を再度、表示したい
    - 連動を解除する方法（検証で認証画面を見たい時やる）
    - 参考：LINEの「連動アプリ」を解除（削除）する方法
    - 友達追加画面を再度、表示したい
    - ブロックして、ブロックリストから削除する
    - 友達を削除状態にする方法（検証で友だち追加画面をみたい時やる）
    参考：LINEで友達を削除する2つの方法　完全な友だち解除にはブロック削除が有効 

    

    View Slide

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

    View Slide