ASP.NET 4.5应用Google OAuth登录成功后弹窗未跳转至返回URL求助

问题分析 #

1. 点击事件语法错误：点击事件JS代码将CSS选择器错误嵌入<script>标签内，导致事件绑定失效。
2. Popup模式参数误用：data-ux_mode="popup"模式下，data-login_uri参数不生效（该参数仅适用于redirect模式），需改用回调函数处理登录结果。
3. Token获取逻辑偏差：getAccessToken函数仅在按钮点击时检查当前页面hash，但Popup登录成功后结果返回至弹窗窗口，主页面无法触发该函数获取Token。
4. URL格式错误：signupExternalUser中的跳转URL缺少?分隔路径与参数，导致请求无效。

修复步骤 #

1. 修正点击事件代码 #

移除错误的CSS选择器语法，正确绑定点击事件：

<script type="text/javascript">
document.getElementById("google-signin-button").addEventListener("click", getAccessToken);
</script>

2. 调整Google OAuth按钮配置，使用Popup回调 #

替换data-login_uri为data-callback指定登录成功后的回调函数，同时修正脚本嵌套错误：

<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
     data-client_id="MyClientid"
     data-context="signin"
     data-ux_mode="popup"
     data-callback="handleGoogleLogin"
     data-auto_select="true"
     data-itp_support="true">
</div>
<div class="g_id_signin" id="google-signin-button"
     data-type="standard"
     data-shape="rectangular"
     data-theme="outline"
     data-text="signin_with"
     data-size="large"
     data-logo_alignment="left">
</div>
<script src="GoogleAuthentication.js" defer></script>

3. 重写Token处理逻辑 #

修改GoogleAuthentication.js，添加Google官方回调函数，调整Token获取与跳转逻辑：

// Google登录成功回调函数，自动接收弹窗返回的凭证
function handleGoogleLogin(response) {
    if (response.credential) {
        // 将Google ID Token发送到后端验证，换取应用自身AccessToken
        verifyGoogleToken(response.credential);
    }
}

function verifyGoogleToken(idToken) {
    $.ajax({
        url: '/api/Account/VerifyGoogleToken',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ idToken: idToken }),
        success: function (response) {
            if (response.accessToken) {
                isUserRegistered(response.accessToken);
            }
        }
    });
}

function isUserRegistered(accessToken) {
    $.ajax({
        url: '/api/Account/UserInfo',
        method: 'GET',
        headers: {
            'Authorization': 'Bearer ' + accessToken
        },
        success: function (response) {
            if (response.HasRegistered) {
                localStorage.setItem('accessToken', accessToken);
                localStorage.setItem('userName', response.Email);
                // 跳转至指定页面
                window.location.href = "Data.html";
            } else {
                signupExternalUser(accessToken);
            }
        }
    });
}

function signupExternalUser(accessToken) {
    $.ajax({
        url: '/api/Account/RegisterExternal',
        method: 'POST',
        headers: {
            'Authorization': 'Bearer ' + accessToken
        },
        success: function () {
            // 修正URL参数分隔符，添加?
            window.location.href = "/api/Account/ExternalLogin?provider=Google&response_type=token&client_id=self&redirect_uri=http%3a%2f%2flocalhost%3a61358%2fLogin.aspx&state=GerGr5JlYx4t_KpsK57GFSxVueteyBunu02xJTak5m01";
        }
    });
}

4. 后端补充Token验证接口 #

在AccountController中添加Google ID Token验证接口（需先安装Google.Apis.Auth包）：

[HttpPost]
[Route("VerifyGoogleToken")]
public async Task<IHttpActionResult> VerifyGoogleToken(string idToken)
{
    var validationSettings = new GoogleJsonWebSignature.ValidationSettings
    {
        Audience = new List<string> { "你的Google Client ID" }
    };

    try
    {
        var payload = await GoogleJsonWebSignature.ValidateAsync(idToken, validationSettings);
        // 验证成功后生成应用自身AccessToken
        var accessToken = GenerateAppAccessToken(payload.Email);
        return Ok(new { accessToken = accessToken });
    }
    catch
    {
        return BadRequest("无效的Google登录凭证");
    }
}

关键注意事项 #

• Popup模式必须使用data-callback，否则弹窗登录成功后主页面无法接收结果。
• 始终通过后端验证Google Token，避免前端直接处理敏感信息。
• 确保前后端使用的Google Client ID完全一致。

内容的提问来源于stack exchange，提问作者Anand M