forked from xuho/react-native-google-recaptcha-v2
-
Notifications
You must be signed in to change notification settings - Fork 1
/
GoogleReCaptcha.js
100 lines (97 loc) · 3.28 KB
/
GoogleReCaptcha.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React from 'react';
import WebView from 'react-native-webview';
const patchPostMessageJsCode = `(${String(function () {
var originalPostMessage = window.ReactNativeWebView.postMessage;
var patchedPostMessage = function (message, targetOrigin, transfer) {
originalPostMessage(message, targetOrigin, transfer);
};
patchedPostMessage.toString = function () {
return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
};
window.ReactNativeWebView.postMessage = patchedPostMessage
})})();`;
/**
*
* @param {*} onMessage: callback after received response, error of Google captcha or when user cancel
* @param {*} siteKey: your site key of Google captcha
* @param {*} style: custom style
* @param {*} url: base url
* @param {*} languageCode: can be found at https://developers.google.com/recaptcha/docs/language
* @param {*} cancelButtonText: title of cancel button
*/
const GoogleReCaptcha = ({ onMessage, siteKey, style, url, languageCode, cancelButtonText = 'Cancel' }) => {
const generateTheWebViewContent = siteKey => {
const originalForm =
`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://recaptcha.google.com/recaptcha/api.js?explicit&hl=${languageCode || 'en'}"></script>
<script type="text/javascript">
var onloadCallback = function() { };
var onDataCallback = function(response) {
window.ReactNativeWebView.postMessage(response);
setTimeout(function () {
document.getElementById('captcha').style.display = 'none';
}, 1500);
};
var onCancel = function() {
window.ReactNativeWebView.postMessage("cancel");
document.getElementById('captcha').style.display = 'none';
}
var onDataExpiredCallback = function(error) { window.ReactNativeWebView.postMessage("expired"); };
var onDataErrorCallback = function(error) { window.ReactNativeWebView.postMessage("error"); }
</script>
<style>
.btn {
background-color: #c60710;
color: #ffffff; padding: 8px 32px; margin-top: 8px;
border: none; border-radius: 25px; font-weight: bold;
}
.btn:active {
outline: none;
}
.btn:focus {
outline: none;
}
</style>
</head>
<body>
<div id="captcha">
<div style="text-align: center; padding-top: 100px;">
<div class="g-recaptcha" style="display: inline-block; height: auto;"
data-sitekey="${siteKey}" data-callback="onDataCallback"
data-expired-callback="onDataExpiredCallback"
data-error-callback="onDataErrorCallback">
</div>
<div>
<button
onclick="onCancel()"
class="btn" type="button">
${cancelButtonText}
</button>
</div>
</div>
</div>
</body>
</html>`;
return originalForm;
};
return (
<WebView
originWhitelist={['*']}
mixedContentMode={'always'}
onMessage={onMessage}
javaScriptEnabled
injectedJavaScript={patchPostMessageJsCode}
automaticallyAdjustContentInsets
style={[{ backgroundColor: 'transparent', width: '100%' }, style]}
source={{
html: generateTheWebViewContent(siteKey),
baseUrl: `${url}`,
}}
/>
);
}
export default GoogleReCaptcha;