-
Notifications
You must be signed in to change notification settings - Fork 1
/
index2.pug
182 lines (147 loc) · 6.13 KB
/
index2.pug
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
- var link = 'recaptcha-v3'
- var title = '用 reCAPTCHA v3 來做非機器人驗證'
- var description = '方法2：寫 JavaScript 使用'
<!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 #{title} - August - Let's Write
link(rel="canonical", href=`https://www.letswrite.tw/${link}/`)
meta(property="og:url", content=`https://letswritetw.github.io/letswrite-${link}/`)
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=`${title} - August - Let's Write`)
meta(itemprop="name", content=`${title} - August - Let's Write`)
meta(name="description", content=description)
meta(property="og:description", content=description)
meta(itemprop="description", content=description)
meta(itemprop="image", content=`https://letswritetw.github.io/letswrite-${link}/fb.jpg`)
meta(property="og:image", content=`https://letswritetw.github.io/letswrite-${link}/fb.jpg`)
meta(property="og:image:width", content="1200")
meta(property="og:image:height", content="630")
meta(property="og:image:alt", content=title)
link(rel="shortcut icon", href="https://letswritetw.github.io/letswritetw/dist/img/logo_512.png")
//- css
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');
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")
#app.container
h1.text-center reCAPTCHA v3 使用範例
hr
.tab.text-center
a(href="index.html") 方法一
a.active(href="index2.html") 方法二
a(href="gas.html") 後端 GAS
a(href="https://letswrite.tw/recaptcha-v3/", target="_blank") 筆記文
hr
h2 方法2：寫 JavaScript 使用
p 參考文件：
a(href="hhttps://developers.google.com/recaptcha/docs/v3#programmatically_invoke_the_challenge", target="_blank", rel="noopener noreferrer") Programmatically invoke the challenge
h3 code
pre
code.
grecaptcha.ready(function() {
grecaptcha.execute('網站金鑰', {
action: 'verify2'
}).then(function(token) {
// 將 token 送到後端做驗證
});
});
<-- 引用 JS -->
<script src="https://www.google.com/recaptcha/api.js?render=網站金鑰" async defer></script>
h4 引用 JS 時有 1 個參數要帶：
ul
li render：網站金鑰
h4 grecaptcha.execute 的 data
ul
li
strong action
| ，v3 新增的，這邊填的值會顯示在後台報表中
h3 點擊下方的「送出」按鈕來測試
form
label 隨便填個東西
input(type="text", placeholder="好啦不填也可以")
button#submit(type="button") 送出
h4 驗證成功才會出現的按鈕
summary.text-center
button#verify-true.none(type="button") 驗證成功！
button#verify-false.none(type="button") 我懷疑你是機器人！
hr
script(src="https://www.google.com/recaptcha/api.js?render=6LcqB-IZAAAAAAQKwKtd2JdlGeCaHRXJL-SWtZlu", async, defer)
script.
var uriIP = 'https://www.cloudflare.com/cdn-cgi/trace';
// GAS 部署為網路應用程式後取得的 URL
var uriGAS = 'https://script.google.com/macros/s/AKfycbzd4WBgLZ5p73S5kpzWdv5o5gjdlE6ZWlMiZHxu/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)
});
// 方法 2：reCAPTCHA 送到後端做驗證
// 「送出」按鈕被點擊時執行驗證
var btn = document.getElementById('submit');
btn.addEventListener('click', e => {
grecaptcha
.ready(() => {
grecaptcha.execute('6LcqB-IZAAAAAAQKwKtd2JdlGeCaHRXJL-SWtZlu', {
action: 'verify2'
}).then(token => {
console.log("token", token)
// 將 token 送到後端做驗證
verifyCallback(token)
});
});
})
// 把 token 跟 ip 送到後端做驗證
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 => {
console.log("verifyCallback -> result", result)
if(result.success) {
// 分數大過 0.5，才當作是真實人類操作
if(result.score > 0.5) {
document.getElementById('verify-true').classList.remove('none');
}
// 分數低於 0.5，當作機器人
else {
document.getElementById('verify-false').classList.remove('none');
}
} else {
window.alert(result['error-codes'][0])
}
})
.catch(err => {
window.alert(err)
})
}