基于CDN的Vue.js SPA对接.NET6 API实现Google登录方案咨询

核心思路 #

绝对不要直接把Google ID/邮箱传给后端（完全无安全保障，极易伪造），正确流程是：前端通过Google登录获取ID Token（Google签发的加密凭证），后端验证该Token的合法性后，提取用户信息，再生成应用自身的身份凭证（比如JWT）供后续API请求使用。

前端（CDN Vue）实现步骤 #

1. 引入Google Sign-In SDK
   在SPA的index.html中直接引入官方SDK：

<script src="https://accounts.google.com/gsi/client" async defer></script>

2. 在Vue组件中实现登录逻辑
   以登录页面组件为例，初始化Google登录按钮并处理回调：

new Vue({
  el: '#app',
  data() {
    return {
      googleClientId: '你的Google OAuth客户端ID'
    }
  },
  mounted() {
    // 初始化Google登录配置
    window.google.accounts.id.initialize({
      client_id: this.googleClientId,
      callback: this.handleGoogleLogin
    });
    // 渲染登录按钮
    window.google.accounts.id.renderButton(
      document.getElementById('google-login-btn'),
      { theme: 'outline', size: 'large' }
    );
  },
  methods: {
    async handleGoogleLogin(response) {
      // 获取Google返回的ID Token
      const idToken = response.credential;
      try {
        // 将ID Token传给后端登录接口
        const res = await fetch('/api/auth/google-login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ idToken })
        });
        const data = await res.json();
        // 保存后端返回的JWT到本地存储
        localStorage.setItem('appToken', data.accessToken);
        // 跳转至登录后页面
        window.location.href = '/dashboard';
      } catch (err) {
        console.error('登录失败:', err);
      }
    }
  }
});

后端（.NET 6 API）实现步骤 #

1. 安装Google身份验证包
   在项目中安装Google.Apis.Auth NuGet包：

Install-Package Google.Apis.Auth

2. 配置客户端ID与JWT参数
   在appsettings.json中添加配置：

"Authentication": {
  "Google": {
    "ClientId": "你的Google OAuth客户端ID"
  }
},
"Jwt": {
  "Key": "强随机字符串（用于签名JWT）",
  "Issuer": "你的API域名",
  "Audience": "你的SPA域名"
}

3. 实现Google登录验证接口
   创建Auth控制器处理前端请求：

using Google.Apis.Auth;
using Microsoft.AspNetCore.Mvc;
using Microsoft.IdentityModel.Tokens;
using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;

[ApiController]
[Route("api/auth")]
public class AuthController : ControllerBase
{
    private readonly IConfiguration _config;

    public AuthController(IConfiguration config)
    {
        _config = config;
    }

    [HttpPost("google-login")]
    public async Task<IActionResult> GoogleLogin([FromBody] GoogleLoginRequest request)
    {
        try
        {
            // 验证Google ID Token的合法性
            var validationSettings = new GoogleJsonWebSignature.ValidationSettings
            {
                Audience = new List<string> { _config["Authentication:Google:ClientId"] }
            };
            var payload = await GoogleJsonWebSignature.ValidateAsync(request.IdToken, validationSettings);

            // 提取用户核心信息
            var userId = payload.Subject;
            var email = payload.Email;

            // 生成应用自身的JWT
            var claims = new List<Claim>
            {
                new Claim(ClaimTypes.NameIdentifier, userId),
                new Claim(ClaimTypes.Email, email)
            };
            var key = new SymmetricSecurityKey(System.Text.Encoding.UTF8.GetBytes(_config["Jwt:Key"]));
            var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);
            var token = new JwtSecurityToken(
                issuer: _config["Jwt:Issuer"],
                audience: _config["Jwt:Audience"],
                claims: claims,
                expires: DateTime.Now.AddDays(7),
                signingCredentials: creds
            );

            return Ok(new { accessToken = new JwtSecurityTokenHandler().WriteToken(token) });
        }
        catch (InvalidJwtException)
        {
            return Unauthorized("无效的Google身份凭证");
        }
        catch (Exception ex)
        {
            return BadRequest($"登录失败: {ex.Message}");
        }
    }
}

// 请求模型定义
public class GoogleLoginRequest
{
    public string IdToken { get; set; }
}

4. 配置JWT身份验证中间件
   在Program.cs中添加身份验证与授权逻辑：

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidateAudience = true,
            ValidateLifetime = true,
            ValidateIssuerSigningKey = true,
            ValidIssuer = builder.Configuration["Jwt:Issuer"],
            ValidAudience = builder.Configuration["Jwt:Audience"],
            IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(builder.Configuration["Jwt:Key"]))
        };
    });

// 启用身份验证与授权中间件
app.UseAuthentication();
app.UseAuthorization();

关键安全注意事项 #

• 禁止裸传用户信息：直接传递Google ID/邮箱无法验证真实性，必须使用Google签发的ID Token做身份校验。
• 正确配置Google OAuth客户端：在Google Cloud控制台创建客户端ID时，务必将SPA域名添加到「JavaScript来源」列表，防止非法域名滥用。
• JWT密钥保密：Jwt:Key需使用强随机字符串，且绝对不能提交到公共代码仓库。
• 合理设置Token有效期：示例中Token有效期为7天，可根据业务需求调整，也可添加刷新Token机制优化用户体验。

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