前言
現在有規模的平台提供商基本上都會提供 Single Sign On (SSO)的登入機制，藉由他們的平台讓一般小網站可以讓使用者免密碼登入，雖然有很多種 Oauth2 的套件，不過我還是喜歡自己打 🤣，下面就開始嚕！
實作
在views/建立一個line_login_auth.html，填入以下內容，主要是實作一個按鈕並透過 javascript 來互叫 api 並導向到 LINE 頁面
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>LINE Login</title>
</head>
<body>
<button class="auth" onclick="auth()">LINE LOGIN</button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script>
function auth() {
$.ajax({
url: 'https://YOUR_SERVERLESS_DOMAIN.amazonaws.com/dev/line/auth',
method: 'POST',
success: function(data) {
window.location.replace(data.result);
},
});
}
</script>
</html>
接著我們在.env加入 LINE Login 的環境變數並輸入對應的參數
LINE_LOGIN_CLIENT_ID=
LINE_LOGIN_SECRET=
LINE_LOGIN_URI=https://YOUR_SERVERLESS_DOMAIN.amazonaws.com/dev/line/auth
最後就是我們最重要的部分了，實作 GET a& POST 的 api，這邊我先從 POST 講起，這邊主要是把環境變數組在網址中回傳給前端，這邊需要注意的是state他是在回傳回來的 JWT 需要解碼時所使用的，這邊我簡單打個字串，然而實際上會隨機產個變數，確保解碼的安全。
GET 則是負責處理從 LINE 回來的參數們，這邊我只用回傳回來的state把id_token解開，拿到裡面的使用者的參數，後續可以參照應用把資訊存下來，放入 session 並告知前端已登入。
from flask import request
from flask_restful import Resource
import requests
import webbrowser
import os
import jwt
import json
class LineLoginController(Resource):
def get(self):
r = requests.post(
"https://api.line.me/oauth2/v2.1/token",
data={
"grant_type": "authorization_code",
"code": request.args.get('CODE'),
"redirect_uri": os.environ.get('LINE_LOGIN_URI'),
"client_id": os.environ.get('LINE_LOGIN_CLIENT_ID'),
"client_secret": os.environ.get('LINE_LOGIN_SECRET'),
}, headers={"Content-Type": "application/x-www-form-urlencoded"})
payload = json.loads(r.text)
print(payload)
token = payload.get("id_token")
if token is None:
return {'result': payload['error_description']}, 400
state = request.args.get('state')
token = token.encode()
dt = jwt.decode(token, state, None, algorithms=['HS256'])
if dt:
return {'result': dt}, 200
def post(self):
r_uri = os.environ.get("LINE_LOGIN_URI")
client = os.environ.get("LINE_LOGIN_CLIENT_ID")
state = "nostate" # it will be random value
uri = f"https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id={client}&redirect_uri={r_uri}&scope=profile%20openid%20email&state={state}"
return {'result': uri}
JWT 解開的參數如下，sub就是 LINE 的唯一值 ID，一般拿到這個就可以知道是來自 LINE 的使用者了。
{
"result": {
"iss": "https://access.line.me",
"sub": "Ud6ab866a67xxxxxxxxb12b0baffb8ac",
"aud": "1622939248",
"exp": 1569925548,
"iat": 1569921948,
"amr": ["linesso"],
"name": "NiJia Lin",
"picture": "https://profile.line-scdn.net/0hKvTocMuLFFlpFj9HpKdrDlVTGjxxxxxxxxx1YHACMOPRtEHmkWJVIKUyUJNkQWGT0X",
"email": "loxxxxx09@gmail.com"
}
}
最後別忘了要在api.py加入路由才會被導出去ㄛ
from controller.line_login_controller import LineLoginController
api.add_resource(LineLoginController, '/line/auth')
結論
在實作的時候不知道為什麼一直不能讓 python 去幫我把用戶導去 LINE 認證的頁面，我記得之前寫 Ruby 可以啊(?)，最後只好讓前端去幫我把使用者導出去，這邊就帶大家做到這嚕！
建立完之後因為我們需要把網址公開給其他使用者點選，在第三個分頁中先把第一個選項的 
到第二個按鈕選項選擇 
前面都已經把權限開完，選擇
點選上面藍色的按鈕，右邊會出現輸入的地方讓你填
這邊我會輸入跟 S3 bucket 的名字一樣，然後 
建立完之後就可以在瀏覽器上輸入網址，他就會導去你預設的網站囉！向我這邊就是拿我的 facebook 來做示範。
因為我們是做 Web API 相關的，這邊當然就是選 Web 囉！
到了這邊，AWS 很有心的在這些輸入框大多都有下拉式選單，這邊就選建立完的那個專案名稱
選完之後下面三個就照著這樣點選，Comment 會幫你自動填入
CNAMEs 的部分這邊我填入我在 
建立完成之後就會看到他 
等個大概 15 分鐘後他就部署完成啦～
點進來可以確認自己剛剛設定的資訊對不對，若有設定錯誤在按 Edit 來修正
接著我們到 API Gateway 找到左邊的 
按下藍色的按鈕之後，輸入
他就會開始初始化剛剛的設定，這邊大概需要等 15 分鐘左右
在此同時我們就去新增專案裡的套件 
按下去之後呢，再來按下
跑出這個頁面後，
大概內容會長得像這樣
建立成功後往下滑會看到 LINE 給你一個屬於他們的網址，接著可以把它貼到你的機器人上(或者任何聊天室)
點下去之後就會看到來自 LIFF 的 Webview 囉！
接下來就可以開始玩裡面的功能了 🤣
接著輸入
把該填的填完之後按下送出就會看到有一個新的服務嚕！
點進去後往下滑，可以看到有個 
接著再往下會看到 Email 的狀態是 Unapplied，然後按下右邊的
會看到這樣子的一個框框，把兩個框框打勾並選擇一張圖片上傳，這部分就算是申請帳號下面的同意服務條款一樣，圖片就上傳自己希望當使用者到你頁面的時候想看到的圖片 🤣，送出之後就會看到狀態改成 