Skip to content

Instantly share code, notes, and snippets.

@shellj

shellj/error.log

Created April 22, 2020 03:26
Show Gist options
  • Save shellj/afb66de1c6316d2316b4b14c979d271c to your computer and use it in GitHub Desktop.
Save shellj/afb66de1c6316d2316b4b14c979d271c to your computer and use it in GitHub Desktop.
Download ZIP
reCAPTCHA v3 Invalid site key or not loaded in api.js
Raw
error.log
recaptcha__zh_cn.js:534 Uncaught Error: Invalid site key or not loaded in api.js: xxxxxxx
Raw
index.html
<html>
<head>
<title>Hello</title>
</head>
<body>
<h3>hello</h3>
<button onclick='cha()'>go</button>
<script src="https://recaptcha.net/recaptcha/api.js?render=xxxxxxx"></script>
<script>
function cha() {
grecaptcha.execute('xxxxxxx', {action: 'homepage'}).then(function(token) {
console.log('token:' + token);
});
}
</script>
</body>
</html>
@carrzkiss
Copy link

carrzkiss commented Jan 22, 2022 •
edited
Loading

I have resolved the issue.
Go to your Recaptcha page, choose to add a new key, and choose V3
Add in all the domains you will need to test and work on your site.

Example

www.yourdomain.com
localhost
127.0.0.1

Next, add this to the bottom of your page.

    <script type="text/javascript">
        function onClick(e) {
            e.preventDefault();
            grecaptcha.ready(function () {
                grecaptcha.execute('public-sitekey-here', { action: 'submit' }).then(function (token) {
                    // Add your logic to submit to your backend server here.
                        console.log('refreshed token:', token);
                        document.getElementById("token").value = token;
                });
            });
        }
    </script>
    <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=public-sitekey-here"></script>

The above information gets rid of the error.
Just have to get used to not seeing the reCaptcha like we used to.
But, I like this better, as I can work with everything on the server-side of things.

@IljaPHP
Copy link

IljaPHP commented May 20, 2022 •
edited
Loading

Recaptcha script must be connected with public key, like:

<script src="https://www.google.com/recaptcha/api.js?render=XXXXXXXXXXXXX__PUBLIC_KEY_XXXXXXXXX"></script>

In my case, problem was: there was't key in this line, it was like:

<script src="https://www.google.com/recaptcha/api.js?render="></script>

(it was PHP error)

I think, you can get same error if you will use DIFFERENT public keys in the JS script connection and in the recaptcha execute method:

grecaptcha.execute('XXXXXXXXXXXXX__PUBLIC_KEY_XXXXXXXXX', {action: 'homepage'}).then(function (token) { var captchaElems = document.getElementsByClassName('g-recaptcha-response-v3'); for (var i = 0; i < captchaElems.length; i++) { captchaElems[i].value = token; } });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment