Google的reCAPTCHA如何正常访问并使用

今天在写一个登录注册的HTML页面，里面用了Google提供的reCAPTCHA人机验证服务。大家都知道Google的网站和开源代码在内网访问不了。页面代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://www.google.com/recaptcha/enterprise.js" async defer></script>

    <style type="text/css">
        .input,
        select {
            margin: 2rem 0rem;
            height: 2rem;
        }

        .btno {
            height: 3rem;
            width: 4rem;
        }

        .login-btn {
            width: 24rem;
            height: 3rem;
            color: white;
            background-color: purple;
        }

        .form-shadow-size {
            width: 30%;
            margin-left: 35%;
            margin-top: 12%;
        }
    </style>
</head>

<body>
    <div class="shadow p-4 mb-4 bg-white form-shadow-size d-grid" align="center" id="shadow">
        <center><h1><b>登录</b></h1></center>
        <form action="/login" method="post" class="was-validated">
            <div class="form-floating  mb-3 mt-3">
                <input placeholder="请输入" required name="username" class="form-control input"></input>
                <label for="username">用户名:</label>
                <div class="valid-feedback">有效的。</div>
            </div>
            <div class="form-floating  mb-3 mt-3">
                <input placeholder="请输入" required type="password" name="pwd" class="form-control input"></input>
                <label for="password">密码:</label>
                <div class="valid-feedback">有效的。</div>
            </div>
            <center><div class="g-recaptcha" data-sitekey="6LfbDNEmAAAAAMyizoAnogNKViSjlFpzW1eGOboo" data-action="LOGIN"></div></center>
            <!--<div class="form-check">
                    <input class="form-check-input" style="position:relative;left:15px;" type="checkbox" id="remember" name="remember" checked>
                    <label style="position:relative;left:15px;" class="form-check-label">31天内免登录</label>
                </div>-->
            <p style="color:red;text-align:center;">{{error}}</p>
            <button type="submit" class="btn btn-success" style="width:100%">登录</button>
            <hr>
            <a href="/注册" style="text-decoration:none;"><button type="button" class="btn btn-outline-primary"
                    style="width:100%">注册</button></a>
        </form>
    </div>
    <script>
        var userAgent = navigator.userAgent.toLowerCase();
        if (userAgent.includes("mobile") || userAgent.includes("mobi")) {
        // 用户使用的是移动设备（手机）
        console.log("用户使用的是手机");
        var div = document.getElementById("shadow");
        while (div.firstChild) {
        div.parentNode.insertBefore(div.firstChild, div);
        }
        div.parentNode.removeChild(div);
        } else {
        // 用户使用的是电脑
        console.log("用户使用的是电脑");
        }

    </script>
</body>

</html>

但是多数普通用户都是正常访问，这就导致recaptcha复选框元素无法正常加载。
页面效果：

img

正常访问：

img

请问大家怎么正常使用recaptcha的人机验证呢？

https://www.cnblogs.com/echolun/p/12436226.html 这里有一篇文章你可以看看