---
tags: LINE Developers
---
# LINE Developers
## Login(web版)
> [name=梁華軒] [time=Tue, Set 7] [color=#6F6DE5]
>
### 簡單介紹
#### 事先作業(channel 建立)
1. 有 line 帳號
2. [點入此連接登入line之帳號](https://developers.line.biz/en/)
3. 點選create 創建新的Providers
4. 有了providers 後創建channel
5. 點選line login
6. 其他依照規則填寫app type 選擇web app
7. 得到此channel的基本資料
8. 將callback改成"http://localhost:8080/receive" 
#### 簡單實做看看吧
9. 可以簡單的使用line login了 輸入以下網址加上些許變化(將client_id=1656378315後面的數字改成自己channel的ID)
<pre>
https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=1656378315&redirect_uri=http://localhost:8080/receive&state=123456789&scope=openid%20profile
</pre>
10. 輸入後可以得到此畫面
11. 登入後會變成無法連接 別氣餒網址的部分已經多了我們需要的東西 
#### 參數解析
根據line已經寫的通訊協定版本進行溝通
##### 主架構
<pre>
https://access.line.me/oauth2/v2.1/authorize......
</pre>
必填的參數

response_type=code  
 //告訴LINE要回應authorization code
client_id=1656378315  
 //channel ID
redirect_uri=http://localhost:8080/receive  
 //重新導向網址(要和Callback URL 的網址相同) 
state=123456789  
 //防止跨站請求
scope=openid%20profile  
 //可以獲取的相關權限(請看下圖)


選填項目

nonce=helloWorld 
 //防止重複攻擊，會回傳值到 IDtoken 解析後的內容
prompt=consent 
 //設定為consent後，每次登入都會要你同意權限
max_age=241000 
 //登入的有效時間（單位：秒），會反映在 IDtoken 解析後的內容
ui_locales=zh-TW 
 //LINE登入的頁面語言 (英文en-US、日文jp-JP...列表)
bot_prompt=normal 
 //有加入chatbot的話，要在權限列表一起顯示normal或是分開顯示aggressive(如下圖1)
initial_amr_display=lineqr	
 //顯示 QR code 登入 來取代預設的 email 登入
switch_amr=true(false) 
 //預設值為 true。若設定為 false，則會隱藏用於更改登錄方式的按鈕，例如 "透過 Email 登入" 或 " QR Code 登入" 的選項

圖1
[參考資料1](https://developers.line.biz/zh-hant/docs/line-login/integrate-line-login/)[參考資料2](https://ithelp.ithome.com.tw/articles/10217207)

##### 解析解果
###### [參考資料1](https://ithelp.ithome.com.tw/articles/10217768)
1. [進入此網站1](https://web.postman.co/)此為解析之工具之一
2. 創建一個 HTTP REQUEST
3. 照著圖片進行

    輸入參數

grant_type=authorization_code
code=剛剛回傳來的code
redirect_uri=跟登入一樣的網址
client_id=CHANNEL ＩＤ
client_secret=Channel secret

    ![](https://i.imgur.com/gEwWCFX.png)
4. 按下send得到一串字串![](https://i.imgur.com/k4OOb0J.png)
5. [進入此網站2](https://jwt.io/)此為解析ID Token(獲取使用者之資訊)
6. 將剛剛的id token亂碼丟入網站中解碼![](https://i.imgur.com/lggG9rj.png)

iss: 簽發者
sub: 代表方 (LINE UserID)
aud: 接收者 (Channel ID)
exp: token過期時間
iat: token簽發時間
nonce: 防止重複攻擊 在登入連結時的參數
amr: 登入方式 :
pwd 帳號密碼登入
lineqr 用QRcode登入
linesso 用以存在的帳密登入
auth_time: 身份驗證時的時間

---









## Messaging API

### 常見的event
* Follow event (被加入好友)
* Unfollow event (被解除好友)
* Postback event (被傳送postback訊息)
* Join event (被加入群組/聊天室)
* Member join event (有人加入群組/聊天室)
* Leave event (被踢出群組/聊天室)
* Member leave event (有人離開群組/聊天室)
#### Message event(由使用者傳給line)
又可以再細分成七項
* Text  (文字訊息)
* Image  (圖片訊息)
* Video  (影片訊息)
* Audio (語音訊息)
* File (檔案訊息)
* Location (位置訊息)
* Sticker (貼圖訊息)
### 常見的Message object(由line傳給使用者)
* Text message (文字訊息)
* Sticker message (貼圖訊息)
* Image message (圖片訊息)
* Video message (影片訊息)
* Audio message (語音訊息)
* Location message (位置訊息)
* Imagemap message (可進行互動的照片或影片)
* Template messages (有固定框架的互動訊息)
* Flex Message (跟Template messages相似但可以自行設計不受框架影響)

### [簡單的範例](https://script.google.com/d/1bRpbtX-J5k8MRe6cvgFaDmIGgfpL4Zxaf0UE6Gwqb7hae7IwfqSQDPWR/edit?usp=sharing)
簡單使用googlescript進行開發，未使用LINE Bot Designer想要貼近一些底層
#### 功能介紹
* 根據event 的不同進行回復
* 根據message event 的不同進行回復
* 當輸入關鍵字demo會出現一個Imagemap(此處圖片設定尚未模清楚)，點擊上半部以及下半部產生不同的Text message object傳送
* 關鍵字"虎尾商圈"或"鐵花商圈"會出現template button


---