README

如果您有兴趣继续使用它，请将此仓库进行分支。

AngularJS reCaptcha

将 reCaptcha 添加到您的 AngularJS 项目中。

演示: http://vividcortex.github.io/angular-recaptcha/

安装

手动

下载最新的发布版。

Bower

bower install --save angular-recaptcha

npm

npm install --save angular-recaptcha

用法

请参阅演示文件以获取快速使用示例。

IMPORTANT: Keep in mind that the captcha only works when used from a real domain
and with a valid re-captcha key, so this file won't work if you just load it in
your browser.

首先，您需要获取您域的有效reCaptcha密钥。请访问 http://www.google.com/recaptcha。
包含vc-recaptcha脚本，并让您的angular应用依赖于vcRecaptcha模块。

<script type="text/javascript" src="angular-recaptcha.js"></script>

var app = angular.module('myApp', ['vcRecaptcha']);

之后，您可以在视图中放置一个用于captcha小部件的容器，并像这样调用vc-recaptcha指令

<div
    vc-recaptcha
    key="'---- YOUR PUBLIC KEY GOES HERE ----'"
></div>

在此处，key属性被传递到指令的作用域中，因此您可以使用作用域中的一个属性或只是一个硬编码的字符串。请注意，使用您的公钥，而不是私钥。

表单验证

默认情况下，如果使用

和放置在表单中，则captcha需要被检查，表单才是有效的。如果captcha未检查（如果用户未勾选框或检查已过期），则表单将被标记为无效。验证键是recaptcha。您可以通过将required属性设置为false或一个将评估为false的作用域变量来退出此功能。任何其他值或省略此属性都将选择此功能。

您还可以在captcha不是必需的情况下程序化地触发验证，例如

vcRecaptchaService.execute(widgetId);

如果没有提供小部件ID，将执行第一个创建的小部件。

响应验证

要验证此对象，您需要在验证部分中使用的API。验证超出了此工具的作用范围，因为必须在服务器端强制执行。

您可以为ng-model提供一个值，它将随着response的可用性和过期而动态填充和清除。当您想要获取响应的值时，可以从传递给ng-model的作用域变量中获取它。它就像在表单中的任何其他输入中添加ng-model一样工作。

...
  <form name="myForm" ng-submit="mySubmit(myFields)">
  ...
  <div
      vc-recaptcha
      ng-model="myFields.myRecaptchaResponse"
  ></div>
  ...
  </form>
...

  ...
  $scope.mySubmit = function(myFields){
    console.log(myFields.myRecaptchaResponse);
  }
  ...

或者您可以编程方式获取您需要发送到服务器的响应，使用来自Angular服务 vcRecaptchaService 的方法 getResponse()。此方法接收一个可选参数 widgetId，对于获取特定reCaptcha小部件的响应很有用（如果您渲染了多个小部件）。如果没有提供小部件ID，将返回第一个创建的小部件的响应。

var response = vcRecaptchaService.getResponse(widgetId); // returns the string response

建议使用 ng-model 进行常规使用，因为值直接通过指令与reCaptcha实例相关联，无需管理或传递 widgetId。

其他参数

您可以可选地传递一个作为HTML属性的 theme，该captcha应该使用。

    <div
        vc-recaptcha
        ng-model="gRecaptchaResponse"
        theme="---- light or dark ----"
        size="---- compact, normal or invisible ----"
        type="'---- audio or image ----'"
        key="'---- YOUR PUBLIC KEY GOES HERE ----'"
        lang="---- language code ----"
    ></div>

语言代码： https://developers.google.com/recaptcha/docs/language

在这种情况下，我们指定captcha应该使用名为 light 的主题。

监听器

您可以使用三个监听器与指令一起使用，即 on-create、on-success 和 on-expire。

on-create：在创建小部件后立即调用。它接收一个小部件ID，如果您网站上有多个reCaptcha，这可能很有用。
on-success：在用户解决captcha后调用一次。它接收您用于验证响应的响应字符串。
on-expire：在captcha响应过期且用户需要解决新的captcha时调用。

<div
    vc-recaptcha
    key="'---- YOUR PUBLIC KEY GOES HERE ----'"
    ng-model="gRecaptchaResponse"
    on-create="setWidgetId(widgetId)"
    on-success="setResponse(response)"
    on-expire="cbExpiration()"
    lang=""
></div>

示例

app.controller('myController', ['$scope', 'vcRecaptchaService', function ($scope, recaptcha) {
    $scope.setWidgetId = function (widgetId) {
        // store the `widgetId` for future usage.
        // For example for getting the response with
        // `recaptcha.getResponse(widgetId)`.
    };

    $scope.setResponse = function (response) {
        // send the `response` to your server for verification.
    };

    $scope.cbExpiration = function() {
        // reset the 'response' object that is on scope
    };
}]);

安全令牌

如果您想使用安全令牌，请将其与站点密钥一起作为HTML属性传递。

<div
    vc-recaptcha
    key="'---- YOUR PUBLIC KEY GOES HERE ----'"
    stoken="'--- YOUR GENERATED SECURE TOKEN ---'"
></div>

请注意，您必须使用您的私钥事先加密令牌！有关安全令牌及其生成和加密的更多信息，请参阅 reCAPTCHA 文档。

服务提供商

您可以使用 vcRecaptchaServiceProvider 在应用的config函数中一次配置recaptcha服务。这是一种方便的方法，可以在一个地方设置您的reCaptcha站点密钥、主题、stoken、大小和类型，而不是在每个 vc-recaptcha 指令元素实例中设置。服务提供商中定义的默认值将被传递给vc-recaptcha指令元素的实例的任何值覆盖。

myApp.config(function(vcRecaptchaServiceProvider){
  vcRecaptchaServiceProvider.setSiteKey('---- YOUR PUBLIC KEY GOES HERE ----')
  vcRecaptchaServiceProvider.setTheme('---- light or dark ----')
  vcRecaptchaServiceProvider.setStoken('--- YOUR GENERATED SECURE TOKEN ---')
  vcRecaptchaServiceProvider.setSize('---- compact, normal or invisible ----')
  vcRecaptchaServiceProvider.setType('---- audio or image ----')
  vcRecaptchaServiceProvider.setLang('---- language code ----')
});

语言代码： https://developers.google.com/recaptcha/docs/language

您也可以一次性设置所有这些值。

myApp.config(function(vcRecaptchaServiceProvider){
  vcRecaptchaServiceProvider.setDefaults({
    key: '---- YOUR PUBLIC KEY GOES HERE ----',
    theme: '---- light or dark ----',
    stoken: '--- YOUR GENERATED SECURE TOKEN ---',
    size: '---- compact, normal or invisible ----',
    type: '---- audio or image ----',
    lang: '---- language code ----'
  });
});

注意：任何省略的值都将未定义，即使之前已设置。

与旧reCaptcha的差异

如果您想强制设置语言，您需要向reCaptcha API的脚本添加一个 hl 参数（?onload=onloadCallback&render=explicit&hl=es）。
参数 tabindex 现在不再由reCaptcha使用，其使用没有效果。
不再支持访问输入文本。
Challenge 现在不再由reCaptcha提供。响应文本与私钥和用户的IP地址一起用于验证。
现在由reCaptcha处理图像和音频之间的切换。
帮助显示现在由reCaptcha处理。

vividcortex / angular-recaptcha

维护者

详细信息