Blazor 怎么集成 Google 登录_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-12-14

浏览次数：次

Blazor集成Google登录分WebAssembly和Server两类：WASM独立模式前端直连OAuth，需引入认证包、配置ClientId及回调地址；Server模式依赖后端中间件，需注册AddGoogle并启用UseAuthentication/UseAuthorization。

blazor 怎么集成 google 登录

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

这是最常见也最轻量的集成方式，前端直接与 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（开发时）或你的正式域名对应地址

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

Glarity

Glarity是一款免费开源的AI浏览器扩展，提供YouTube视频总结、网页摘要、写作工具等功能，支持免费的镜像翻译，电子邮件写作辅助，AI问答等功能。

131 查看详情 Glarity

在 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 系统。

以上就是Blazor 怎么集成 Google 登录的详细内容，更多请关注其它相关文章！