Google reCAPTCHA Verification Step guide

Tutorials and DIY Guides
,
1

We can use google reCAPTCHA in many places.

  1. When logging in, we can add this verification to prevent others from repeatedly trying to log in to another person’s account, or using robots to help.
  2. If it’s just a page that uses a code to redeem points, we can use it to ensure the security of the code.
  3. You can also use it in other places where you don’t want people to repeatedly try operations, or to prevent robots.

I will tell you how to use this feature.
If you like it, please press like.

2 Likes
2

  1. Go to the Google reCAPTCHA website.

  2. You must have your own website hosting. If not, please go to neocities.org to register for an account.

  3. Register a new website in (1), as shown in the figure below, select the V2 check box, and enter your domain (2) in the allowed domain.

    圖片
    圖片640×785 113 KB

    to be continued…

1 Like
3

After registration, you will have a key and a secret key. The key is used by the client and the secret key is used by the server.

1 Like
4

This is please go to the website editor.
Create an html file first (this file must be hosted in a domain allowed by (3).
Paste this code.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    <script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <div class="g-recaptcha" data-sitekey="YOUR_KEY" data-theme="light" data-size="normal" data-callback="verifyCallback" data-expired-callback="expired" data-error-callback="error"></div>
    <script>
      var uriIP = 'https://www.cloudflare.com/cdn-cgi/trace';
     
      var uriGAS = ' GOOGLE_APP_SCRIPT_URL';
      
      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)
        });
  
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) {
      	post_thunkable('reCAPTCHA Verified successfully');
      } else {
      	post_thunkable(result['error-codes'][0]);
      }
    })
    .catch(err => {
    	post_thunkable(err);
    })
}
      
      function expired(ex) {
        post_thunkable('reCAPTCHA Verification program expired');
      }
      
      function error(err) {
        post_thunkable('reCAPTCHA verification failed');
      }
    </script>
    <script>
    function post_thunkable(text){
    ThunkableWebviewerExtension.postMessage(text);
    }
    </script>
  </body>
</html>

Please change YOUR_KEY to your key first.
You can change it after google ap script url. The client is roughly complete.

1 Like
5

Please open script.google.com.
Create a new project and rename it.
Paste the following code in the code.gs:

function doPost(e) {

  var params = e.parameter;
  var token = params.token; 
  var ip = params.ip; 
  
  var uri = 'https://www.google.com/recaptcha/api/siteverify';
  var data = {
    secret: 'YOUR_SECRET'_KEY,
    response: token, 
    remoteip: ip
  }
  
  var option = {
    method: 'post',
    payload: data
  };
  
  var response = UrlFetchApp.fetch(uri, option);
  return ContentService.createTextOutput(response).setMimeType(ContentService.MimeType.JSON);
  
}

Please fill in the secret key.
Then deployed as a web application, accessors: everyone
After the completion, there will be a URL, please copy and paste it in the html just now.

1 Like
6

Finally, publish the webpage and fill in the webview.
To obtain status data, please use the “When a message is received” program block.

1 Like
7

https://x.thunkable.com/projectPage/61840899666017001033b0cf

This is a demonstration, please use the URL in it directly and use your own to improve user privacy.

1 Like