reCAPTCHA v2 使用範例

---

---

方法2：寫 JavaScript 使用

參考文件：Explicitly render the reCAPTCHA widget

code

var onloadCallback = function() {

  grecaptcha.render('插入在哪個 id 中', {
    'sitekey': '網站金鑰',
    'theme': 'light',
    'size': 'normal',
    'callback': verifyCallback,
    'expired-callback': expired,
    'error-callback': error
  });

  function verifyCallback(token) {
    // 把 token 跟 ip 送到後端做驗證
  }

}

<-- 引用 JS -->
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

引用 JS 時有 3 個參數要帶：

• onload：JS 載入完後要執行哪個 function
• render：固定填 explicit
• hl：語系，非必填，reCAPTCHA 會自動檢測。語系列表

grecaptcha.render 的參數

• sitekey，填入「網站金鑰」
• theme，亮色或深色樣式：dark、light。預設是 light
• size，大小：compact、normal。預設是 normal
• callback，驗證完成後要觸發哪個 function，會回傳 g-recaptcha-response token
• expired-callback，當驗證過期後會觸發哪個 function
• error-callback，當驗證失敗時會觸發哪個 function

產出範例

驗證成功才會出現的按鈕

驗證成功！

---