Google reCAPTCHA v2 接入

獲取 API 金鑰#

首先需要前往 https://www.google.com/recaptcha/admin/create ，為網站創建一個第 2 版 "進行人機身份驗證" 複選框的配置。創建完成後，我們會得到兩個密鑰。

網站密鑰，是在客戶端發起驗證使用的。而下面的通信密鑰，則是為了在服務端做 Verifying the user's response 用的。

客戶端#

控件的結構與簡單樣式#

<div id="robot"></div>

#robot {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 270px;
}

@media screen and (max-width: 768px) {
  #robot {
    bottom: 200px;
  }
}

樣式可以自行根據頁面需要來調整

腳本#

在編寫 js 之前，需要先加載一個資源進來。

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

之後就可以編寫代碼了

export const googleVerify = () => {
  if (!grecaptcha.render) return;

  grecaptcha.render("robot", {
    sitekey: "網站密鑰",
    callback: function (token) {
      // 驗證通過
    },
  });
};

googleVerify 方法被調用時，它會通過 render 方法渲染控件到頁面上。當驗證通過時，callback 會被執行，並回傳一個 token 過來，要做好一個完備的安全防護，就需要把它傳遞給後端，做最後的驗證。

服務端#

參考 https://developers.google.com/recaptcha/docs/verify?hl=en#api_request 即可知道，服務端要做的就是使用 Google reCAPTCHA 的一個 API 發送驗證請求。以 Express 的中間件為例，具體處理過程為：

const verifyGoogleToken: RequestHandler = async (req, res, next) => {
  const { token } = req.body;

  const { data } = await axios({
    url: "https://www.google.com/recaptcha/api/siteverify",
    method: "post",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    data: `secret=${通信密鑰}&response=${token}`,
  });

  if (data && data.success) {
    next();
  } else {
    res.send("google verify failed");
  }
};

這樣一個完整的驗證過程就完成了。