[Day11] LIFF LINE Login 與 Authorization

12th鐵人賽

5082 瀏覽

前言

昨天我們看過下方的循序圖，認識liff.login()與liff.isLoggedIn()的用途。
會不會有人也和我一樣，發現在實際用Chrome瀏覽器開啟LIFF APP的時候，觀察到URL有所變化。
liff.login()前後做了哪些事？

實際點擊聊天室內的LIFF URL

我們到了Line Login的畫面，如同一開始的流程圖所示。liff.login()之後，跳轉到Line Login Server。

什麼是Line Login
LINE Login 功能整合至 web app ，讓用戶可使用 LINE 帳號登入 app。
LINE Login 的認證及授權流程是以 OAuth 2.0 與 OpenID® Connect 協定為基礎

這時候可以仔細觀察到網址的組成:

如此長一串的URL，其實在做得事情是: 為 APP 要求權限，進行用戶驗證。可以發現其中帶有query parameter，是不是覺得有幾個單字很眼熟！？

此時URL 中的 query parameter：

consent: 用於強迫顯示同意畫面，無論使用者是否已提供所有被要求的存取權限。
bot_prompt: 如何顯示將 LINE 官方帳號加為好友的選項，可指定為 normal 或 aggressive。
scope: 使用者提供的權限屬性。
response_type: LINE Platform 回傳授權碼。
redirect_url: 使用者於認證及授權後，將被重新導向至此 URL 頁面。此處即建立LIFF APP所設定的Endpoint URL。
state: 專屬的 alphanumeric string，用於防止跨站請求偽造 (cross-site request forgery)。此值應由開發者的應用隨機產生。
app_id: 你的LIFF ID
client_id: 你的Channel ID
loginChannelId: 你的Channel ID
code_challenge: 設定此參數來協助避免授權代碼攔截攻擊。
code_challenge method: 產生 code challenge 的方法

認證及授權後，導頁至Endpoint URL，其中的 query parameter：

code: 用以取得 access token 的授權碼。效期為 10 分鐘。此授權碼僅能使用一次。
liffClientId: 你的Channel ID
state: 包含於 original request authorization URL 中。開發者應確認此值與 original request 的值相符。仔細看會發現這裡的值，和登入頁面URL中的state是一致的。
liffRedirectUrl: 即建立LIFF APP所設定的Endpoint URL。

到這裡，我們就可以用code換取access token，同時取得id token，後續再透過id token 取得使用者資料與 Email Address。