作客戶端開發久了,總有一些煩心事來擾亂你,其中一個就是機器人註冊。固然大部分App目前註冊的時候都要提供短信驗證碼。可是這仍是防不住一些專業的羊毛黨,各類短信驗證碼平臺用的飛起。那該怎麼辦呢?上驗證碼吧。驗證碼你們都熟悉從不可描述的12306到Google的reCAPTCHA,做用只有一個驗證你是人,不是機器人。今天的主角就是Google reCAPTCHA。html
Google reCAPTCHA是Google 提供的一系列好用的服務中的一個,提供完善的人機驗證方法。目前有V3和V2兩個版本。V3還在Beta階段,這樣咱們主要介紹V2。固然同時Google reCAPTCHA也是google用來作數據標記的方法,天天成千上萬的圖片被人工標記,爲Google的Machine Learning系統提供好的幫助。經典的共贏策略。若是尚未體會過Google reCAPTCHA這裏連接reCAPTCHAjava
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