首页 > 其他分享 >keycloak~Googl的reCAPTCHA验证

keycloak~Googl的reCAPTCHA验证

时间:2023-10-20 15:12:53浏览次数:31  
标签:Googl 验证 密匙 reCAPTCHA submit token recaptcha keycloak

reCAPTCHA是Google公司推出的一项验证服务,使用十分方便快捷,在国外许多网站上均有使用。它与许多其他的人机验证方式不同,它极少需要用户进行各种识图验证。

它的使用方式如下如所示,只需勾选复选框即可通过人机验证。

虽然简单但效果很好,因为Google会收集一些浏览器信息,网络信息,鼠标轨迹等信息,最后通过神经网络判断是否为机器人。而且reCAPTCHA还可以记录并分析使用该人机验证的请求次数,并对可以的请求进行统计和监管。

一些准备工作:
需要一个谷歌账号没有的先去注册一个

首先先创建密匙
进入 https://www.google.com/recaptcha/admin

创建成功后会产生一对密匙

前端部署

在你需要添加reCAPTCHA的界面添加script标签

<script src="https://www.recaptcha.net/recaptcha/api.js"></script>

然后再你需要显示reCAPTCHA验证框的地方添加

<div class="g-recaptcha" data-sitekey="你的网站密匙"></div>

可以设置验证框的主题默认主题为light,可以添加属性:data-theme="dark" 变为暗色主题

方式一、自动将请求绑定到按钮

1、加载JavaScript API

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

2、添加一个回调函数来处理令牌

     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>

3、向 html 按钮添加属性

    <button class="g-recaptcha" 
            data-sitekey="reCAPTCHA_site_key" 
            data-callback='onSubmit' 
            data-action='submit'>Submit</button>

方式二、以编程方式调用

为了大家方面理解,如上图,可以先看看我做的一个demo:recaptcha

1、用 sitekey(站点秘钥) 加载 JavaScript API

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

2、添加一个回调函数来处理令牌

     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>

3、在你需要进行人机验证的操作上调用 grecaptcha.execute 方法

reCAPTCHA v3 引入了一个新概念——动作如:( action: ‘submit / login’ )。当你在每一个执行 reCAPTCHA 的地方指定一个动作名称时,你启用了以下新特性:

1、管理控制台中前10个操作的详细数据分解

2、Adaptive risk analysis based on the context of the action, because abusive behavior can vary.

操作可能只包含字母数字字符、斜线和下划线。
       <script>
          function onClick(e) {
            e.preventDefault();
            grecaptcha.ready(function() {
              grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
                  // Add your logic to submit to your backend server here.
              });
            });
          }
      </script>
注意:

尝试将执行调用挂钩到有趣的动作,如注册、密码重置、购买或播放。

你可以使用ajax提交,也可以把 token 插入到 HTML 的 input hidden 隐藏框,一起提交到后端进行校验。

4、将令牌(token)立即发送到网站后端,并发送要验证的请求。

后端部署

在每次验证完成后会生成一个g-recaptcha-response验证码,需要将这个验证码和你的密匙一起发送至:https://www.recaptcha.net/recaptcha/api/siteverify (使用GET方式传参)

传参的格式:secret=xxxxxx&response=xxxxxxx

下图为需要传递的参数及其含义

接口返回的数据是json格式

    {
      "success": true|false,
      "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
      "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
      "error-codes": [...]        // optional
    }

验证通过后success返回的值为“true”,如果验证失败则会返回error-code,下面为error-code及其对应原因

标签:Googl,验证,密匙,reCAPTCHA,submit,token,recaptcha,keycloak
From: https://www.cnblogs.com/lori/p/17777142.html

相关文章

  • 解决:Exception: URL fetch failure on https://storage.googleapis.com/tensorflow/tf
    首次装载IMDB数据集时可能会出现的错误。解决方案:1、先将数据集单独下载下来:datasets/imdb.npz·黄健/keras-datasets-Gitee.com2、将其复制到 ~/.keras/dataset目录下:cpimdb.npz ~/.keras/dataset ......
  • [911] Read Data from Google Sheets into Pandas without the Google Sheets API (.g
    ref:ReadDatafromGoogleSheetsintoPandaswithouttheGoogleSheetsAPIimportpandasaspdsheet_id="1XqOtPkiE_Q0dfGSoyxrH730RkwrTczcRbDeJJpqRByQ"sheet_name="Sheet1"url=f"https://docs.google.com/spreadsheets/d/{sheet......
  • google三驾马车之一:Bigtable解读(英文版)
    本文重点关注了系统设计相关的内容,paper后半部分的具体应用此处没有过多涉及。从个人笔记修改而来,因此为英文版本。Bigtable:ADistributedStorageSystemforStructuredDataDatamodel:notarelationaldatamodelABigtableisasparse,distributed,persistentmul......
  • google gtest框架入门使用案例
    通过本文可以收获:googlegtest急速入门、googlegtest资源网站。googlegtest是什么googlegtest是谷歌开源的c++单元测试框架,非常的好用。起码个人感觉和springboot自带的测试框架功能差不太多。安装略过,请参考:GitHub-google/googletest:GoogleTest-GoogleTesting......
  • 为什么Google在JSON响应中添加了`while(1);`?
    内容来自DOChttps://q.houxu6.top/?s=为什么Google在JSON响应中添加了while(1);?为什么Google在(私有)JSON响应前加上while(1);?例如,这是在Google日历中打开和关闭日历时的响应:while(1);[['u',[['smsSentFlag','false'],['hideInvitations','false......
  • Google – Cloud Translation API
    前言通常网站内容翻译,我们都不推荐使用GoogleTranslate。但网站中一些不那么重要的内容确实可以用GoogleTranslate。比如CustomerReviews。这篇是续 GoogleMapsEmbedAPI&JavaScriptAPIGoogle–ReviewsYouTubeDataAPI又一篇关于GoogleCloudAPI的教程。......
  • 使用GoogleTest框架进行cpp代码的基本单元测试
    title:aliases:tags:-cpp/单元测试-cmake-工程技术category:-方法stars:url:creation-time:2023-10-1119:02modification-time:这里主要介绍从0开始实现基本的单元测试功能。构建首先从googletest代码仓下载源码。网上很多指导包括官方的指......
  • 如何使用 Google Analytics 白嫖做应用埋点
    GoogleAnalytics很多时候用于做网站的数据分析,直接在网站中嵌入代码就可以。如果是Chrome插件或者其它应用,可以使用MeasurementProtocolAPI来上报埋点。API官方文档:MeasurementProtocol(GoogleAnalytics(分析)4) | 适用于GoogleAnalytics(分析)4的MeasurementProt......
  • Google Guava 库用法整理
    参考:(2,3,4)http://blog.publicobject.com更多用法参考http://ajoo.iteye.com/category/119082以前这么用:Java代码Map<String,Map<Long,List<String>>>map=newHashMap<String,Map<Long,List<String>>>();现在这么用(JDK7将实现该功能......
  • Unity 通信方案 - 使用 Google Protobuf 序列化数据
    1.下载和编译1.1下载ProtoBuf源文件从github下载最新的protoBuf库,如下图所示 Releases·protocolbuffers/protobuf(github.com)1.2编译dll和导入解压后打开/scharp/src中的sln工程文件 选择Release,Google.Protobuf,之后在生成中生成文件在......