4. 串接LINE Login API

LINE除了開放強大的 Messaging API 功能, 還推出 Login API 功能, 讓開發商可以透過Liff網頁技術開發很多商業應用服務, 可以取代90%原生APP功能性, 也拉近與消費者體驗距離 

 這個串接步驟流程比較多, 要細心的看慢慢做 1. 登入超融合後台 

 功能選單 ➔ 串接設定 ➔ LINE Login API 

 串接LINE Login API, 需要取得並複製如下5個Key, 並貼上如下對應欄位即可 

 1. Channel ID 2. Channel Secret 3. LIFF ID Full 4. LIFF ID Tall 5. LIFF ID Compact 

 

 

 2. 首先登入LINE開發者後台 https://developers.line.biz/console/ 點選建立 ➔ LINE Login 

 

 3. 建立 Create a new channel 

 請參考如下圖示設定 

 1. Region to provide the service ➔ Taiwan 2. Company or owner's country or region ➔ Taiwan 3. Channel icon ➔ 上傳 Logo 

 

 

 4. web app ➔ 句選啟用 5. Mobile app ➔ 句選啟用 

 

 

 6.  勾選同意 { I have read and agree to the LINE Developers Agreement } ➔  Create 

 

 

 ➔ Basic setings 

 如下圖有兩個Key要複製, 貼到後台Login API對應的欄位 

 Channel ID = 2006942296 

 Channel secret = e3d9e20301242849dbf356e6314ec2ed 

 

 

 

 

 

 

 4. 建立第一個 Liff App LIFF app name: webapp1 Size: Full (開啟網頁高度100％) Endpoint URL: https:// www.sopdom.com /oaadmin/api/webapp/ 1 / 

 記得更換成你專屬的網址 

 

 

 Scopes全勾 ➔  profile、chat_message.write、openid 

 

 Add friend option ➔  On (Nomal) Options全開 ➔  Scan QR、Module mode 

 

 

 

 5. 建立第二個 Liff App 

 LIFF app name: webapp2 Size: Tall (開啟網頁高度80％) Endpoint URL: https:// www.sopdom.com /oaadmin/api/webapp/ 2 / 

 記得更換成你專屬的網址 

 

 Scopes全勾 ➔  profile、chat_message.write、openid Add friend option ➔  On (Nomal) Options全開 ➔  Scan QR 

 

 

 

 6. 建立第三個 Liff App 

 LIFF app name: webapp3 Size: Compact (開啟網頁高度50％) Endpoint URL: https:// www.sopdom.com /oaadmin/api/webapp/ 3 / 

 記得更換成你專屬的網址 

 

 

 Scopes全勾 ➔  profile、chat_message.write、openid Add friend option ➔  On (Nomal) Options全開 ➔  Scan QR 

 

 

 三個Liff都建立完成畫面如下, 請比對確認一下 

 如下圖有三個Key要複製, 貼到後台Login API對應的欄位 

 LIFF ID Full = 2006942296-exOW320J 

 LIFF ID Tall = 2006942296-dMBy7qGx 

 LIFF ID Compact = 2006942296-jJa15n3g 

 

 將 shareTargetPicker 啟用, 電子名片分享會用的, 請勿必要開啟 

 

 確認如下圖是否有開啟 

 

 

 將Liff服務發佈公開使用  Developing -> Published 

 

 

 

 

 確認如下圖是否為 Published 超融合後台LINE Login API串接, 設定完成的示意圖, (比對key長度, 欄位對應名稱) 設定重點, 就是找出那5個Key在哪裡 

 

 

 恭喜你, 已設定完成, 下一步測試串接API是否成功