Skip to content

Commit b0563b0

Browse files
morewrySita04
morewry
and
Sita04
authored
feat: update recaptcha demosite front end (GoogleCloudPlatform#7921)
* feat: update recaptcha demosite front end * update comments and license --------- Co-authored-by: Sita Lakshmi Sangameswaran <sitalakshmi@google.com>
1 parent 0807bca commit b0563b0

File tree

7 files changed

+440
-419
lines changed

7 files changed

+440
-419
lines changed

‎recaptcha_enterprise/demosite/src/main/resources/static/scripts/demo-a14dc264.js renamed to ‎recaptcha_enterprise/demosite/src/main/resources/static/scripts/demo-39df041b.js

Lines changed: 107 additions & 49 deletions
Large diffs are not rendered by default.

‎recaptcha_enterprise/demosite/src/main/resources/static/scripts/global-415f8f0291f2f30a.js renamed to ‎recaptcha_enterprise/demosite/src/main/resources/static/scripts/global-e680a49614fd8ff8.js

File renamed without changes.

‎recaptcha_enterprise/demosite/src/main/resources/templates/comment.html

Lines changed: 66 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -15,101 +15,93 @@
1515

1616
<!DOCTYPE html>
1717
<html lang="en-us" xmlns:th="http://www.thymeleaf.org">
18-
<head>
19-
<meta charset="UTF-8" />
20-
<title>Comment: reCAPTCHA Demo</title>
21-
<!-- ATTENTION: reCAPTCHA Example (Client Part 1 of 2) Starts -->
22-
<!-- See: https://cloud.google.com/recaptcha-enterprise/docs/instrument-web-pages#user-action -->
23-
<script th:src="@{https://www.google.com/recaptcha/enterprise.js(render=${site_key})}"></script>
24-
<script type="text/javascript">
25-
function handleClick(event) {
26-
event.preventDefault();
27-
grecaptcha.enterprise.ready(async () => {
28-
const token = await grecaptcha.enterprise.execute(
29-
"[[${site_key}]]",
30-
{
31-
action: "send_comment",
32-
}
33-
);
34-
await sendComment({ token });
35-
});
36-
}
37-
</script>
38-
<!-- See: https://cloud.google.com/recaptcha-enterprise/docs/create-assessment -->
39-
<script type="text/javascript">
40-
async function sendComment({ comment = "", token }) {
41-
// Include the token for server-side assessment.
42-
// Include the user input values from your form to pass to the backend.
43-
const body = {
44-
comment,
45-
token,
46-
};
47-
// Code for fetching the assessment from server-side goes here.
48-
// Refer to demo app backend code for more information.
49-
// If you already use a library or framework for event handlers, you
50-
// can handle events your usual way.
51-
const score = await fetchServerResponse({
52-
body,
53-
url: "on_comment_submit",
54-
});
55-
// In this demo, the assessment score is displayed in the client.
56-
// But generally, you should avoid using the assessment response in the
57-
// client and handle it on the server-side.
58-
useAssessmentInClient(score);
59-
}
60-
</script>
61-
<!-- ATTENTION: reCAPTCHA Example (Client Part 1 of 2) Ends -->
62-
<meta name="viewport" content="width=device-width,initial-scale=1" />
63-
<meta
18+
<head>
19+
<meta charset="UTF-8" />
20+
<title>Comment: reCAPTCHA Demo</title>
21+
<!-- ATTENTION: reCAPTCHA Example (Client Part 1 of 2) Starts -->
22+
<!-- See: https://cloud.google.com/recaptcha-enterprise/docs/instrument-web-pages#user-action -->
23+
<script th:src="@{https://www.google.com/recaptcha/enterprise.js(render=${site_key})}"></script>
24+
<script type="text/javascript">
25+
function handleClick(event) {
26+
event.preventDefault();
27+
grecaptcha.enterprise.ready(async () => {
28+
const token = await grecaptcha.enterprise.execute("[[${site_key}]]", {
29+
action: "send_comment",
30+
});
31+
await sendComment({ token });
32+
});
33+
}
34+
</script>
35+
<!-- See: https://cloud.google.com/recaptcha-enterprise/docs/create-assessment -->
36+
<script type="text/javascript">
37+
async function sendComment({ comment = "", token }) {
38+
// Include the token for server-side assessment.
39+
// Include the user input values from your form to pass to the backend.
40+
const body = {
41+
comment,
42+
token,
43+
};
44+
// Code for fetching the assessment from server-side goes here.
45+
// Refer to demo app backend code for more information.
46+
// If you already use a library or framework for event handlers, you
47+
// can handle events your usual way.
48+
const score = await fetchServerResponse({
49+
body,
50+
url: "on_comment_submit",
51+
});
52+
// In this demo, the assessment score is displayed in the client.
53+
// But, you should AVOID using the assessment response in the
54+
// client and handle it on the server-side.
55+
useAssessmentInClient(score);
56+
}
57+
</script>
58+
<!-- ATTENTION: reCAPTCHA Example (Client Part 1 of 2) Ends -->
59+
<meta name="viewport" content="width=device-width,initial-scale=1" />
60+
<meta
6461
name="description"
6562
content="Explore the different ways of using reCAPTCHA Enterprise to protect web sites and applications."
66-
/>
67-
<link
63+
/>
64+
<link
6865
href="https://fonts.googleapis.com/css?family=Press+Start+2P"
6966
rel="stylesheet"
70-
/>
71-
<link
67+
/>
68+
<link
7269
href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
7370
rel="stylesheet"
74-
/>
71+
/>
7572
<link
7673
rel="icon"
7774
type="image/x-icon"
7875
href="/demoasset/favicon-e9e3fe3130a875eb.ico"
7976
/>
80-
<link
77+
<link
8178
rel="icon"
8279
type="image/png"
8380
sizes="16x16"
8481
href="/demoasset/favicon-16x16-e9e3fe3130a875eb.png"
85-
/>
86-
<link
82+
/>
83+
<link
8784
rel="icon"
8885
type="image/png"
8986
sizes="32x32"
9087
href="/demoasset/favicon-32x32-e9e3fe3130a875eb.png"
91-
/>
92-
<link
88+
/>
89+
<link
9390
rel="icon"
9491
type="image/png"
9592
sizes="48x48"
9693
href="/demoasset/favicon-48x48-e9e3fe3130a875eb.png"
97-
/>
98-
<link href="/demoasset/global-15fca5ccf020c02b.css" rel="stylesheet" />
99-
<link href="/demoasset/demo-81d99a00.css" rel="stylesheet" />
100-
<script src="/scripts/demo-a14dc264.js" type="module"></script>
101-
<script
102-
async
103-
defer
104-
src="/scripts/global-415f8f0291f2f30a.js"
105-
type="text/javascript"
106-
></script>
107-
</head>
108-
<body>
109-
<recaptcha-demo step="comment">
110-
<!-- ATTENTION: reCAPTCHA Example (Client Part 2 of 2) Starts -->
111-
<button onclick="handleClick(event)">Send comment</button>
112-
<!-- ATTENTION: reCAPTCHA Example (Client Part 2 of 2) Ends -->
113-
</recaptcha-demo>
114-
</body>
94+
/>
95+
<link href="/demoasset/global-15fca5ccf020c02b.css" rel="stylesheet" />
96+
<link href="/demoasset/demo-81d99a00.css" rel="stylesheet" />
97+
<script src="/scripts/demo-39df041b.js" type="module"></script>
98+
<script async defer src="/scripts/global-e680a49614fd8ff8.js" type="text/javascript"></script>
99+
</head>
100+
<body>
101+
<recaptcha-demo step="comment">
102+
<!-- ATTENTION: reCAPTCHA Example (Client Part 2 of 2) Starts -->
103+
<button onclick="handleClick(event)">Send comment</button>
104+
<!-- ATTENTION: reCAPTCHA Example (Client Part 2 of 2) Ends -->
105+
</recaptcha-demo>
106+
</body>
115107
</html>

‎recaptcha_enterprise/demosite/src/main/resources/templates/home.html

Lines changed: 60 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -15,96 +15,88 @@
1515

1616
<!DOCTYPE html>
1717
<html lang="en-us" xmlns:th="http://www.thymeleaf.org">
18-
<head>
19-
<meta charset="UTF-8" />
20-
<title>Home: reCAPTCHA Demo</title>
21-
<!-- ATTENTION: reCAPTCHA Example (Client Part 1 of 2) Starts -->
22-
<!-- See: https://cloud.google.com/recaptcha-enterprise/docs/instrument-web-pages#page-load -->
23-
<script th:src="@{https://www.google.com/recaptcha/enterprise.js(render=${site_key})}"></script>
24-
<script type="text/javascript">
25-
grecaptcha.enterprise.ready(async () => {
26-
const token = await grecaptcha.enterprise.execute(
27-
"[[${site_key}]]",
28-
{
29-
action: "home",
30-
}
31-
);
32-
await viewHomepage({ token });
33-
});
34-
</script>
35-
<!-- See: https://cloud.google.com/recaptcha-enterprise/docs/create-assessment -->
36-
<script type="text/javascript">
37-
async function viewHomepage({ token }) {
38-
// Include the token for server-side assessment.
39-
const body = {
40-
token,
41-
};
42-
// Code for fetching the assessment from server-side goes here.
43-
// Refer to demo app backend code for more information.
44-
// If you already use a library or framework for event handlers, you
45-
// can handle events your usual way.
46-
const score = await fetchServerResponse({
47-
body,
48-
url: "on_homepage_load",
18+
<head>
19+
<meta charset="UTF-8" />
20+
<title>Home: reCAPTCHA Demo</title>
21+
<!-- ATTENTION: reCAPTCHA Example (Client Part 1 of 2) Starts -->
22+
<!-- See: https://cloud.google.com/recaptcha-enterprise/docs/instrument-web-pages#page-load -->
23+
<script th:src="@{https://www.google.com/recaptcha/enterprise.js(render=${site_key})}"></script>
24+
<script type="text/javascript">
25+
grecaptcha.enterprise.ready(async () => {
26+
const token = await grecaptcha.enterprise.execute("[[${site_key}]]", {
27+
action: "home",
28+
});
29+
await viewHomepage({ token });
4930
});
50-
// In this demo, the assessment score is displayed in the client.
51-
// But generally, you should avoid using the assessment response in the
52-
// client and handle it on the server-side.
53-
useAssessmentInClient(score);
54-
}
55-
</script>
56-
<!-- ATTENTION: reCAPTCHA Example (Client Part 1 of 2) Ends -->
57-
<meta name="viewport" content="width=device-width,initial-scale=1" />
58-
<meta
31+
</script>
32+
<!-- See: https://cloud.google.com/recaptcha-enterprise/docs/create-assessment -->
33+
<script type="text/javascript">
34+
async function viewHomepage({ token }) {
35+
// Include the token for server-side assessment.
36+
const body = {
37+
token,
38+
};
39+
// Code for fetching the assessment from server-side goes here.
40+
// Refer to demo app backend code for more information.
41+
// If you already use a library or framework for event handlers, you
42+
// can handle events your usual way.
43+
const score = await fetchServerResponse({
44+
body,
45+
url: "on_homepage_load",
46+
});
47+
// In this demo, the assessment score is displayed in the client.
48+
// But, you should AVOID using the assessment response in the
49+
// client and handle it on the server-side.
50+
useAssessmentInClient(score);
51+
}
52+
</script>
53+
<!-- ATTENTION: reCAPTCHA Example (Client Part 1 of 2) Ends -->
54+
<meta name="viewport" content="width=device-width,initial-scale=1" />
55+
<meta
5956
name="description"
6057
content="Explore the different ways of using reCAPTCHA Enterprise to protect web sites and applications."
61-
/>
62-
<link
58+
/>
59+
<link
6360
href="https://fonts.googleapis.com/css?family=Press+Start+2P"
6461
rel="stylesheet"
65-
/>
66-
<link
62+
/>
63+
<link
6764
href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
6865
rel="stylesheet"
69-
/>
66+
/>
7067
<link
7168
rel="icon"
7269
type="image/x-icon"
7370
href="/demoasset/favicon-e9e3fe3130a875eb.ico"
7471
/>
75-
<link
72+
<link
7673
rel="icon"
7774
type="image/png"
7875
sizes="16x16"
7976
href="/demoasset/favicon-16x16-e9e3fe3130a875eb.png"
80-
/>
81-
<link
77+
/>
78+
<link
8279
rel="icon"
8380
type="image/png"
8481
sizes="32x32"
8582
href="/demoasset/favicon-32x32-e9e3fe3130a875eb.png"
86-
/>
87-
<link
83+
/>
84+
<link
8885
rel="icon"
8986
type="image/png"
9087
sizes="48x48"
9188
href="/demoasset/favicon-48x48-e9e3fe3130a875eb.png"
92-
/>
93-
<link href="/demoasset/global-15fca5ccf020c02b.css" rel="stylesheet" />
94-
<link href="/demoasset/demo-81d99a00.css" rel="stylesheet" />
95-
<script src="/scripts/demo-a14dc264.js" type="module"></script>
96-
<script
97-
async
98-
defer
99-
src="/scripts/global-415f8f0291f2f30a.js"
100-
type="text/javascript"
101-
></script>
102-
</head>
103-
<body>
104-
<recaptcha-demo step="home">
105-
<!-- ATTENTION: reCAPTCHA Example (Client Part 2 of 2) Starts -->
106-
<!-- Nothing required for page load -->
107-
<!-- ATTENTION: reCAPTCHA Example (Client Part 2 of 2) Ends -->
108-
</recaptcha-demo>
109-
</body>
89+
/>
90+
<link href="/demoasset/global-15fca5ccf020c02b.css" rel="stylesheet" />
91+
<link href="/demoasset/demo-81d99a00.css" rel="stylesheet" />
92+
<script src="/scripts/demo-39df041b.js" type="module"></script>
93+
<script async defer src="/scripts/global-e680a49614fd8ff8.js" type="text/javascript"></script>
94+
</head>
95+
<body>
96+
<recaptcha-demo step="home">
97+
<!-- ATTENTION: reCAPTCHA Example (Client Part 2 of 2) Starts -->
98+
<!-- Nothing required for page load -->
99+
<!-- ATTENTION: reCAPTCHA Example (Client Part 2 of 2) Ends -->
100+
</recaptcha-demo>
101+
</body>
110102
</html>

0 commit comments

Comments
 (0)