【reCAPTCHA 】添加Google验证码

最新推荐文章于 2024-02-27 09:40:05 发布

gx_up

最新推荐文章于 2024-02-27 09:40:05 发布

阅读量3.9k

点赞数 2

分类专栏： Asp.Net Angular WebApi JavaScript Html+CSS Asp.Net Core

本文链接：https://blog.csdn.net/qq_32688731/article/details/89219094

版权

Asp.Net 同时被 3 个专栏收录

62 篇文章 0 订阅

订阅专栏

Asp.Net Core

30 篇文章 1 订阅

订阅专栏

Html+CSS

24 篇文章 0 订阅

订阅专栏

在网站登陆注册时常常需要用到验证码，来防止站点被攻击。

大概这个样子：

现在框架是前后端分离的，angular+webapi弄个验证码感觉有点麻烦

然后就找到google的reCAPTCHA 还挺好使的，记录一下：

地址：https://www.google.com/recaptcha/admin/create

填写注册信息：

一个在前端配置，一个再后端配置：

可以参考这里：https://developers.google.com/recaptcha/docs/invisible

普通html配置：

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id='demo-form' action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit'>Submit</button>
      <br/>
    </form>
  </body>
</html>

angular中使用：

安装ng-recaptcha

npm i ng-recaptcha --save

在表单中配置：

<re-captcha class="grecaptcha" #captchaRef="reCaptcha" siteKey="YOUR_KEY" size="invisible" (resolved)="$event && _submitForm($event,validateForm.value)"></re-captcha>
<button nz-button (click)="captchaRef.execute()" (click)="savereCaptcha(captchaRef)" nzType="primary">登录</button>

ts代码：

_submitForm(recaptchaId, value) {
    for (const i in this.validateForm.controls) {
      if (this.validateForm.controls.hasOwnProperty(i)) {
        this.validateForm.controls[i].markAsDirty();
      }
    }

    this.isLoading = true;
    this.authenticationService.login(value.userName, value.password, recaptchaId)
    .subscribe(
        data => {
            this.isLoading = false;
            this.grecaptcha.reset(); // 刷新验证码
            this.router.navigate([this.returnUrl]);
        },
        error => {
            this.isLoading = false;
            this.error = true;
            this.grecaptcha.reset(); // 刷新验证码
    });
}
savereCaptcha(captchaRef) {
    this.grecaptcha = captchaRef.grecaptcha;
}

.Net Core 后台校验，在登陆或注册的地方：


// 生产环境才校验验证码 公司网络有毒 ping www.recaptcha.net 经常不通
if (_env.IsProduction() && !await CheckReCAPTCHA(auth.recaptchaToken))
{
    return NotFound("Google reCaptcha validation failed");
}

检验方法：

private async Task<bool> CheckReCAPTCHA(string recaptchaToken)
{
    string baseUrl = _config["reCAPTCHA:baseUrl"];
    string secretKey = _config["reCAPTCHA:secretKey"];

    var values = new Dictionary<string, string>
    {
        { "secret", secretKey },
        { "response",recaptchaToken }
    };
    var content = new FormUrlEncodedContent(values);
    HttpClient httpClient = new HttpClient();

    var response = await httpClient.PostAsync(baseUrl, content);
    var responseString = await response.Content.ReadAsStringAsync();

    var obj = JObject.Parse(responseString);
    var status = (bool)obj.SelectToken("success");
    return status;
}

由于国内访问Google受限制，需要讲api地址改下：

将前端中JS的src从

https://www.google.com/recaptcha/api.js

修改为

https://www.recaptcha.net/recaptcha/api.js

将后端的API地址从

https://www.google.com/recaptcha/api/siteverify

换为

https://www.recaptcha.net/recaptcha/api/siteverify

参考：https://131.re/marchives/110

Google Api后挺好使的，效果也是超乎想象的

gx_up

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【reCAPTCHA 】添加Google验证码

在网站登陆注册时常常需要用到验证码，来防止站点被攻击。大概这个样子：现在框架是前后端分离的，angular+webapi弄个验证码感觉有点麻烦然后就找到google的reCAPTCHA 还挺好使的，记录一下：地址：https://www.google.com/recaptcha/admin/create填写注册信息：一个在前端配置，一个再后端配置：...
复制链接

扫一扫