npm 包 react-native-google-recaptcha-v3 使用教程-JavaScript中文网-JavaScript教程资源分享门户

版本：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 文件里面添加如下代码进行初始化：

import GoogleReCaptcha from 'react-native-google-recaptcha-v3';

const [recaptchaToken, setRecaptchaToken] = useState('');

GoogleReCaptcha.configure({
  siteKey: 'YOUR_SITE_KEY',//换成注册的 Site key
  projectId: 'YOUR_PROJECT_ID', //换成自己的项目 ID
  language: 'en', 
});

GoogleReCaptcha.show()
  .then((token) => {
    setRecaptchaToken(token);
  });

3. 使用

下面的例子展示了如何在登录页面集成 reCAPTCHA 校验：

import React, { useState } from 'react';
import { TouchableOpacity, Text, View } from 'react-native';
import GoogleReCaptcha from 'react-native-google-recaptcha-v3';

const LoginScreen = () => {
  const [recaptchaToken, setRecaptchaToken] = useState('');

  const onLoginPress = async () => {
    if (!recaptchaToken) {
      return alert('请先完成 reCAPTCHA 校验');
    }

    //TODO 验证 reCAPTCHA 校验结果

  };

  const onReCaptcha = () => {
    GoogleReCaptcha.show()
      .then((token) => {
        setRecaptchaToken(token);
      });
  };

  return (
    <View>
      <TouchableOpacity onPress={onReCaptcha}>
        <Text>点击验证</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={onLoginPress}>
        <Text>登录</Text>
      </TouchableOpacity>
    </View>
  );
};

注意事项

为了提高效率，建议把获取 reCAPTCHA token 的操作尽量放到用户点击事件中，而不是在组件加载时就去获取。
reCAPTCHA 响应时间一般在 1 秒至 10 秒之间，如果超过这个时间需要考虑使用其他方式验证。

结论

通过以上三个简单的步骤，我们成功的集成了 reCAPTCHA 验证码组件，进一步提升了网站应用的安全性和用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/60067380890c4f72775841a8

npm 包 react-native-google-recaptcha-v3 使用教程