自定义登录页使用Auth0 SDK无法实现Google账号登录问题求助

故障排查步骤 #

你提供的前端初始化代码无语法问题，Google登录失效优先排查后台配置类问题，按以下顺序核对即可：

• 确认Auth0后台「Authentication > Social」页面已经开启google-oauth2连接，且该连接已关联到你当前使用的应用，未开启邮箱域名白名单限制
• 核对当前应用的「Allowed Callback URLs」配置，已包含Google登录后跳转的回调地址，和代码中config.callbackURL取值完全一致，域名、端口、路径、协议头均无差异
• 检查Google Cloud后台对应OAuth 2.0客户端ID配置：「已获授权的JavaScript来源」已添加你的Auth0租户域名，「已获授权的重定向URI」已添加Auth0的Google回调地址，格式为https://<你的Auth0租户域名>/login/callback
• 可在loginWithGoogle方法内打印webAuth实例参数，确认clientID、domain取值和后台应用配置完全匹配
• 查看浏览器控制台报错，若返回invalid connection类错误，直接核对后台Google连接的开关状态和关联应用配置

参考格式化代码 #

<script src="https://cdn.auth0.com/js/auth0/9.16/auth0.min.js"></script>
<script>
    var config = JSON.parse(decodeURIComponent(escape(window.atob("@@config@@"))));

    var params = Object.assign(
        {
            overrides: {
            __tenant: config.auth0Tenant,
            __token_issuer: config.authorizationServer.issuer,
            },
            domain: config.auth0Domain,
            clientID: config.clientID,
            redirectUri: config.callbackURL,
            responseType: "code",
        },
        config.internalOptions
    );

    var webAuth = new auth0.WebAuth(params);
    var databaseConnection = "Username-Password-Authentication";
    var captcha = webAuth.renderCaptcha(
        document.querySelector(".captcha-container")
    );

    function loginWithGoogle() {
        webAuth.authorize(
            {
                connection: "google-oauth2",
            },
            function (err) {
                if (err) displayError(err, loginErrorContainer);
            }
        );
    }
</script>

内容的提问来源于stack exchange，提问作者Tahseen Basharat