使用 Quick Reply 改善 Line Bot 互动

昨天了解各种 Line 的 Message Type 後，今天就运用其中的格式来优化验证码小帮手的互动介面吧！

之前我们是运用 Rich Menu 来跟使用者做互动，但需要点击选单还是不够直觉，让我们着手优化这部分的互动吧！

身份认证的流程改善

现在的验证码小帮手流程为：如果未认证的使用者输入认证码以外的任何讯息，都提示要先进行身份认证，但其实改成在使用者一开始加入就提示要身份认证会更好。甚至我们可以更进一步利用 LIFF APP 来做身份认证的认证码取得与认证动作！

Webhook Follow Event

Line 提供了多种 Webhook Event，其中一种就是当 User 加好友/解封锁时会发出的 Webhook Follow Event，我们可以运用这个 Event 主动回应讯息告知使用者要先进行身份认证。

文件: Follow event

修改 Reply Message With Quick Reply

修改 replyMessage.gs 的 doPost 如下：

分别处理 Message Event & Follow Event

function doPost(e) {
  var requestContent = JSON.parse(e.postData.contents);
  var event = requestContent.events[0];
  if(event && event.type) {
    var replyToken = event.replyToken;
    var replyMessage = [];

    switch (event.type) {
      case 'message':
        replyMessage = handleMessageEvent(event);
        break;
      case 'follow':
        replyMessage = handleFollowEvent(event);
        break;
      default:
        // do nothing
    }

    doReplyMessage(replyMessage, replyToken);
  }
      
  return ContentService.createTextOutput('success');
}

加入 handleMessageEvent & handleFollowEvent 如下：

function handleMessageEvent(event) {
    var userId = event.source && event.source.userId;
    var userMessage = event.message.text;

    return (isUserIdVerified(userId)) 
      ? userIsVerifiedFlow(userMessage, userId)
      : userIsNotVerifiedFlow(userMessage, userId);
}

function handleFollowEvent(event) {
    var userId = event.source && event.source.userId;

    return (isUserIdVerified(userId)) 
      ? getReplyMessage('欢迎回来，请选择您要执行的动作', generateQuickReply(true)) 
      : getReplyMessage('欢迎，请先进行身份认证', generateQuickReply(false));
}

加入 generateQuickReply 如下：

当 user 已认证，出现 Quick Reply Action 为 获取验证码，点击後发送文字讯息：获取验证码
当 user 未认证，出现 Quick Reply Action 为 点此进行身份认证，点击後开启我们之前部署在 Heroku 的 LIFF APP

function generateQuickReply(userIsVerified) {
  var items = [];
  if (userIsVerified) {
    items = [
      {
        "type": "action",
        "action": {
          "type":"message",
          "label":"获取验证码",
          "text":"获取验证码"
        }
      }
    ];
  } else {
    items = [
      {
        "type": "action",
        "action": {
          "type":"uri",
          "label":"点此进行身份认证",
          "uri":"Your_LIFF_APP_URL"
        }
      }
    ];
  }

  return {"items": items};
}

修改 getReplyMessage 如下：

当有设置 quickReply 时，替 replyMessag 加上 quickReply

function getReplyMessage(message, quickReply = {}) {
  var replyMessage = {
        'type': 'text',
        'text': message
      };
  
  if (Object.keys(quickReply).length !== 0) {
    replyMessage.quickReply = quickReply;
  }

  return [replyMessage];
}

修改 userIsVerifiedFlow & userIsNotVerifiedFlow 如下：

当 user 已认证且非输入获取验证码时，出现 Quick Reply Action 为 获取验证码，点击後发送文字讯息：获取验证码
当 user 未认证时，根据绑定结果出现不同的 Quick Reply Action

function userIsVerifiedFlow(userMessage, userId){
  return (userMessage === '获取验证码') ? getValidationCodeMessage(userId) : getReplyMessage('无效的输入', generateQuickReply(true));
}

function userIsNotVerifiedFlow(userMessage, userId){
  var bindResult = tagVerificationCode(userMessage, userId);
  var replyMessage = bindResult ? '绑定成功!请点击选单或输入获取验证码。' : '请先进行身分认证绑定。'
  return getReplyMessage(replyMessage, generateQuickReply(bindResult));
}

以上修改完後记得储存，并且重新部署为新版本。
如果忘记怎麽重新部署的话，可以参考这篇帮 Line Bot 加上身份验证(3) 的管理部署 or 重新部署