recaptcha_enterprise/demosite/app/templates/comment.html (91 lines of code) (raw):
<!--
Copyright 2023 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<title>Comment: reCAPTCHA Demo</title>
<!-- ATTENTION: reCAPTCHA Example (Client Part 1 of 2) Starts -->
<!-- See: https://cloud.google.com/recaptcha-enterprise/docs/instrument-web-pages#user-action -->
<script src="https://www.google.com/recaptcha/enterprise.js?render={{site_key}}"></script>
<script type="text/javascript">
function handleClick(event) {
event.preventDefault();
grecaptcha.enterprise.ready(async () => {
const token = await grecaptcha.enterprise.execute("{{site_key}}", {
action: "send_comment",
});
await sendComment({ token });
});
}
</script>
<!-- See: https://cloud.google.com/recaptcha-enterprise/docs/create-assessment -->
<script type="text/javascript">
async function sendComment({ comment = "", token }) {
// Include the token for server-side assessment.
// Include the user input values from your form to pass to the backend.
const body = {
comment,
token,
};
// Code for fetching the assessment from server-side goes here.
// Refer to demo app backend code for more information.
// If you already use a library or framework for event handlers, you
// can handle events your usual way.
const score = await fetchServerResponse({
body,
url: "on_comment_submit",
});
// In this demo, the assessment score is displayed in the client.
// But, you should AVOID using the assessment response in the
// client and handle it on the server-side.
useAssessmentInClient(score);
}
</script>
<!-- ATTENTION: reCAPTCHA Example (Client Part 1 of 2) Ends -->
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta
name="description"
content="Explore the different ways of using reCAPTCHA Enterprise to protect web sites and applications."
/>
<link
href="https://fonts.googleapis.com/css?family=Press+Start+2P"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
rel="stylesheet"
/>
<link
rel="icon"
type="image/x-icon"
href="../static/favicon-e9e3fe3130a875eb.ico"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="../static/favicon-16x16-e9e3fe3130a875eb.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="../static/favicon-32x32-e9e3fe3130a875eb.png"
/>
<link
rel="icon"
type="image/png"
sizes="48x48"
href="../static/favicon-48x48-e9e3fe3130a875eb.png"
/>
<link href="../static/global-15fca5ccf020c02b.css" rel="stylesheet" />
<link href="../static/demo-81d99a00.css" rel="stylesheet" />
<script src="../static/demo-2af4c10e.js" type="module"></script>
<script
async
defer
src="../static/global-e680a49614fd8ff8.js"
type="text/javascript"
></script>
</head>
<body>
<recaptcha-demo step="comment">
<!-- ATTENTION: reCAPTCHA Example (Client Part 2 of 2) Starts -->
<button onclick="handleClick(event)">Send comment</button>
<!-- ATTENTION: reCAPTCHA Example (Client Part 2 of 2) Ends -->
</recaptcha-demo>
</body>
</html>