版本：1.0.0
介绍
前端开发中，使用 Google 提供的 reCAPTCHA 验证码组件可以很好的增加网站的安全性，防止机器人恶意攻击等。本文将介绍使用 npm 包 react-native-google-recaptcha-v3 增加 reCAPTCHA 组件的步骤和方法。
安装
npm install react-native-google-recaptcha-v3 --save
准备工作
- 注册一个 Google reCAPTCHA 账号
- 获取 Site key 和 Secret key
集成步骤
1. 修改 Android 配置
打开 android/app/src/main/AndroidManifest.xml 文件，在 <application> 标签内，添加如下代码：
<meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="YOUR_ADMOB_APP_ID"/>
其中 YOUR_ADMOB_APP_ID 要替换成你的 Admob 应用 ID。
在 android/build.gradle 文件里面添加这个依赖库：
compile 'com.google.android.gms:play-services-safetynet:17.0.0'
2. 初始化
在 App.js 文件里面添加如下代码进行初始化：
-- -------------------- ---- -------
------ --------------- ---- -----------------------------------
----- ---------------- ------------------ - -------------
---------------------------
-------- ----------------------- ---- ---
---------- ------------------ --------- --
--------- -----
---
----------------------
------------- -- -
-------------------------
---3. 使用
下面的例子展示了如何在登录页面集成 reCAPTCHA 校验：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------------- ----- ---- - ---- ---------------
------ --------------- ---- -----------------------------------
----- ----------- - -- -- -
----- ---------------- ------------------ - -------------
----- ------------ - ----- -- -- -
-- ----------------- -
------ ----------- --------- -----
-
------ -- --------- ----
--
----- ----------- - -- -- -
----------------------
------------- -- -
-------------------------
---
--
------ -
------
----------------- ----------------------
-----------------
-------------------
----------------- -----------------------
---------------
-------------------
-------
--
--注意事项
- 为了提高效率，建议把获取 reCAPTCHA token 的操作尽量放到用户点击事件中，而不是在组件加载时就去获取。
- reCAPTCHA 响应时间一般在 1 秒至 10 秒之间，如果超过这个时间需要考虑使用其他方式验证。
结论
通过以上三个简单的步骤，我们成功的集成了 reCAPTCHA 验证码组件，进一步提升了网站应用的安全性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067380890c4f72775841a8