Blazor Server应用集成YouTubeService时Google Web授权出现redirect_uri_mismatch错误的解决咨询

嗨，我来帮你搞定这个redirect_uri_mismatch的问题，这在Blazor Server集成Google OAuth的时候确实是个常见的坑，咱们一步步来梳理解决办法：

首先，搞懂问题根源 #

你现在用的LocalServerCodeReceiver是Google OAuth SDK为桌面/控制台应用设计的，它会在本地随机开一个临时端口来接收授权回调，但你在Google Cloud控制台只配置了https://localhost:5001，这就导致回调地址不匹配，直接抛出400错误。Blazor Server是服务器端Web应用，得用适合Web场景的授权流程才行。

解决步骤拆解 #

1. 修正Google Cloud控制台的重定向URI配置

你需要添加一个固定的回调地址到Google Cloud的“Authorised redirect URIs”里，比如：

• 用Razor页面做回调：https://localhost:5001/OAuthCallback
• 用API端点做回调：https://localhost:5001/api/youtube/callback

注意：一定要和你后续代码里设置的回调地址完全一致，包括HTTP/HTTPS、端口、路径，不能有任何差异。

2. 不需要专门的Blazor组件页面，用Razor页面/API端点就行

Blazor组件是交互式的，不适合做OAuth回调（因为回调是Google直接发起的HTTP请求，不需要Blazor的SignalR连接）。你只需要创建一个简单的Razor页面或者API控制器来处理回调请求：

• 比如新建一个Pages/OAuthCallback.cshtml页面，用来接收Google返回的授权码，然后完成令牌交换流程。

3. 修改你的YouTubeApiService代码，适配Web应用流程

放弃GoogleWebAuthorizationBroker（它不适合Web场景），改用手动的授权码流程，大致步骤如下：
首先，生成授权URL让用户跳转：

public string GetAuthorizationUrl()
{
    var flow = new GoogleAuthorizationCodeFlow(new GoogleAuthorizationCodeFlow.Initializer
    {
        ClientSecrets = _clientSecrets,
        Scopes = Scopes,
        DataStore = new FileDataStore("YouTubeOAuthToken")
    });

    return flow.CreateAuthorizationCodeRequest("https://localhost:5001/OAuthCallback").Build();
}

然后，在回调页面的后台代码（比如OAuthCallback.cshtml.cs）里处理授权码交换：

public async Task<IActionResult> OnGetAsync(string code)
{
    var flow = new GoogleAuthorizationCodeFlow(new GoogleAuthorizationCodeFlow.Initializer
    {
        ClientSecrets = new ClientSecrets
        {
            ClientId = Configuration["YourClientId"],
            ClientSecret = Configuration["YourClientSecret"]
        },
        Scopes = new[] { YouTubeService.Scope.YoutubeReadonly },
        DataStore = new FileDataStore("YouTubeOAuthToken")
    });

    var token = await flow.ExchangeCodeForTokenAsync("user", code, "https://localhost:5001/OAuthCallback", CancellationToken.None);
    
    // 这里可以把令牌存储起来，后续用来初始化YouTubeService
    return RedirectToPage("/Index"); // 跳回你的Blazor页面
}

最后，在你的Blazor组件里，调用GetAuthorizationUrl()生成链接，让用户点击跳转授权，授权完成后回到回调页面处理令牌，再初始化YouTubeService。

4. 代码里的小错误要修正

你的代码里有个笔误：onfiguration["xxxxxxxx"]少了个字母c，应该是configuration["xxxxxxxx"]，这个小问题也可能导致认证失败哦。

额外提醒 #

• 如果你坚持要用GoogleWebAuthorizationBroker（不推荐），那你得把LocalServerCodeReceiver默认的回调地址（比如http://localhost:8080/）加到Google Cloud的重定向URI里，但这种方式在生产环境没法用，因为端口是随机的，所以还是建议用固定回调地址的Web流程。
• 生产环境部署时，记得把实际的域名地址（比如https://yourdomain.com/OAuthCallback）加到Google Cloud的重定向URI里，替换本地的localhost地址。

备注：内容来源于stack exchange，提问作者Jim