校验验证码

发布于 2024-06-05 21:19:56 字数 2164 浏览 0 评论 0 收藏 0

服务器端点可以作为 REST API 端点使用，通常用于运行诸如身份验证、数据库访问和验证等操作，而无需将敏感数据暴露给客户端。

在本节示例中，将使用一个 API 路由来验证 Google reCAPTCHA v3，而不会将密钥直接暴露给客户端。

前提条件

一个开启了 SSR 服务端渲染（output: 'server'）的项目

操作步骤

创建一个 POST 端点以接受 reCAPTCHA 数据，并使用 reCAPTCHA 的 API 对其进行验证。在这里，你可以安全地定义密钥值或读取环境变量。

src/pages/recaptcha.js

export async function POST({ request }) {
  const data = await request.json();


  const recaptchaURL = 'https://www.google.com/recaptcha/api/siteverify';
  const requestHeaders = {
    'Content-Type': 'application/x-www-form-urlencoded'
  };
  const requestBody = new URLSearchParams({
    secret: "YOUR_SITE_SECRET_KEY",   // 这可以是一个环境变量
    response: data.recaptcha          // 从客户端传入的令牌
  });


  const response = await fetch(recaptchaURL, {
    method: "POST",
    headers: requestHeaders,
    body: requestBody.toString()
  });


  const responseData = await response.json();


  return new Response(JSON.stringify(responseData), { status: 200 });
}

从客户端脚本使用 fetch 来访问你的端点：

src/pages/index.astro

<html>
  <head>
    <script is:inline src="https://www.google.com/recaptcha/api.js"></script>
  </head>


  <body>
    <button class="g-recaptcha"
      data-sitekey="PUBLIC_SITE_KEY"
      data-callback="onSubmit"
      data-action="submit"> Click me to verify the captcha challenge! </button>


    <script is:inline>
      function onSubmit(token) {
        fetch("/recaptcha", {
          method: "POST",
          body: JSON.stringify({ recaptcha: token })
        })
        .then((response) => response.json())
        .then((gResponse) => {
          if (gResponse.success) {
            // 验证码校验成功
          } else {
            // 验证码校验失败
          }
        })
      }
    </script>
  </body>
</html>

校验验证码

前提条件

操作步骤

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

校验验证码

前提条件

操作步骤

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。