-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex2.pug
More file actions
208 lines (166 loc) · 6.99 KB
/
index2.pug
File metadata and controls
208 lines (166 loc) · 6.99 KB
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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
- var link = 'recaptcha-v2'
- var title = '用 reCAPTCHA v2 來做非機器人驗證'
- 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 v2 使用範例
hr
.tab.text-center
a(href="index.html") 方法一
a.active(href="index2.html") 方法二
a(href="gas.html") 後端 GAS
a(href="https://letswrite.tw/recaptcha-v2/", target="_blank") 筆記文
hr
h2 方法2：寫 JavaScript 使用
p 參考文件：
a(href="https://developers.google.com/recaptcha/docs/display#explicit_render", target="_blank", rel="noopener noreferrer") Explicitly render the reCAPTCHA widget
h3 code
pre
code.
var onloadCallback = function() {
grecaptcha.render('插入在哪個 id 中', {
'sitekey': '網站金鑰',
'theme': 'light',
'size': 'normal',
'callback': verifyCallback,
'expired-callback': expired,
'error-callback': error
});
function verifyCallback(token) {
// 把 token 跟 ip 送到後端做驗證
}
}
<-- 引用 JS -->
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
h4 引用 JS 時有 3 個參數要帶：
ul
li onload：JS 載入完後要執行哪個 function
li render：固定填 explicit
li hl：語系，非必填，reCAPTCHA 會自動檢測。
a(href="https://developers.google.com/recaptcha/docs/language", target="_blank", rel="noopener noreferrer") 語系列表
h4 grecaptcha.render 的參數
ul
li
strong sitekey
| ，填入「網站金鑰」
li
strong theme
| ，亮色或深色樣式：dark、light。預設是 light
li
strong size
| ，大小：compact、normal。預設是 normal
li
strong callback
| ，驗證完成後要觸發哪個 function，會回傳 g-recaptcha-response token
li
strong expired-callback
| ，當驗證過期後會觸發哪個 function
li
strong error-callback
| ，當驗證失敗時會觸發哪個 function
h3 產出範例
// reCAPTCHA 會插入在這個 id 中
#append-here
h4 驗證成功才會出現的按鈕
summary.text-center
button#verify.none(type="button") 驗證成功！
hr
script(src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit", async, defer)
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)
});
// 方法 2：reCAPTCHA 送到後端做驗證
// 來認 reCAPTCHA 載入完成
var onloadCallback = () => {
console.log('grecaptcha is ready!')
grecaptcha.render('append-here', {
'sitekey': '6LdiDOIZAAAAAJUvYtLzY-aRQH6txpNQr_ZM41HZ', // 填入「網站金鑰」
'theme': 'light', // 亮色或深色樣式：dark、light。預設是 light
'size': 'normal', // 大小：compact、normal。預設是 normal
'callback': verifyCallback, // 使用者打勾後要執行的 function
'expired-callback': expired, // 當驗證過期後會觸發哪個 function
'error-callback': error // 當驗證失敗時會觸發哪個 function
});
}
// 把 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 => {
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 驗證失敗')
}