iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
自我挑戰組

從無到有打造驗證碼共享的 Line 機器人系列 第 21

用 Line LIFF APP 實現信箱驗證綁定功能(1) - 取得 user email

先前提過,手動發身份認證碼給使用者,再讓使用手動輸入驗證碼的流程太不友善,今天就開始著手優化這個步驟吧!過程中會用到前幾篇提到的 Nodejs + Heroku 進行開發。

流程構思

使用者點擊身份認證後:

  1. 透過 Line LIFF APP 取得 user email,會有以下兩種情況:
    • 取得 email 成功:頁面上要有 1. 已發送驗證碼到該 email 的提示 2. 重新發送驗證碼(倒數) 3. 可輸入認證碼的 Form
    • 取得 email 失敗:若使用者沒有綁定信箱,或者不許可取用 email時,就會無法透過 Line 取得使用者信箱,這時需要多一個手動輸入 email 的介面(要檢驗 email),輸入有效email後跳到上面的成功頁
  2. 輸入認證碼送出後,Line LIFF APP 串接 GAS 專案進行身份認證,並根據回傳結果顯示:
    • 綁定成功結果頁面 + Line Bot 發送綁定成功訊息
    • 綁定失敗結果頁面

取得 user email

今天的目標是用 Line LIFF APP 成功取得 user email

文件

要進行開發最簡單的方式,就是直接 fork 之前的 line-liff-v2-starter 直接修改,也可參考下面文件的步驟進行
Building a sample bot with Heroku

若你有已經有自己的 Node js 專案或其他專案,也可以考慮安裝 Line Bot SDK
LINE Messaging API SDK for nodejs
使用 npm 安裝:

$ npm install @line/bot-sdk --save

要取得使用者的 email 則是要使用到 liff.getDecodedIDToken()

更改 Line Login 設定取得 user email

如果要取得使用者的 email,那我們必須先修改 Line Login 設定要求使用者授權使用。

  1. 進入 Line Developers Console
  2. 點擊進入驗證碼小幫手的 Line Login Channel
  3. 在 Basic settings 頁籤往下滑,找到 OpenID Connect 的選項如下圖:
    OpenID Connect 01
  4. 點擊 Apply 並完成相關設定填寫後儲存,可以看到 OpenID Connect 的狀態改變如下:
    OpenID Connect 02
  5. 點擊 LIFF 頁籤,找到 Scopes 的選項,按下編輯
    Scopes 01
  6. 這時候就會出現 email 的選項如下:
    Scopes 02
  7. 勾選 email 並按下 update 更新設定

如此一來,使用者在開啟 LIFF APP 時,就會跳出系統頁面請使用者授權 email 使用。只要使用者許可,我們就可以在 LIFF 直接取得 User Email。

修改 Line Liff V2 Starter

將 Line Liff V2 Starter fork 到你的 github repo,或者直接在你的 github repo 新建一個 public repo,並放入以下檔案:

  • public
    • index.html
    • liff-app.js
  • index.js
  • package.json
  • app.json
  • LICENSE

修改 app.json & package.json

將這兩個檔案內容修改成符合你的 github repo 專案的資訊
其中 app.json 是在部署到 Heroku 時會用到的檔案

修改 index.html

因為我們不會用到所有的 Line Liff V2 Starter 展示的功能,所以這邊就先建立一個簡單的 landing page 吧

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>驗證碼小幫手 - 身份認證</title>
    </head>
    <body>
		<div>user email is <span id="userEmail"></span></div>
        <div id="error" style="color: red;"></div>
        <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
        <script src="liff-app.js"></script>
    </body>
</html>

liff-app.js

在 Line Liff V2 Starter 架構的基礎上,刪除不需要的函式與判斷式後,將 initializeApp 的內容改為使用 liff.getDecodedIDToken() 取得使用者資料,並判斷是否有取得 email 來呈現頁面

window.onload = function () {
    // DO NOT CHANGE THIS
    let myLiffId = "";

    fetch('/send-id')
        .then(function (reqResponse) {
            return reqResponse.json();
        })
        .then(function (jsonResponse) {
            myLiffId = jsonResponse.id;
            initializeLiffOrDie(myLiffId);
        })
        .catch(function (error) {
            console.log(error);
            showErrorMsg("get Liff Id fail");
        });
};

function showErrorMsg(message) {
    document.getElementById("error").textcontent = message;
}

/**
 * Check if myLiffId is null. If null do not initiate liff.
 * @param {string} myLiffId The LIFF ID of the selected element
 */
function initializeLiffOrDie(myLiffId) {
    if (!myLiffId) {
        showErrorMsg("get Liff Id fail");
    } else {
        initializeLiff(myLiffId);
    }
}

/**
 * Initialize LIFF
 * @param {string} myLiffId The LIFF ID of the selected element
 */
function initializeLiff(myLiffId) {
    liff
        .init({
            liffId: myLiffId
        })
        .then(() => {
            // start to use LIFF's api
            initializeApp();
        })
        .catch((err) => {
            console.log(err);
            showErrorMsg("initializeLiff fail");
        });
}

/**
 * Initialize the app by calling functions handling individual app components
 */
function initializeApp() {
    if (liff.isLoggedIn() && liff.isInClient()) {
        const user = liff.getDecodedIDToken();
        if (user && user.email) {
            displayUserEmail(user.email)
        } else {
            showErrorMsg("user does not have email");
        }
    } else {
        showErrorMsg("please use line liff open");
    }
}

function displayUserEmail(email) {
    document.getElementById("userEmail").textcontent = email;
}

部署到 Heroku

將修改都 push 到 github repo 後,只要仿照 Line Liff V2 Starter 的教學,在瀏覽器網址列鍵入以下網址,就會看到跟先前一樣的部署頁面,填寫必要資訊且確認無誤後就按下 Depoly app 吧!

https://heroku.com/deploy?template={YOUR_GITHUB_REPO_URL}

範例:https://heroku.com/deploy?template=https://github.com/line/line-liff-v2-starter

部署好了記得要將 LIFF ID 設定為環境變數,如果忘記的話請參考 應用 LINE Front-end Framework 輕鬆建立互動 (1)在 Heroku 設定 LIFF ID

或者你也可以安裝 Heroku CLI 進行手動部署

測試是否能取得 user email

將上述 Heroku App 網址設定為 LIFF 的 Endpoint URL 就可以進行測試了~(如果忘記的話,請參考 應用 LINE Front-end Framework 輕鬆建立互動 (1)設定 LIFF APP)

首先按下點此進行身份認證,第一次會跳出授權範圍提示如下:
result 01

選擇不授權 email 的情況,看到以下畫面:
result 02

再按一次點此進行身份認證,這次授權 email,看到以下畫面:
result 03

以上,我們成功在 LIFF APP 取得 user email,明天繼續完成接下來的步驟~


上一篇
使用 Line Messaging Api 取得 User Profile
下一篇
用 Line LIFF APP 實現信箱驗證綁定功能(2) - 使用 Vite 快速打造輸入頁面
系列文
從無到有打造驗證碼共享的 Line 機器人30

尚未有邦友留言

立即登入留言