2023.03.25 初心者・初登壇Welcome!LINEを使ったLT大会
LIFFでQRコードに埋め込んだIDとユーザーのLINEIDを紐づける方法takahara_yuuki2023.03.25 初心者・初登壇Welcome!LINEを使ったLT大会
View Slide
自己紹介- 名前: 高原 友樹- 会社: 株式会社ネッコス- 職種: フロントエンドエンジニア- 最近の趣味:子供と遊ぶ、ウエイトリフティング- 最近の活動: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-Vq2llNA0/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-schemes
検証時にたまに使うTips- 認証画面を再度、表示したい- 連動を解除する方法(検証で認証画面を見たい時やる)- 参考:LINEの「連動アプリ」を解除(削除)する方法- 友達追加画面を再度、表示したい- ブロックして、ブロックリストから削除する- 友達を削除状態にする方法(検証で友だち追加画面をみたい時やる)参考:LINEで友達を削除する2つの方法 完全な友だち解除にはブロック削除が有効
ご清聴ありがとうございました。