# 我不是機器人驗證

### 申請步驟

1. 到官網 [reCAPTCHA](https://www.google.com/recaptcha/about/) 點擊右上Admin Console
2. 標籤可以隨意命名，填選要申請的類型、網域
3. 免費額度是每個月一百萬次(Free up to 1 million Assessments / Month*)
4. 申請成功後會收到一個網站金鑰跟一個密鑰，**金鑰是給網頁前端使用**，**密鑰是給後端伺服器用**

### 程式碼

[官方](https://developers.google.com/recaptcha/docs/display)提供兩種方式
1. 直接寫在html
2. 寫在js

### 這邊使用第一種方法
引入script

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>

加入驗證

<div
class="g-recaptcha"
data-sitekey="填入申請的金鑰"
data-callback="verify"
data-expired-callback="expired"
data-error-callback="error"
>
</div>


//class固定為g-recaptcha
//data-sitekey必填
//data-callback驗證後要執行的funtion，回傳token到後端
//data-expired-callback到期會執行的function
//data-error-callback錯誤會執行的function

function verify(token) {
    // 把 token 送到後端
    var formData = new FormData();
    formData.append('token', token);
        
    var uriGAS = "GAS部屬的網址";
        
    fetch(uriGAS, {
        method: "POST",
        body: formData,
    })
        .then(response => response.json())
        .then(result => {
        if(result.success) {
            //成功後執行
        } else {
            window.alert(result['error-codes'][0])
        }
        })
        .catch(err => {
            window.alert(err)
        })
}

#### 使用Google App Script作為後端向 reCAPTCHA 驗證
雲端硬碟 --> 新增 --> APP script
如有修改需要先儲存在重新佈署!!

function doPost(e) {

  var params = e.parameter;
  var token = params.token; // 從前端傳來的 token
  
  var uri = 'https://www.google.com/recaptcha/api/siteverify';
  var data = {
    secret: 'reCAPTCHA 後台取得的「密鑰」',
    response: token, 
  }
  
  var option = {
    method: 'post',
    payload: data
  };
  
  var response = UrlFetchApp.fetch(uri, option);
  return ContentService.createTextOutput(response).setMimeType(ContentService.MimeType.JSON);
  
}

### 成果
未驗證


驗證後


#### reference
https://www.letswrite.tw/recaptcha-v2/
https://developers.google.com/recaptcha/docs/display