当React Native 遇到了Google reCAPTCHA
做客戶端開發久了，總有一些煩心事來擾亂你，其中一個就是機器人注冊。當然大部分App目前注冊的時候都要提供短信驗證碼。但是這還是防不住一些專業的羊毛黨，各種短信驗證碼平臺用的飛起。那該怎么辦呢？上驗證碼吧。驗證碼大家都熟悉從不可描述的12306到Google的reCAPTCHA，作用只有一個驗證你是人，不是機器人。今天的主角就是Google reCAPTCHA。
Google reCAPTCHA
Google reCAPTCHA是Google 提供的一系列好用的服務中的一個，提供完善的人機驗證方法。目前有V3和V2兩個版本。V3還在Beta階段，這樣我們主要介紹V2。當然同時Google reCAPTCHA也是google用來做數據標記的方法，每天成千上萬的圖片被人工標記，為Google的Machine Learning系統提供好的幫助。經典的雙贏策略。如果還沒有體會過Google reCAPTCHA這里鏈接reCAPTCHA
如何使用Google reCAPTCHA
Google reCAPTCHA的使用十分簡單，文檔中描述的清楚。下邊簡單的介紹一些。最簡單的方法就是自動的Render Google reCAPTCHA Wideget
<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就可以去進行驗證了。
好了，Google reCAPTCHA如此好用的服務，在移動端可不可以使用呢？當然Google reCAPTCHA提供Android的API。但是如果我們Application是用React Native來寫，是不是就不能使用了呢？當然我們有辦法讓它可以使用。
在React Native中是有Webview組件的，同時WebView組件和React Native之間可以通過postMessage來進行數據通信。那么已然這樣，就可以通過WebView來加載一個HTML來Render Google reCAPTCHA Widget。同時通過PostMessage將 Google reCAPTCHA 返回的token，送給React Native。好了從原理上來講是可以的，那么如何實現呢？還是看代碼吧。
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 }) => (<WebVieworiginWhitelist={['*']}mixedContentMode={'always'}onMessage={onMessage}javaScriptEnabledinjectedJavaScript={patchPostMessageJsCode}automaticallyAdjustContentInsetsstyle={[{ 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提供給大家使用。只要簡單的
yarn add rn-recaptchanpm install rn-recaptcha 復制代碼就ok了。這里是link rn-recaptcha
下邊是具體的一個demo gif。 Happy Hacking :)
總結
以上是生活随笔為你收集整理的当React Native 遇到了Google reCAPTCHA的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 9月，水了几个大中厂前端面试的一些总结分
- 下一篇： Vue父子组件通信小总结