如何为React Native应用生成适用的reCAPTCHA site key

问题答复 #

一、原生iOS/Android端的site key能否在React Native应用中使用？ #

可以，但有适用场景限制：

• 如果你是通过桥接原生SDK的方式接入reCAPTCHA Enterprise，iOS类型、Android类型的site key完全可以正常使用，分别对应你应用的iOS、Android端即可。
• 如果你是通过WebView内嵌网页版reCAPTCHA的方式接入，原生类型的site key无法正常校验，需要使用网站类型的site key。

二、适配React Native应用的site key生成方案 #

根据你选择的接入方式，按以下步骤操作即可：

方案1：原生SDK桥接接入（更安全、用户体验更流畅，推荐生产环境使用）

• 进入GCP reCAPTCHA Enterprise密钥创建页，分别创建2个密钥：
  • 第一个平台选iOS，填写你RN应用iOS端的Bundle ID，保存后得到iOS端专用site key
  • 第二个平台选Android，填写你RN应用Android端的包名、应用签名的SHA-256值，保存后得到Android端专用site key
• 分别在iOS、Android原生工程中集成官方reCAPTCHA Enterprise原生SDK，封装原生模块向RN JS层暴露getRecaptchaToken之类的调用方法
• RN层发起验证请求时，调用对应平台的原生方法获取验证token，传递给你的业务后端，由后端调用GCP接口校验token有效性即可。

方案2：WebView内嵌接入（开发成本更低，适合快速验证场景）

• 进入GCP reCAPTCHA Enterprise密钥创建页，平台选网站，填写你托管reCAPTCHA验证页面的域名（如果是用本地静态HTML加载的测试场景，可以先填localhost，生产环境必须替换为你的正式域名），保存得到网站类型site key。
• 自行编写简单的HTML页面，集成网页版reCAPTCHA逻辑，将页面托管到你填写的域名下，或打包到RN应用本地资源中。
• RN端用WebView加载该验证页面，通过postMessage机制实现JS层和WebView内页面的通信，拿到验证通过后的token，再传给业务后端校验即可。

注意事项 #

• 所有reCAPTCHA token的校验必须在服务端完成，禁止仅在前端校验结果，避免验证逻辑被绕过。
• 不要硬编码site key到RN的JS业务代码中，建议通过服务端接口动态拉取，或在原生层配置做好混淆。

内容的提问来源于stack exchange，提问作者Victor Cui