前言
Google reCAPTCHA 是一款广泛使用的验证码解决方案，可以有效地防止盗用和滥用，保护网站的安全性。而 angular-grecaptcha 是一款优秀的 AngularJS 包，可以方便地在 Angular 应用中使用 Google reCAPTCHA。
本文就将详细介绍 npm 包 angular-grecaptcha 的使用方法，以及如何在自己的项目中正确地配置和调用它。
安装和配置
首先，我们需要在项目中添加 angular-grecaptcha 包：
npm install angular-grecaptcha
安装完成后，在项目的 HTML 文件上添加以下脚本引用：
<script src="https://www.google.com/recaptcha/api.js"></script> <script src="/node_modules/angular-grecaptcha/dist/angular-grecaptcha.min.js"></script>
接着，在 AngularJS 应用的模块中注册 'gRecaptcha' 依赖：
angular.module('myApp', ['gRecaptcha']);然后，我们需要在前端代码中添加以下配置：
app.config(function(gRecaptchaProvider) {
gRecaptchaProvider.setSitekey('RECAPTCHA_SITE_KEY');
});其中，'RECAPTCHA_SITE_KEY' 是在 Google reCAPTCHA 网站上申请生成的 Site key。
使用和指导
经过上述的安装和配置，我们已经准备好在项目中使用 angular-grecaptcha 了，接下来我们将更加详细地介绍如何调用和使用该包。
首先，在我们需要使用 Google reCAPTCHA 的页面上添加以下 HTML 代码：
<div g-recaptcha ng-model="myCaptchaResponse" g-recaptcha-response="myCaptchaResponse"></div>
其中，ng-model 属性将该 div 绑定到一个 AngularJS Model 上，并将用户输入的验证码保存到该 Model 中；g-recaptcha-response 属性则绑定到一个变量上，用来存储 Google reCAPTCHA 服务的响应数据。
接下来，我们需要在 AngularJS 控制器中添加以下代码：
-- -------------------- ---- -------
------------------------ ---------------- ------ -
----------------- - ---------- -
--- ---- - -
----------- ------------------------
--
----------------------- ----------------------------- -
-- ----- ------ --------
-- --------------- -
-- ----- ------ -----
---
--
---其中，submitForm 方法将会从 $scope.myCaptchaResponse 变量中读取用户的验证码输入，然后将该数据作为 POST 请求的参数发送给服务器。服务器端可以使用该数据来验证用户的身份和合法性。
最后，如果你希望在用户提交表单时进行 Google reCAPTCHA 的验证，可以在表单的 HTML 代码中添加 ng-submit 属性，如下所示：
<form ng-submit="submitForm()">
当用户点击提交按钮时，AngularJS 将首先进行验证码的验证，验证通过后才会将表单数据发送给服务器。
示例代码
包括了上述介绍的 HTML 和 AngularJS 代码的完整实现可以参考如下的示例代码：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
------------- --------- ---- -----------------
------- -------------------------------------------------------
------- ----------------------------------------------------
------- -------------------------------------------------------------------------------
--------
--- --- - ----------------------- ----------------
--------------------------------------- -
----------------------------------------------------
---
------------------------ ---------------- ------ -
----------------- - ---------- -
--- ---- - -
----------- ------------------------
--
----------------------- ----------------------------- -
-- ----- ------ --------
-- --------------- -
-- ----- ------ -----
---
--
---
---------
-------
----- -----------------------
----- -------------------------
---- ----------- ---------------------------- -----------------------------------------------
------- -----------------------------
-------
-------
-------在你的项目中按照上述方式引用和配置 angular-grecaptcha，然后复制上述代码并将其中的 RECAPTCHA_SITE_KEY 替换为你在 Google reCAPTCHA 网站上申请生成的 Site key，即可立即开始使用 Google reCAPTCHA 验证码服务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005675281e8991b448e3d0a