当React Native 遇到了Google reCAPTCHA

时间 2019-12-06

标签 react native 遇到 google recaptcha 栏目 React 繁體版

原文原文链接

作客户端开发久了，总有一些烦心事来扰乱你，其中一个就是机器人注册。固然大部分App目前注册的时候都要提供短信验证码。可是这仍是防不住一些专业的羊毛党，各类短信验证码平台用的飞起。那该怎么办呢？上验证码吧。验证码你们都熟悉从不可描述的12306到Google的reCAPTCHA，做用只有一个验证你是人，不是机器人。今天的主角就是Google reCAPTCHA。html

Google reCAPTCHA

Google reCAPTCHA是Google 提供的一系列好用的服务中的一个，提供完善的人机验证方法。目前有V3和V2两个版本。V3还在Beta阶段，这样咱们主要介绍V2。固然同时Google reCAPTCHA也是google用来作数据标记的方法，天天成千上万的图片被人工标记，为Google的Machine Learning系统提供好的帮助。经典的共赢策略。若是尚未体会过Google reCAPTCHA这里连接reCAPTCHAjava

如何使用Google reCAPTCHA

Google reCAPTCHA的使用十分简单，文档中描述的清楚。下边简单的介绍一些。最简单的方法就是自动的Render Google reCAPTCHA Widegetreact

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key" data-callback="yourCallbackFunction"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>
复制代码

上面是个简单的html就实现了如何使用Google reCAPTCHA. 具体来讲就是加载了google reCAPTCHA的JavaScript,而后定义一个class name是g-recaptcha div，这样之后reCAPTCHA的widget就会Render到它下边。固然你要在google reCAPTCHA上申请一个相应的site_key。so easy。好了当你用浏览器打开这个html的时候就能够看到Google reCAPTCHA widget被render出来了。同时定义了CallBallFunction，当验证成功时候，Google reCAPTCHA会调用这个callback，把取得的token告诉Application，那么Application就能够去进行验证了。npm

好了，Google reCAPTCHA如此好用的服务，在移动端可不可使用呢？固然Google reCAPTCHA提供Android的API。可是若是咱们Application是用React Native来写，是否是就不能使用了呢？固然咱们有办法让它可使用。react-native

在React Native中是有Webview组件的，同时WebView组件和React Native之间能够经过postMessage来进行数据通讯。那么已然这样，就能够经过WebView来加载一个HTML来Render Google reCAPTCHA Widget。同时经过PostMessage将 Google reCAPTCHA 返回的token，送给React Native。好了从原理上来说是能够的，那么如何实现呢？仍是看代码吧。api

import { WebView } from 'react-native';

  const generateTheWebViewContent = siteKey => {
    const htmlMarkup =
      '<!DOCTYPE html><html><head>' +
      '<script src="https://recaptcha.google.cn/recaptcha/api.js"></script>' +
      'var onDataCallback = function(response) { console.log(response); window.postMessage(response); }; ' +
      '</head><body>' +
      '<div style="text-align: center"><div class="g-recaptcha" style="display: inline-block"' +
      'data-sitekey="' +
      siteKey + '" data-callback="onDataCallback" ';
    return htmlMarkup;
  };

  const RNReCaptcha = ({ onMessage, siteKey, style, url }) => (
    <WebView originWhitelist={['*']} mixedContentMode={'always'} onMessage={onMessage} javaScriptEnabled injectedJavaScript={patchPostMessageJsCode} automaticallyAdjustContentInsets style={[{ backgroundColor: 'transparent', width: '100%' }, style]} source={{ html: generateTheWebViewContent(siteKey), baseUrl: `${url}`, }} /> ); 复制代码

上边这段代码就是一个最简单的实现，定义了一个RNReCaptcha的Component，其实就是一个WebView，在source里咱们直接给出一段html，其实就是上边那个例子的html，这样一来render这个html就是把Google reCAPTCHA widget render了出来，同时经过postMessage将reCAPTCHA放回的结果送给React Native。好了，就是如此简单。浏览器

固然，为了方便其余人的使用，我已经publish一个npm package提供给你们使用。只要简单的bash

yarn add rn-recaptcha
  npm install rn-recaptcha
复制代码

就ok了。这里是link rn-recaptchaapp

下边是具体的一个demo gif。 Happy Hacking :) async