用 Line LIFF APP 实现信箱验证绑定功能(2) - 使用 Vite 快速打造输入页面

昨天提到，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，就可以完成部署了！