Skip to content
Line Engineering
  • Blog
  • Engineering Culture
  • Open Source
  • Careers
  • LINE Developers
  • 繁體中文

透過 Vue + FastAPI 完成 LINE Login 一鍵式登入

By Nijia Lin | 2021.09.22 2021.09.22

LINE Taiwan Technology Evangelist

前言

碰巧最近有個日文五十音消除遊戲的 Side Project 正在實作中,參考之前鐵人賽文章,實作上發現有些內容可能是年久失修,導致實作上不太順利,碰巧近期 LINE Login 的官方文件也有更新,並且搭配之前實作的範例是使用 (Screen-LINE-Bullets),來延伸 Side Project,以下就為各位介紹一下其中使用 LINE Login 的一些過程。

TL;DR

  • LINE Login 範例從 Flask 轉到 Vue + FastAPI
  • 前後端分離
    • 前端用兩個頁面清楚展示 LINE Login SSO 步驟
    • 後端兩個 API
      • 取得認證導向網址
      • 認證 JWT 中的使用者參數
      • 環境變數都放後端(較安全)
  • LINE Login 事主專案

介紹

LINE Login 綁定步驟

  • 進入 LINE Developer Console
  • 建立 Provider
  • 建立 LINE Login channel
  • 點選最右面選項把 LINE Login channel 設定為 published
  • 啟動 Web App 選項並設定 Callback URL 為 http://localhost:8080/line/auth
    • LINE Login 開發時不用 SSL+Domain,但上線後記得改成自家 Domain + SSL
  • 把 client_id、client_secret、Callback URL 複製到後端 FastAPI 的環境變數中
  • 開始以下文章內容

用戶看見的頁面

首先先參考前端的路由(後續實作上可能有差)

{
  path: '/line',
  component: Setting,
}, {
  path: '/line/auth',
  component: Line,
},

將用戶導向 Login 頁面 – 前端路由 /line

  • 【前端】用戶透過訪問 /line 按下登入鈕 (Setting.vue)
    • 取得後端需要導向至 LINE Login 的網址
    • 透過 window.location 把用戶轉去 Login 頁面
setup() {
  let url = 'http://localhost:8000';

  function login(){
    fetch(url+'/login/uri').then(res=>{
      res.json().then(el=>{
        window.location.replace(el.result)
      })
    })
  }
}
  • 【後端】 FastAPI API 路由位置
    • r_uri = os.environ.get(“LINE_LOGIN_URI”)
    • client = os.environ.get(“LINE_LOGIN_CLIENT_ID”)
    • 取得兩個環境變數並放入 OAuth2 網址中回傳給前端導向
    • 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}&initial_amr_display=lineqr”

參數 r_uri 以及網址中的 redirect_uri 為 LINE Login 用戶輸入正確登入後會導向的網址,網址就存放在後端 FastAPI 的環境變數中,數值則填上前端頁面的路由,也就是 line/auth 上

網址組成方式請參考文件

LINE 認證用戶後回到 redirect_uri 的頁面中 – 前端路由 /line/auth

當用戶輸入完帳密(QR Code)後 LINE 會重新導向 /line/auth,導回來的網址會有兩個 Query parameter,範例如下(官方文件說明):

http://localhost:8000/?code=xxx&state=ooo

參考官方文件,拿到 code 之後要再拿著 redirect_uri、client_id、client_secret 去換用戶資訊,但三個參數安全性問題因此需要放後端,因此由後端 call LINE API 來取得用戶的 JWT 資訊,Query parameter 放置的方式參考 FastAPI 文件,Python code 如下:

@router.post("/")
def read_users(code: str, state: str):
    client_id = os.environ.get('LINE_LOGIN_CLIENT_ID')
    secret = os.environ.get('LINE_LOGIN_SECRET')
    r = requests.post(
        "https://api.line.me/oauth2/v2.1/token",
        data={
            "grant_type": "authorization_code",
            "code": code,
            "redirect_uri": os.environ.get('LINE_LOGIN_URI'),
            "client_id": client_id,
            "client_secret": secret,
        }, headers={"Content-Type": "application/x-www-form-urlencoded"})
    payload = json.loads(r.text)

離奇事蹟:JWT 解不開

