用 Line LIFF APP 實現信箱驗證綁定功能(2) - 使用 Vite 快速打造輸入頁面 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 22

自我挑戰組

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

用 Line LIFF APP 實現信箱驗證綁定功能(2) - 使用 Vite 快速打造輸入頁面

13th鐵人賽

Miyuki

2021-09-22 23:21:22

1199 瀏覽

分享至

昨天提到，LIFF APP 有可能因為使用者沒有綁定 email，或是不授權 email 使用導致無法取得，所以我們需要一個備案 - 讓使用者手動輸入要收取身份認證碼的信箱。

使用 Vite 快速打造輸入頁面

很顯然我們需要：

一個根據是否取得使用者 email 而渲染不同結果的頁面
一個 form 頁面讓使用者能手動輸入 email
送出 form 後以 ajax 呈現結果

因為我們有 GAS 專案作為後端的 API，所以只要靜態頁面就能滿足需求，那麼就使用 Vite + Vue + Github Pages 來體驗快速打造輸入頁面吧！

文件

Getting Started | Vite
Deploying a Static Site | Vite

使用 npm 建立 vite 專案

在 terminal 輸入 (Pre-bundling dependencies 選擇 vue)

npm init vite@latest line-liff-v2-bind-mail-vite

成功後可以看到以下提示

  cd line-liff-v2-bind-mail-vite
  npm install
  npm run dev

跟著照做後可以看到以下提示，使用瀏覽器開啟 http://localhost:3000/ 就可以看到範例程式了

  vite v2.5.10 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 345ms.

選擇 Vite 的好處

Why Vite 中有提到選擇 Vite 有什麼好處，除了對 Vue 的高度 Support 外，最棒的就是修改後快速打包編譯，馬上就能看到修改的結果。文件中有解釋為什麼 Vite 能做到這點，簡單來說就是因為打包方式的不同，Vite 只需要回應瀏覽器按照需提供更動的 module，而且使用了瀏覽器緩存等技術，更詳細的可以參考文件連結。

修改範例檔案為驗證碼小幫手 LIFF APP

修改 index.html 如下：

<!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>
    <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
</head>
<body
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

修改 src/App.vue 如下：

<script setup>
import BindMail from './components/BindMail.vue'
</script>

<template>
  <BindMail/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

將 src/components/HelloWorld.vue 重新命名為 BindMail.vue，並修改如下：

在 onMounted 時，初始化 LIFF SDK
按下確定按鈕時，alert 當前的 email value

<script setup>
import {onMounted, ref} from 'vue'

const userEmail = ref("");
const inputEmail = ref("");
const errorMsg = ref("");

const initializeApp = () => {
  if (liff.isLoggedIn() && liff.isInClient()) {
    const user = liff.getDecodedIDToken();
    userEmail.value = user && user.email;
  } else {
    errorMsg.value = "please use line liff open";
  }
};

const showAlert = (msg) => {
  alert(msg);
}

onMounted(() => {
  liff.init({
        liffId: 'YOUR_LIFF_APP_ID'
      })
      .then(() => {
        initializeApp();
      })
      .catch((err) => {
        console.log(err);
        errorMsg.value = "initialize LIFF fail";
      });
});
</script>

<template>
  <h1>驗證碼小幫手 - 身份認證</h1>

  // 如果有取得 userEmail 且沒有 errorMsg 則顯示這段
  <template v-if="userEmail && !errorMsg">
  <p>將發送身份認證碼到 {{ userEmail }}</p>
  <button type="button" class="btn" @click="showAlert(userEmail)">確定</button>
  </template>

  // 如果沒取得 userEmail 且沒有 errorMsg 則顯示這段
  <template v-else-if="!errorMsg">
    <p>發送身份認證碼到 <input type="email" v-model="inputEmail" placeholder="請輸入 Email"></p>
    <button type="button" class="btn" @click="showAlert(inputEmail)">確定</button>
  </template>

  // 有 errorMsg 則顯示這段
  <p v-else class="error">{{ errorMsg }}</p>
</template>

<style scoped>
input {
  padding: 8px;
  border: none;
  border-bottom: 1px solid #ccc;
  width: 200px;
}
.error {
  color: red;
}
.btn {
  border: none;
  display: inline-block;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: #FFF;
  background-color: #2196F3;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 4px;
  user-select: none;
}
</style>

以上的修改都可以在 http://localhost:3000/ 即時看到結果

部署到 Github Pages

完成開發後，我們就要編譯靜態檔案準備部署到 Github Pages

在 terminal 輸入

npm run build

Vite 會幫我們將編譯好的靜態檔案放到 dist 資料夾中

如果想確認編譯後的結果可以執行

npm run serve

可以看到以下提示，用瀏覽器訪問 http://localhost:5000/ 可以看到編譯好的結果

  vite v2.5.10 build preview server running at:

  > Local: http://localhost:5000/
  > Network: use `--host` to expose

文件

如果想要使用自動部署可以參考以下文件的內容：
github-pages

手動部署到 Github Page

但因為今天時間也晚了～就偷懶點用土法煉鋼部署吧！

首先開好一個 repo ，在上方選單最右邊有一個 Settings，按下去後選擇 Pages
(圖片流程可參考 Choosing a publishing source)
接著 Source 的部分選擇如下後按 Save，就可以看到上方提示你目前的 GitHub Pages 網址
最後把 dist 內的檔案上傳到這個 repo，就可以完成部署了！