angular recaptcha

如果您有兴趣继续使用它，请提供此存储库。

在您的AngularJS项目中添加recaptcha。

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

下载最新版本。

 bower install --save angular-recaptcha

 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.go*ogl**e.com/recaptcha。

• 包括VC-Recaptcha脚本，并使您的Angular应用取决于vcRecaptcha模块。

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

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

• 之后，您可以在视图中放置一个用于验证码小部件的容器，并在此上调用vc-recaptcha指令：

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

在这里， key属性传递给指令的范围，因此您可以使用范围中的属性或仅需硬编码字符串。请小心使用您的公钥，而不是私钥。

默认情况下，如果使用formControl放置在表单中，则需要检查验证码以使表格有效。如果未检查验证码（如果没有选中用户检查框或支票已过期），则表格将被标记为无效。验证密钥是recaptcha 。您可以通过将required属性设置为false或将评估为false的范围的变量来选择退出此功能。任何其他值或省略属性都将选择进入此功能。

如果不需要验证码，您还可以以程序为程序触发验证，例如：

 vcRecaptchaService . execute ( widgetId ) ;

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

要从服务器验证此对象，您需要使用“验证”部分中描述的API。验证不在此工具的范围之内，因为必须在服务器端执行此操作。

您可以简单地为ng-model提供一个值，该值将分别在响应中分别进行动态填充和清除。当您想要响应的值时，可以从传递给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 ) ;
  }
  . . .

或者，您可以通过编程方式获得需要发送到服务器的响应，请使用vcRecaptchaService Angular服务的方法getResponse() 。此方法接收一个可选的参数widgetId ，可用于获取特定的recaptcha小部件的响应（如果您呈现多个窗口小部件）。如果没有提供小部件ID，则将返回第一个创建的小部件的响应。

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

建议使用ng-model用于正常使用，因为该值直接通过指令将其绑定到Recaptcha实例，并且无需管理或传递witgetGetID 。

您可以选择将验证码使用的theme作为HTML属性：

    < 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

在这种情况下，我们指定验证码应使用名为Light的主题。

您可以将三个听众与指令， on-create ， on-success和on-expire一起使用。

• on-create ：在创建小部件之后，它就被称为。它会收到一个小部件ID，如果您的网站中有一个以上的recaptcha，这可能会有所帮助。
• 成功：一旦用户解决验证码，就被称为。它接收您需要验证响应所需的响应字符串。
• on-Expire ：当验证码响应到期时，用户需要求解新的验证码。

 < 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在应用程序的配置函数中配置recaptcha服务。这是设置您的recaptcha站点密钥，主题，stoken，大小并输入一个位置而不是每个vc-recaptcha指令元素实例的方便方法。服务提供商中定义的默认值将被该实例的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 ----'
  } ) ;
} ) ;

注意：即使以前设置，省略的任何值也将是不确定的。

• 如果要强制一种语言，则需要将hl参数添加到recaptcha api的脚本（ ?onload=onloadCallback&render=explicit&hl=es ）。
• recaptcha不再使用参数Tabindex ，其用法没有效果。
• 不再支持对输入文本的访问。
• 挑战不再由recaptcha提供。响应文本与私钥和用户的IP地址一起使用以进行验证。
• 现在，recaptcha处理图像和音频之间的切换。
• 现在，帮助显示由recaptcha处理。

• 3.0.0-删除了包括Google Recaptcha API的需要。
• 2.2.3-创建验证码元素后删除清理。
• 2.0.1-使用ng -route和recaptcha时固定的ONLOAD将其放置在辅助视图中。
• 2.0.0-改写服务以支持新的recaptcha
• 1.0.2-在服务中添加了额外的Recaptcha对象方法，即switch_type ， showhelp ，等。
• 1.0.0- key属性现在是指令的范围属性
• 将destroy()方法添加到服务中。感谢@Endorama。
• 我们添加了一种不同的集成方法（请参见Demo/2.HTML），该方法更安全，因为它不依赖于RECAPTCHA的重新加载事件的超时。感谢@sboisse报告问题并提出解决方案。
• 现在，该版本是使用gruntjs构建的，因此，如果您在项目中使用源文件（ src目录），则现在应该在Release目录中使用文件。