-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
137 lines (129 loc) · 6.12 KB
/
index.html
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="zh-TW">
<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"/>
<title>用 reCAPTCHA v2 來做非機器人驗證 - August - Let's Write</title>
<link rel="canonical" href="https://www.letswrite.tw/recaptcha-v2/"/>
<meta property="og:url" content="https://letswritetw.github.io/letswrite-recaptcha-v2/"/>
<meta property="fb:app_id" content="911000986339138"/>
<meta property="og:type" content="website"/>
<meta property="og:site_name" content="Let's Write"/>
<meta property="og:title" content="用 reCAPTCHA v2 來做非機器人驗證 - August - Let's Write"/>
<meta itemprop="name" content="用 reCAPTCHA v2 來做非機器人驗證 - August - Let's Write"/>
<meta name="description" content="方法1：直接埋 HTML code"/>
<meta property="og:description" content="方法1：直接埋 HTML code"/>
<meta itemprop="description" content="方法1：直接埋 HTML code"/>
<meta itemprop="image" content="https://letswritetw.github.io/letswrite-recaptcha-v2/fb.jpg"/>
<meta property="og:image" content="https://letswritetw.github.io/letswrite-recaptcha-v2/fb.jpg"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:image:alt" content="用 reCAPTCHA v2 來做非機器人驗證"/>
<link rel="shortcut icon" href="https://letswritetw.github.io/letswritetw/dist/img/logo_512.png"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css"/>
<link rel="stylesheet" href="dist/style.min.css"/>
<!-- Google Tag Manager-->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PGQ9WQT');
</script>
</head>
<body>
<!-- Google Tag Manager (noscript)-->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PGQ9WQT" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<div class="container" id="app">
<h1 class="text-center">reCAPTCHA v2 使用範例</h1>
<hr/>
<div class="tab text-center"><a class="active" href="index.html">方法一</a><a href="index2.html">方法二</a><a href="gas.html">後端 GAS</a><a href="https://letswrite.tw/recaptcha-v2/" target="_blank">筆記文</a></div>
<hr/>
<h2>方法1：直接埋 HTML code</h2>
<p>參考文件：<a href="https://developers.google.com/recaptcha/docs/display#auto_render" target="_blank" rel="noopener noreferrer">Automatically render the reCAPTCHA widget</a></p>
<h3>code</h3>
<pre><code><!-- 放置驗證器 -->
<div
class="g-recaptcha"
data-sitekey="網站金鑰"
data-theme="light" data-size="normal"
data-callback="verify"
data-expired-callback="expired"
data-error-callback="error">
</div>
<-- 引用 JS -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</code></pre>
<ul>
<li><strong>class </strong>必須為「g-recaptcha」</li>
<li><strong>data-sitekey</strong>，填入「網站金鑰」</li>
<li><strong>data-theme</strong>，亮色或深色樣式：dark、light。預設是 light</li>
<li><strong>data-size</strong>，大小：compact、normal。預設是 normal</li>
<li><strong>data-callback</strong>，驗證完成後要觸發哪個 function，會回傳 g-recaptcha-response token</li>
<li><strong>data-expired-callback</strong>，當驗證過期後會觸發哪個 function</li>
<li><strong>data-error-callback</strong>，當驗證失敗時會觸發哪個 function</li>
</ul>
<h3>產出範例</h3>
<div class="g-recaptcha" data-sitekey="6LdiDOIZAAAAAJUvYtLzY-aRQH6txpNQr_ZM41HZ" data-theme="light" data-size="normal" data-callback="verifyCallback" data-expired-callback="expired" data-error-callback="error"></div>
<h4>驗證成功才會出現的按鈕</h4>
<summary class="text-center">
<button class="none" id="verify" type="button">驗證成功！</button>
</summary>
<hr/>
</div>
<script src="https://www.google.com/recaptcha/api.js" async="async" defer="defer"></script>
<script>
var uriIP = 'https://www.cloudflare.com/cdn-cgi/trace';
// GAS 部署為網路應用程式後取得的 URL
var uriGAS = 'https://script.google.com/macros/s/AKfycbwQctW6eHbxsck1X2PD5K9FwRF0a1HQGyqf-34F68YM78O7bYg/exec';
// 取 ip
var ip;
fetch(uriIP)
.then(response => response.text())
.then(result => {
var resultArr = result.split('\n');
for(var i = 0, len = resultArr.length; i < len; i++) {
var tempArr = resultArr[i].split('=');
if(tempArr[0] == 'ip') {
ip = tempArr[1];
break;
}
}
})
.catch(err => {
window.alert(err)
});
// 方法 1：reCAPTCHA 送到後端做驗證
function verifyCallback(token) {
var formData = new FormData();
formData.append('token', token);
formData.append('ip', ip);
fetch(uriGAS, {
method: "POST",
body: formData
}).then(response => response.json())
.then(result => {
if(result.success) {
document.getElementById('verify').classList.remove('none');
} else {
window.alert(result['error-codes'][0])
}
})
.catch(err => {
window.alert(err)
})
}
// 過期要做的事
function expired(ex) {
window.alert('reCAPTCHA 驗證程序到期')
}
// 失敗要做的事
function error(err) {
window.alert('reCAPTCHA 驗證失敗')
}
</script>
</body>
</html>