# 2020_02 Line OAuth2 驗證 整合 web app

## Login

### Step 1. 申請Line developer 帳號並新增Channel for Line Login

### Step 2. 填寫內容 (app types 必須選擇Web app)

### Step 3. 進入新建立的Channel後選擇Line Login標籤填寫Callback URL(此URL為登入驗證後導 向的網址)

### Step 4. 做一個測試用的button
#### app.component.html

<button (click)="LineAuth()">Line Login</button>

#### app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'linetest';

  LineAuth() {
    const Url = 'https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id={channelID}&redirect_uri={在channel輸入的redirect url}&state=abcde&scope=openid%20profile';
    window.location.assign(Url);
  }
}

#### Request url
> https://api.line.me/oauth2/v2.1/authorize

#### Request Body
| Parameters | Type | Required | Description|
|------------|------|----------|------------|
|`response_type`|String| Required |`code` |
|`client_id`|String| Required |Channel ID |
|`redirect_uri`|String| Required |url|
|`state`|String| Required |隨機字元|
|`scope`|String| Required |使用者授予的權限，可加入多個scopes，使用空白(%20)分隔參數|

##### scope可以加入以下參數
1. `profile`: 取得使用者資訊權限
2. `openid`: 取得ID token
3. `email`: 取得使用者email權限
4. `openid`: 必須同時指定此參數

### Step 5. 完成驗證程序後重新導向的url後會帶著回傳參數，接下來要拿回傳的code去要求一個access token
> https://localhost:4200/?code=VTxoCUgFce6ZoUKEC3y6&state=abcde

::: warning
Hint: code只能10分鐘要求一次，且只能用一次
:::

### Step 6. 要求Access Token 這裡使用postman測試
#### Request
> POST https://api.line.me/oauth2/v2.1/token
#### Request Body
| Parameters | Type | Required | Description|
|------------|------|----------|------------|
|`grant_type`|String| Required |`authorization_code` |
|`code` |String| Required |step5的code|
|`redirect_uri`|String| Required |url|
|`client_id`|String| Required |Channel ID |
|`client_secret`|String| Required |Channel secret|

#### Response
| Property | Type | Description |
|------------------|------|-------------|
|`access_token` |String|30天期限的Access Token|
|`expires_in` |Number|有效期限|
|`id_token` |String|Jwt，資訊需解碼才可存取|
|`refresh_token` |String|`access_token`過期後的10天內可用此token要求一個新的`access_token`|
|`scope` |String|用戶授予的權限，依照先前request的scope指定參數回傳`profile` `openid` `email`|
|`token_type` |String|`Bearer`|
#### postman測試結果

::: danger
請注意所有參數欄位不可有空白
:::

### step 7. 解析Jwt
#### 建立.net core console專案測試

using System;
using System.IdentityModel.Tokens.Jwt;
using System.Linq;

namespace JwtToken
{
    class Program
    {
        static void Main(string[] args)
        {
            string tokenString = "xxx";
            var handler = new JwtSecurityTokenHandler();
            var jwtPayload = handler.ReadJwtToken(tokenString).Payload;
            var user = jwtPayload.ToArray();
            foreach (var item in user)
            {
                Console.WriteLine("key="+item.Key+"  value="+item.Value);
            }
            
        }
    }
}


#### payload
| Property | Type | Description |
|------------------|------|-------------|
|`iss`|String|`https://access.line.me`|
|`sub`|String|User ID|
|`aud`|String|Channel ID|
|`exp`|Number|token有效期限UNIX時間格式|
|`iat`|Number|ID token產生時間UNIX時間格式|
|`arm`|Array of strings|login的驗證方式 `pwd`、`lineautologin`、`lineqr`、`linesso`|
|`name`|String|顯示名稱|
|`picture`|String|顯示圖片|

## Logging out users
> POST https://api.line.me/oauth2/v2.1/revoke

#### Request header
|Header|Description|
|------|-----------|
|`Content-Type`|`application/x-www-form-urlencoded`|

#### Request Body
| Parameters | Type | Required | Description|
|------------|------|----------|------------|
|`access_token`|String| Required |Access token|
|`client_id`|String| Required |Channel ID |
|`client_secret`|String| Required |Channel secret|

#### Response
如果成功回傳`200 ok`的狀態碼不會回傳任何物件


### 參考

Line Developers Integrating LINE Login with your web app
> https://developers.line.biz/en/docs/line-login/integrate-line-login/#login-flow