程式開發

把 LINE Notify 變成匿名提問箱!(下)

上一篇把後端寫到一半,是因為我覺得切前後端兩部分寫會太不平衡,加上我想睡覺了(主因)。現在,就來把這項功能正式完工吧!在這一篇文章我打算扯去 Ajax,所以說不定還會有第三部分,但目前我是寫上和下篇啦~
在完成後端部分,我們只需要將兩個串起來就可以了。doGet 函數會接收 GET 請求,並將參數放到 parameter 中。我們依序處理驗證與轉送後可以得出這樣的 Code:


function doGet(e) {
  var result;
  var isHuman = verify(e.parameter['token']);
 
  if (isHuman[0]) {
    var sendToLine = forward(e.parameter['message']);
 
    if (sendToLine[0]) {
      result = {
        success: true
      };
    } else {
      result = {
        success: false,
        error: 'LINE-Notify Failed: ' + sendToLine[1]
      }
    }
   
  } else {
    result = {
      success: false,
      error: 'reCaptcha Failed: ' + isHuman[1]
    };
  }
  return ContentService.createTextOutput(JSON.stringify(result));
}

然後就可以發布為服務了,我們會獲得一個網址。(我很懶得重拍,所以直接抓別文章的 XD)

而在前端部分,我們需要做到的事有:

  1. 載入 reCaptcha 
  2. 透過 Ajax傳送到後端
  3. 處理返回結果

載入 reCaptcha 的部分,我們需要把 token 存起來,用於後續發送時使用。


<script src="https://www.google.com/recaptcha/api.js?render={你的 reCaptcha 認證金鑰}"></script>
<script>
let token

grecaptcha.ready(function() {
grecaptcha.execute('<你的 reCaptcha 認證金鑰>', {action: 'LIME'}).then(function(t) {
token = t
})
})
</script>

(action 部分是我後來才發現的東西,但因為感覺沒差,就不回頭修改了)
Ajax 的部分,我們將運用 mini-xhr。網址是方才取得的,而欄位則是上篇所規畫好的,這邊接受 message 和一個 callback,便於後來使用。


<script src="https://cdn.jsdelivr.net/npm/mini-xhr@0/build/miniXhr.js"></script>;
<script>
    function sendToServer (message, token, callback) {
        miniXhr('https://........../exec?token=' / 你的 Apps Script 網址 / + token + '&message' + message, {}
        ).then(callback)
    }
</script>

完成後,我們開始處理能看見的部分(?),最基本就是一個輸入框(Input Text 或 Textarea)和一個按鈕,而我還會另外做一個顯示狀態的窗格。


<input type="text" id="message">
<button type="button" onclick="submit()">送出</button>
<div id="result"></div>

在上面我們對按鈕加入一個 Click 事件,指向 submit 函數。接下來就開始撰寫 submit 函數,message 就是單純讀取欄位,callback 則是將回傳狀態寫回狀態資訊窗格中。

<script>
  function submit () {
    let message = document.getElementById('message').value
    sendToServer(message, token, data => {
      data = JSON.parse(data)
      if (data.success) {
        document.getElementById('result').innerHTML = '成功'
      } else {
        document.getElementById('result').innerHTML = '失敗:' + data.error
      }
    })
  }
</script>

這樣就大功告成了,其餘美化的部分就交給各位了。(#)

這篇文章有許多處還滿隨便的,因為就是在一個很隨便的心情下寫的,如果想認真學習 JavaScript 的請…別模仿過度。
另外如果想可以一次多發,可以執行 grecaptcha.execute 處來重新獲得 token(token 只能用一次)。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *