Blazor 怎么集成 Google 登录

来源:这里教程网 时间:2026-02-21 17:33:18 作者:

Blazor 集成 Google 登录,关键看项目类型:是 WebAssembly(WASM)独立/托管,还是 Server(服务端)。两者实现路径不同,不能混用。下面分两类说清楚,不绕弯、不堆术语。

Blazor WebAssembly(推荐独立模式)

这是最常见也最轻量的集成方式,前端直接与 Google OAuth 交互,无需自己搭后端认证逻辑。

安装认证包:
Microsoft.AspNetCore.Components.WebAssembly.Authentication
wwwroot/index.html
blazor.webassembly.js
上方加一行:
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
_Imports.razor
加两行:
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Authorization
配置 Google 客户端 ID:在
Program.cs
中调用
AddOidcAuthentication
,填入 Google 提供的
ClientId
Authority
(通常是
https://accounts.google.com
确保 Google Cloud Console 里已启用 OAuth 2.0,添加授权回调地址:
https://localhost:7070/authentication/login-callback
(开发时)或你的正式域名对应地址

Blazor Server(需 ASP.NET Core 后端支持)

登录流程由服务器发起和接收回调,更可控,适合已有用户系统或需要服务端会话管理的场景。

Program.cs
(.NET 6+)中注册 Google 认证中间件:
builder.Services.AddAuthentication().AddGoogle(options => { options.ClientId = "..."; options.ClientSecret = "..."; });
确保
app.UseAuthentication()
app.UseAuthorization()
在管道中正确启用
在 Blazor 页面顶部加
@attribute [Authorize]
控制访问权限
登录入口可复用标准 MVC 的
/Account/Login
,或自定义一个跳转按钮指向
/Identity/Account/Login
(若用了 Identity UI)
注意:Google 要求回调地址必须是 HTTPS(开发时 localhost 可例外),且需在 Google Cloud Console 明确配置

通用注意事项

不管哪种方式,都绕不开 Google Cloud 控制台设置:

创建新项目 → 启用 Google+ API(已弃用)或 Google Identity Services(新版) 进入“凭据”→“OAuth 客户端 ID”→选择“Web 应用”类型 授权重定向 URI 必须精确匹配:WASM 用
/authentication/login-callback
,Server 用
/signin-google
或你配置的 endpoint
避免在客户端 ID 中硬编码密钥;生产环境建议用
UserSecrets
或 Azure Key Vault 管理

基本上就这些。WASM 方式开箱即用,Server 方式更稳但要多写几行服务端代码。选哪个,取决于你是否需要服务端参与鉴权、审计或整合已有 Identity 系统。

相关推荐