我參考 18 年寫的鐵人賽文章中的 LINE Login 範例程式碼,當我到了 token = token.encode() 步驟時一直顯示 algorithms 有問題

TypeError: encode() got multiple values for argument 'algorithm'

當初寫的文章中要透過這步驟會把 token 換成 binary 的形式 -> b’xxxxx’,再丟到 decode() 去解密,但即便把 encode 移除後把 id_token 丟進去也是出錯。

在百思不得起解的狀態下,決定先不用 JWT 相關的函示庫,參考官方文件最下方的驗證程式來將 ID Token 解碼並進行驗證,如此一來就成功可以解出 JWT 並把使用者的資訊存到 DB 中並回傳給前端頁面使用了。

解開範例:

{
  "iss": "https://access.line.me",
  "sub": "U1234567890abcdef1234567890abcdef",
  "aud": "1234567890",
  "exp": 1504169092,
  "iat": 1504263657,
  "nonce": "0987654asdf",
  "amr": ["pwd"],
  "name": "Taro Line",
  "picture": "https://sample_line.me/aBcdefg123456"
}

結論

有些日子沒回來寫 LINE Login 的相關操作步驟,伴隨著 LINE Login 文件有更改後,過往一些自己寫的文章程式碼可能有點年久失修,導致再回來看文章寫程式時出了些錯誤。

過程中除了修程式碼外還有個收穫,就是可以透過 使用 LINE Login API 的 Endpoint 來取得用戶的資訊,只要透過 Client_id + id_token 即可取得,甚至不用透過 JWT 解密就可以拿到上述的用戶資訊,實在是很方便(嘗試過很讚),只是我個人還是比較信任透過 channel_secret 換到的用戶資訊,因此大家在選擇上時可以依照自己的需求去選用喔!

#FastAPI #LINE Login #python #Vue.js

Related Posts

  • LINE Bot 開發者指南詳解 – 6. 其他相關功能 這一次跟總部共同合作準備中文版本之外,並且特定用這一系列文章加以解釋,希望可以讓更多開發者有更多的了解。 Development guidelines 文件內容很多,本份投影片也將以六篇文章的篇幅來加以解釋。本篇文章為第六篇文章,主要講解的會是關於聊天機器人以外的相關開發需要注意的事項。
  • LINE Bot 開發者指南詳解 – 4. LINE Login 各位好, 我是 LINE Taiwan 資深開發技術推廣工程師 – Evan Lin。 今天這篇文章為各位詳細解釋 「 LINE Bot 開發指南」這一份投影片文件。本篇文章為第四篇文章,主要講解的會是開發 LINE Login 的時候需要注意的事項。
  • This image has an empty alt attribute; its file name is chatbot.png
    LINE 開發者社群計畫: Chatbot Developer Meetup 29 – 四月平台更新與貼圖抽獎範例分享 透過每個月持續的分享,將 LINE 平台上有更新的內容透過更生活化的方式整理給大家,希望透過此篇文章讓大家認識一樣 LINE API 的魅力!如果已經有正在開發的聊天機器人,抑或是有不同的搭配技巧,都歡迎至社群或是各大討論區分享你的技術吧! 社群 Chatbots Meetup: https://chatbots.kktix.cc/本次活動網頁: 活動網址

Search

Generic selectors
Exact matches only
Search in title
Search in content

Top Tags

  • Security
  • Open Source
  • Agile

Tags

AI Armeria BECKS chatbot chatbot community COSCUP Data/AI Data Dev Dev Culture DevRel Golang Hackathon iOS Java java JavaScript Kubernetes LIFF LIFF LINE LINE Chatbot LINE Chatbot LINE DEVELOPER DAY LINE Developer Meetup LINE Developers LINE Fukuoka LINE Games LINE Login LINE TECH FRESH LINE Things machine learning Messaging API ML Open Source recruitment Server-side Share Target Picker summer homework TechPulse Test Automation Verda Vue Web Development 資安
  • About LINE
  • LINE Developers
  • Careers
  • Contact
Menu
  • About LINE
  • LINE Developers
  • Careers
  • Contact
  • Facebook
  • Twitter
  • Youtube
  • Slideshare
Menu
  • Facebook
  • Twitter
  • Youtube
  • Slideshare
©LINE Corp Privacy Policy