Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

高原友樹

March 25, 2023
Tweet

Other Decks in Business

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