在前端开发中，我们经常需要使用到验证码以增强用户登录和注册的安全性。而 ngx-recaptcha 是一个基于 Google reCAPTCHA v2/v3 的 Angular 库，可以方便地集成到我们的网站中。在本文中，我们将介绍如何使用 ngx-recaptcha，并通过一个完整的示例来演示如何在 Angular 项目中进行集成。
前置条件
在使用 ngx-recaptcha 之前，我们需要获取 reCAPTCHA 的站点密钥和秘钥。如果你还没有这些信息，可以前往 reCAPTCHA 官网 注册一个帐号。注册后，我们可以在“注册 reCAPTCHA”页面中获得我们的站点密钥和秘钥。
安装 ngx-recaptcha
安装 ngx-recaptcha 非常简单，只需要使用 npm 命令即可：
npm install ngx-recaptcha --save
配置 reCAPTCHA
在使用 ngx-recaptcha 之前，我们需要在项目中添加一个 reCAPTCHA key，用于验证用户的响应是否正确。我们可以在 index.html 文件中添加以下代码：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
--------- -----------
------- -----------------------------------------------------------------------
--------
-------- ----------------- -
------ ---------------------
-
-------- ------------------ -
------ ----- -- - ----
-
---------
-------
------
---------------------
-------
-------在代码中，我们首先加载了 reCAPTCHA 的 JavaScript 库，并获取了 reCAPTCHA key 和 reCAPTCHA type，这些信息将用于 ngx-recaptcha 验证中。
使用 ngx-recaptcha
在 Angular 中使用 ngx-recaptcha 非常方便，我们只需要在我们的组件中添加一个 recaptcha 模板指令即可：
-- -------------------- ---- -------
---- -------------------- ---
----- ------------------------
-------
------
------ ------------ ------------ --------
--------
-------
---------
------ --------------- --------------- --------
--------
---- ------------------- --------- -----------------------------------------------
------- ------------- -------------------------------------------------
-------在上面的代码中，我们在一个 form 元素中添加了一个 recaptcha 模板指令，并在模板中使用了一个 g-recaptcha 类，这个类将用于显示 reCAPTCHA 小部件。我们还定义了一个 Angular 事件 (resolved)，当用户成功验证 reCAPTCHA 后将会被触发。这里我们调用了一个 onRecaptchaResolved 方法，用于更新组件的状态。
接下来，我们在 Angular 组件中实现这个 onRecaptchaResolved 方法：
-- -------------------- ---- -------
-- ------------------
------ - --------- - ---- ----------------
------------
--------- ------------
------------ -------------------------
--
------ ----- -------------- -
------ ------------------- - ------
------ ---------- -
-- ---
-
------ -------------------------- ------- -
------------------------ - -----
-
-在 onRecaptchaResolved 方法中，我们更新了 isRecaptchaResolved 属性，用于控制 Submit 按钮是否可用。如果 reCAPTCHA 验证成功，则这个方法将被调用，并设置为 true，否则为 false。
完整示例
最后，我们通过一个完整的示例来演示如何在 Angular 中使用 ngx-recaptcha。
npm install ngx-recaptcha @types/googlemaps --save
-- -------------------- ---- -------
---- -------------------- ---
----- ------------------------
-------
------
------ ------------ ------------ --------
--------
-------
---------
------ --------------- --------------- --------
--------
---- ------------------- --------- -----------------------------------------------
------- ------------- -------------------------------------------------
--------- -------------------- ---- -------
-- ------------------
------ - --------- - ---- ----------------
------------
--------- ------------
------------ -------------------------
--
------ ----- -------------- -
------ ------------------- - ------
------ ---------- -
-- ---
-
------ -------------------------- ------- -
------------------------ - -----
-
-总结
这篇教程介绍了如何使用 ngx-recaptcha，在 Angular 应用程序中集成 reCAPTCHA 验证码。我们首先通过注册并获取站点密钥和秘钥来配置 reCAPTCHA。然后，我们依次使用 npm 以及添加一个 recaptcha 模板指令来集成 ngx-recaptcha。最后，我们演示了一个完整的示例，用于演示如何在 Angular 中使用 ngx-recaptcha。
我们希望这篇教程对您有所帮助，并帮助您在网站中集成 reCAPTCHA 验证码。如果您还有任何问题，请随时在评论中留言！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cdd81e8991b448da7b9