iInfo 資訊交流: Google、Facebook、Line OAuth 實做登入操作 (2)

2021年2月21日星期日

Google、Facebook、Line OAuth 實做登入操作 (2) - 再談 Line Login

前一篇 Google、Facebook、Line OAuth 實做登入操作 (1) - Line Login 介紹如何建構「LINE Login」的操作步作，過程中有部分內容因為篇幅關係沒能一次到位介紹，接著就對 LINE Login 作細部測試進行說明。
以下分別針對「USBWebserver 與 Ngrok 設定操作」、「使用Postman 測試取得 LINE Login 帳戶資訊」兩個主題做說明。

USBWebserver 與 Ngrok 設定操作

USBWebserver 伺服器在本機端建立「linelogin.html」網頁服務，透過網頁連結埠 443，對外提供 HTTPS 連結，「Ngrok.com」將實際網址「https://00a14ff8c66e.ngrok.io/」導向 USBWebserver 連結埠 443，這樣對外的服務網址「https://00a14ff8c66e.ngrok.io/linelogin.html」才能正確連接至使用者本機的網頁。

使用 Postman 取得 LINE Login 帳戶資訊
「LINE Login」串接取得帳戶資訊流程與說明如下。

取得帳戶授權碼。

透過「帳戶授權碼」取得帳戶 Token。

透過 Token 取得帳戶資訊如姓名、email。

取得帳戶授權碼
透過以下JavaScrippt程式碼抓取伺服器回傳「帳戶授權碼 code」，請注意code的有效性指有10分鐘，10分鐘後就要重新在抓新的code。

 <!DOCTYPE html>
    <html lang="en">
    <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 Demo</title>
    </head>
    <body>
        <button id="lineLoginBtn">LINE login</button>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>
        <script>
            var channel_id = "channel id";
            var channel_secret = "channel secret";
            var uri = "Https網址";
            
            //var code = ""; 
            $('#lineLoginBtn').on('click', function(e) {
                let client_id = channel_id;
                let redirect_uri = uri;
                let link = 'https://access.line.me/oauth2/v2.1/authorize?';
                link += 'response_type=code';
                link += '&client_id=' + client_id;
                link += '&redirect_uri=' + redirect_uri;
                link += '&state=login';
                link += '&scope=openid%20profile%20email';
                window.location.href = link;
            });

            var url = new URL(window.location.href);
            var code = url.searchParams.get("code"); 
            if(code != null) document.write('<br / > code : ' + code + '<br / >'); 
        </script>
    </body>
    </html>

執行後「帳戶授權碼 code」為 2nqdeDexLvgn5LTdHGPC。

透過「帳戶授權碼」取得帳戶 Token
開啟 Postman 輸入以下資訊。
方法

POST

Header

Content-Type:application/x-www-form-urlencoded

參數

grant_type:authorization_code
code:2nqdeDexLvgn5LTdHGPC
redirect_uri: Https網址
client_id:你的channel id
client_secret:你的channel secret

「Postman」測試的結果如畫面，「id_token」的內容就是帳戶的Token，也是第三步所需的參數。

注意事項：

每一組「帳戶授權碼 code」只能用「Postman」取得一次「帳戶Token」，若使用「Postman」發送第2次後就會產生錯誤。

「id_token」的內容本身就是一個 JWT 的加密結果，可透過 JWT.io 進行解密，解密的內容就是第三步的結果，。

透過 Token 取得帳戶資訊如姓名、email
Postman 輸入以下資訊。
方法

POST

Header

Content-Type:application/x-www-form-urlencoded

參數

client_id:你的channel id
id_token: 你的id_token

「Postman」測試的結果如畫面。

關於Email的取得，即使在程式碼中有設定，若使用者在授權階段選擇不同意授權存取email，也會導致無法取得email。

測試階段可以透過以下設定抓取email，到 Line Developers 後台的「Basic settings」頁籤畫面的下方「OpenID Connect」，將畫面中的內容設定完成才能取得email。