如何仅使用Ajax和jQuery配置Google OAuth实现登录跳转并获取用户信息

云原生阿岚

2026-9-28

问题根源及修复方案

1. 页面刷新的核心原因

你使用的是ASP.NET服务端按钮<asp:Button>，该控件默认点击会触发表单提交，你绑定的前端点击事件没有阻止默认提交行为，因此跳转逻辑未执行完成页面就被刷新。

2. 跳转Google授权页的代码错误

授权地址协议拼写错误：https//缺少冒号，正确应为https://
回调参数名拼写错误：Google OAuth要求的回调参数名为redirect_uri，你写的redirect_url不生效
缺少必要scope：如果需要获取用户名字，需要额外添加profile scope

3. 初始Ajax方案的错误

Google OAuth2.0授权流程第一步需要前端主动跳转至Google授权页面，不能通过Ajax请求token接口实现，且client_secret属于高敏感凭证，绝对不能暴露在前端代码中，会造成严重的安全风险。后续兑换token的操作必须放在后端服务执行。

修正后的完整代码

前端JS代码

$(document).ready(function () {
    $('.LoginGoogleC').click(function (e) {
        // 阻止ASP.NET按钮默认的表单提交行为
        e.preventDefault();
        var clientID = '0000000-18911.apps.googleusercontent.com';
        var redirectURL = 'https://localhost:44329/LoginAPI.aspx';
        // 修正所有URL和参数错误
        window.location.href = 'https://accounts.google.com/o/oauth2/v2/auth?' +
            'scope=openid%20email%20profile' +
            '&response_type=code' +
            '&redirect_uri=' + encodeURIComponent(redirectURL) +
            '&client_id=' + clientID;
    }); 
});

可选：按钮属性额外配置

如果不需要按钮触发服务端逻辑，可以直接在按钮标签添加OnClientClick="return false;"，双重防止表单提交：

<asp:button ID="LoginGoogleB" CssClass="LoginGoogleC btn btn-lg center-block" runat="server" 
Text="Login With Google" OnClientClick="return false;" />

后续流程说明

用户授权完成后会跳转回你配置的redirect_uri，地址上会携带code参数，你需要在LoginAPI.aspx的后端代码中，携带client_id、client_secret、code、redirect_uri参数请求Google的token接口兑换凭证，解析返回的id_token即可获取用户名字。

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