當React Native 遇到了Google reCAPTCHA

時間 2019-11-08

標籤 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提供給你們使用。只要簡單的app

yarn add rn-recaptcha
  npm install rn-recaptcha

就ok了。這裏是link rn-recaptchaasync

下邊是具體的一個demo gif。 Happy Hacking :)
ide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。