# 4. 串接LINE Login API

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

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

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

##### <span style="color: rgb(224, 62, 45);"> **串接LINE Login API, 需要取得並複製如下5個Key, 並貼上如下對應欄位即可**</span>

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


[![api_linelogin_i01.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-i01.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-i01.png)


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

[![api_linelogin_a01.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a01.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a01.png)

#####   
<span style="color: rgb(224, 62, 45);">**<span style="color: rgb(0, 0, 0);">  
3. 建立 Create a new channel</span>**</span>

##### <span style="color: rgb(224, 62, 45);"> **請參考如下圖示設定** </span>

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



[![api_linelogin_a02.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a02.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a02.png)

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

[![api_linelogin_a03.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a03.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a03.png)

##### 6. **<span style="color: rgb(224, 62, 45);">勾選同意</span> { I have read and agree to the LINE Developers Agreement } ➔ <span style="color: rgb(45, 194, 107);">Create</span>** 

[![api_linelogin_a04.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a04.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a04.png)


##### <span style="color: rgb(224, 62, 45);">**➔ Basic setings**</span>

##### <span style="color: rgb(224, 62, 45);">**如下圖有兩個Key要複製, 貼到後台Login API對應的欄位**</span>  


##### **Channel ID** = 2006942296  


##### **Channel secret** = e3d9e20301242849dbf356e6314ec2ed

[![api_linelogin_a21.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a21.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a21.png)

[![api_linelogin_a22.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a22.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a22.png)

[![api_linelogin_a23.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a23.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a23.png)


##### <span style="color: rgb(224, 62, 45);">**<span style="color: rgb(0, 0, 0);">  
4. 建立第一個 Liff App  
</span>**</span><span style="color: rgb(0, 0, 0);">  
LIFF app name: <span style="color: rgb(224, 62, 45);">**webapp1**</span>  
</span><span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">Size: <span style="color: rgb(224, 62, 45);">**Full** <span style="color: rgb(0, 0, 0);">(開啟網頁高度100％)</span></span></span>  
<span style="color: rgb(0, 0, 0);">Endpoint URL: https://<span style="color: rgb(224, 62, 45);">**www.sopdom.com**</span>/oaadmin/api/webapp/<span style="color: rgb(224, 62, 45);">**1**</span>/</span>  
</span>

##### **<span style="color: rgb(224, 62, 45);">記得更換成你專屬的網址</span>**

[![api_linelogin_a05.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a05.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a05.png)


#####   
<span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">Scopes全勾</span> ➔ **profile、chat\_message.write、openid** </span>  
[![api_linelogin_a06.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a06.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a06.png)

##### <span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">Add friend option</span> ➔ **On (Nomal)**</span>  
<span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">Options全開</span> ➔ **Scan QR、Module mode**</span>


[![api_linelogin_a07.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a07.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a07.png)

#####   
  


##### <span style="color: rgb(224, 62, 45);">**<span style="color: rgb(0, 0, 0);">5. 建立第二個 Liff App  
  
</span>**</span>

##### <span style="color: rgb(0, 0, 0);">LIFF app name: <span style="color: rgb(224, 62, 45);">**webapp2**</span>  
</span><span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">Size: <span style="color: rgb(224, 62, 45);">**Tall**</span> </span><span style="color: rgb(0, 0, 0);">(開啟網頁高度80％)</span></span>**<span style="color: rgb(0, 0, 0);">  
</span>**<span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">Endpoint URL: https://<span style="color: rgb(224, 62, 45);">**www.sopdom.com**</span>/oaadmin/api/webapp/<span style="color: rgb(224, 62, 45);">**2**</span>/</span>  
</span>

##### **<span style="color: rgb(224, 62, 45);">記得更換成你專屬的網址</span>**

[![api_linelogin_a08.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a08.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a08.png)

##### <span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">Scopes全勾</span> ➔ **profile、chat\_message.write、openid** </span><span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">Add friend option</span> ➔ **On (Nomal)**</span>  
<span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">Options全開</span> ➔ **Scan QR**</span>

[![api_linelogin_a09.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a09.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a09.png)


##### <span style="color: rgb(224, 62, 45);">**<span style="color: rgb(0, 0, 0);">6. 建立第三個 Liff App</span>**</span>

##### <span style="color: rgb(0, 0, 0);">LIFF app name: <span style="color: rgb(224, 62, 45);">**webapp3**</span>  
</span><span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">Size: <span style="color: rgb(224, 62, 45);">**Compact**</span> </span></span><span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);"><span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">(開啟網頁高度50％)  
</span></span></span></span><span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">Endpoint URL: https://<span style="color: rgb(224, 62, 45);">**www.sopdom.com**</span>/oaadmin/api/webapp/<span style="color: rgb(224, 62, 45);">**3**</span>/</span>  
</span>

##### **<span style="color: rgb(224, 62, 45);">記得更換成你專屬的網址</span>**

[![api_linelogin_a10.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a10.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a10.png)

##### <span style="color: rgb(224, 62, 45);">  
</span>

##### <span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">Scopes全勾</span> ➔ **profile、chat\_message.write、openid** </span><span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">Add friend option</span> ➔ **On (Nomal)**</span>  
<span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">Options全開</span> ➔ **Scan QR** </span>

[![api_linelogin_a11.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a11.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a11.png)

##### <span style="color: rgb(224, 62, 45);">**三個Liff都建立完成畫面如下, 請比對確認一下** </span>

##### <span style="color: rgb(224, 62, 45);">**如下圖有三個Key要複製, 貼到後台Login API對應的欄位** </span>  


##### LIFF ID <span style="color: rgb(224, 62, 45);">**Full**</span> = 2006942296-exOW320J  


##### LIFF ID <span style="color: rgb(224, 62, 45);">**Tall**</span> = 2006942296-dMBy7qGx

##### LIFF ID <span style="color: rgb(224, 62, 45);">**Compact**</span> = 2006942296-jJa15n3g  
  


[![api_linelogin_a12.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a12.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a12.png)

##### <span style="color: rgb(224, 62, 45);">**將 shareTargetPicker 啟用, 電子名片分享會用的, 請勿必要開啟** </span>  


[![api_linelogin_a13.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a13.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a13.png)

#####  **<span style="color: rgb(224, 62, 45);">確認如下圖是否有開啟</span>**

![api_linelogin_a14.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a14.png)

##### **<span style="color: rgb(224, 62, 45);">將Liff服務發佈公開使用 Developing -&gt; Published</span>**

[![api_linelogin_a15.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a15.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a15.png)

[![api_linelogin_a16.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a16.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a16.png)

##### **<span style="color: rgb(224, 62, 45);">確認如下圖是否為 </span><span style="color: rgb(224, 62, 45);">Published  
</span><span style="color: rgb(224, 62, 45);">  
</span>**[![api_linelogin_a17.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a17.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a17.png)  
  
  
**<span style="color: rgb(0, 0, 0);">超融合後台LINE Login API串接, </span><span style="color: rgb(224, 62, 45);"><span style="color: rgb(0, 0, 0);">設定完成的示意圖, (比對key長度, 欄位對應名稱)</span>  
  
設定重點, 就是找出那5個Key在哪裡</span>**

[![api_linelogin_a18.png](https://km.sopdom.com/uploads/images/gallery/2025-02/scaled-1680-/api-linelogin-a18.png)](https://km.sopdom.com/uploads/images/gallery/2025-02/api-linelogin-a18.png)

##### **<span style="color: rgb(224, 62, 45);">恭喜你, 已設定完成, 下一步測試串接API是否成功</span>**