# 串接Line Notify步驟記錄

## 認證流程圖

graph TD

A1[使用者] --要求line notify的授權code--> C
C[跳轉到line notify介面] --> |還沒登入line|E[登入介面]
E --> |登入| F
C --> |已登入過|F[選擇要發送的群組介面]
C --> |手機會直接取得line app|F[選擇要發送的群組介面]
F --> |確認發送對象後 帶上code及state跳轉回設定|G[原本設定畫面]
G -.-> |url上會帶有code 及 state 用code去跟line認證後拿到access token 此token可以發送|H[end]

## 1. 首先到 https://notify-bot.line.me/my/services/ 註冊
設定Callback URL之後用email開通後，會拿到 Client ID 與 Client Secret

在網頁上，導向連結到line的網址來取得code 之後再post給line取得access token
redirect_uri 必須要和目前傳到line的一樣

location.href =
        "https://notify-bot.line.me/oauth/authorize?" +
        "response_type=code" +
        "&client_id={申請的Client ID}" +
        "&redirect_uri={回傳網址}" +
        "&scope=notify" +
        "&state=abcd";  //自定義String防止CSRF攻擊

User確定後成功，會重新redircet回網址並回傳coke與state,

http://localhost:8080/?code={code}&state=abcd

code 就是要去跟line申請授權的access token

## 2. 然後透過server 用post方法取得line notify授權token
header的 Content-Type 要設定 application/x-www-form-urlencoded

POST https://notify-bot.line.me/oauth/token

## 3. 成功後拿到授權token,就可以用來發送notify給user了

POST https://notify-api.line.me/api/notify

這邊注意header 的 Authorization 的value: Bearer後面要加個空白鍵在放token

## 遇到的坑:
> 用vue開發的時候，頁面url有#的redircet_url會有錯誤
必須把它轉換成伺服器看得懂的代碼 （ # => %23 ）

>送給line api帶入的 Callback URL 必須和返回的一樣才可以
注意url後面的search(?)跟hash(#)都必須相同