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

最新消息

[公告2014/05/30] 如有需要將部落格中，任何一篇文章的程式碼使用在商業用途，請與我聯繫。

[公告2015/04/26] Line版的 iInfo程式與投資應用群組已上線想加入的朋友們，請先查看 "入群須知" 再與我聯繫 Line : aminwhite5168，加入請告知身分與回答 "入群須知" 的問題。

[公告2018/04/22] 台北 Python + Excel VBA 金融資訊爬蟲課程，課程如網頁內容金融資訊爬蟲班：台北班 Python 金融資訊爬蟲、EXCEL VBA 金融資訊爬蟲。

[公告2019/01/08] 請注意：我再次重申，部落格文章的程式碼，是要提供各位參考與學習，一旦網頁改版請自行修改，別要求東要求西要我主動修改，你們用我寫東西賺錢了、交差了，請問有分我一杯羹嗎?既然賺錢沒分我，請問有什麼理由要求我修改，如果沒能力改，就花錢來找我上課。

[公告2019/12/01] 若各位有 Excel VBA 案子開發需求，歡迎與我聯繫，可接案處理。

[公告2020/05/22] 頁面載入速度慢，起因為部分JS來源(alexgorbatchev.com)失效導致頁面載入變慢，目前已做調整，請多見諒。

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。