如何配置Blazor Server控制器处理带井号的Google OAuth回调参数

问题根源 #

URL中的#（哈希片段）是浏览器端专属内容，浏览器向服务器发送请求时不会将哈希后的参数传递给服务器——这不是配置能把#转成?的问题，是HTTP协议的固有机制。

你当前使用的是隐式授权流（Implicit Flow）（response_type=token），这种流程本来就是为纯前端JavaScript应用设计的，并不适合服务器端主导的Blazor Server场景。

推荐解决方案：改用授权码流（Authorization Code Flow） #

这是Google官方推荐给服务器端应用的安全授权流程，既能避免令牌暴露风险，还能获取refresh_token用于令牌自动刷新，完全匹配你的日历长期同步需求。

步骤1：修改授权URL #

将response_type从token改为code，其余参数保持不变：

https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/calendar&include_granted_scopes=true&response_type=code&state=12345&redirect_uri=https%3A//localhost:7115/api/gauth&client_id=test.apps.googleusercontent.com

步骤2：修改控制器代码接收授权码并交换令牌 #

控制器收到code后，向Google令牌端点发送POST请求，换取access_token和refresh_token：

[Route("api")]
[ApiController]
public class GoogleScopeAuth : ControllerBase
{
    private readonly IHttpClientFactory _httpClientFactory;

    public GoogleScopeAuth(IHttpClientFactory httpClientFactory)
    {
        _httpClientFactory = httpClientFactory;
    }

    [HttpGet("gauth")]
    public async Task<ActionResult> Get(string code, string state)
    {
        // 验证state参数，防止CSRF攻击（需与授权时发送的state一致）
        if (state != "12345")
        {
            return BadRequest("无效的state参数");
        }

        var client = _httpClientFactory.CreateClient();
        var tokenRequest = new FormUrlEncodedContent(new Dictionary<string, string>
        {
            ["code"] = code,
            ["client_id"] = "test.apps.googleusercontent.com",
            ["client_secret"] = "你的ClientSecret（从Google Cloud Console获取）",
            ["redirect_uri"] = "https://localhost:7115/api/gauth",
            ["grant_type"] = "authorization_code"
        });

        var response = await client.PostAsync("https://oauth2.googleapis.com/token", tokenRequest);
        if (response.IsSuccessStatusCode)
        {
            var tokenData = await response.Content.ReadFromJsonAsync<TokenResponse>();
            // 将access_token、refresh_token等保存到数据库或会话中，用于后续日历同步
            Console.WriteLine(tokenData.AccessToken);
            Console.WriteLine(tokenData.RefreshToken);
            Console.WriteLine(tokenData.ExpiresIn);

            // 跳转到Blazor页面继续日历同步流程
            return RedirectToPage("/CalendarSync");
        }

        return BadRequest("令牌交换失败");
    }

    // 用于反序列化令牌响应的模型类
    private class TokenResponse
    {
        [JsonPropertyName("access_token")]
        public string AccessToken { get; set; }

        [JsonPropertyName("token_type")]
        public string TokenType { get; set; }

        [JsonPropertyName("expires_in")]
        public int ExpiresIn { get; set; }

        [JsonPropertyName("refresh_token")]
        public string RefreshToken { get; set; }
    }
}

临时方案：继续使用隐式流（不推荐） #

如果必须沿用隐式流，需要通过前端JavaScript解析哈希参数后再传递给控制器：

步骤1：创建静态回调页面 #

在wwwroot目录下创建gauth-callback.html：

<!DOCTYPE html>
<html>
<body>
    <script>
        // 解析哈希中的参数
        const hashParams = new URLSearchParams(window.location.hash.slice(1));
        const params = new URLSearchParams();
        hashParams.forEach((value, key) => params.append(key, value));

        // 跳转到控制器，将参数转为查询字符串
        window.location.href = `/api/gauth?${params.toString()}`;
    </script>
</body>
</html>

步骤2：修改授权URL的redirect_uri #

将redirect_uri改为静态页面地址：

https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/calendar&include_granted_scopes=true&response_type=token&state=12345&redirect_uri=https%3A//localhost:7115/gauth-callback.html&client_id=test.apps.googleusercontent.com

关键注意事项 #

• 安全性：隐式流的access_token会暴露在URL和浏览器历史中，存在泄露风险，强烈建议使用授权码流。
• Google Cloud Console配置：必须在控制台的OAuth 2.0客户端ID设置中，将所有用到的redirect_uri（控制器地址或静态页面地址）添加到授权列表，否则会回调失败。
• CSRF防护：务必验证state参数，确保回调的state和授权时发送的一致，防止跨站请求伪造攻击。
• 令牌刷新：授权码流获取的refresh_token可以在access_token过期时，无需用户重新授权就能刷新令牌，适合长期同步日历的需求。
• Calendar API调用：获取access_token后，调用API时需要在请求头中添加Authorization: Bearer {access_token}。

相关文档翻译（原Google隐式流文档核心内容） #

Google OAuth 2.0隐式授权流专为浏览器中运行的JavaScript应用设计，它直接将access_token通过URL哈希片段返回给前端，无需服务器端中转交换令牌。该流程不提供refresh_token，且access_token会暴露在浏览器环境中，因此仅适用于可信任的前端应用，且令牌有效期较短。

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