Google 数据 API 授权重定向 URI 不匹配

Posted 2023-02-24

【中文标题】Google 数据 API 授权重定向 URI 不匹配

【英文标题】：Google Data API Authorization Redirect URI Mismatch

【发布时间】：2017-11-28 02:27:42

【问题描述】：

背景

我想在 .NET Core 1.1 中编写一个小型的个人 Web 应用程序来与 YouTube 交互并使一些事情对我来说更容易做，我正在关注Google's YouTube documentation 中的教程/示例。听起来很简单，对吧？ ;)

使用 Google 的 API 进行身份验证似乎是不可能的！我做了以下事情：

在 Google Developer Console 中创建了一个帐户 在 Google Developer Console 中创建了一个新项目 创建了一个 Web 应用程序 OAuth 客户端 ID，并将我的 Web 应用程序调试 URI 添加到已批准的重定向 URI 列表中 将生成 OAuth 客户端 ID 后提供的 json 文件保存到我的系统中 在我的应用程序中，我的调试服务器 url 已设置（当我的应用程序在调试中启动时，它使用我设置的 url，即 http://127.0.0.1:60077）。

但是，当我尝试使用 Google 的 API 进行身份验证时，我收到以下错误：

这是一个错误。

错误：redirect_uri_mismatch

请求中的重定向URI，http://127.0.0.1:63354/authorize/， 与 OAuth 客户端授权的不匹配。

问题

所以现在，解决问题。在寻找解决方案时，我唯一能找到的就是那些说

只需将重定向 URI 放入您批准的重定向 URI 中

不幸的是，问题是每次我的代码尝试使用 Google 的 API 进行身份验证时，它使用的重定向 URI 都会发生变化（即使我在项目属性中设置了静态端口，端口也会发生变化）。我似乎找不到让它使用静态端口的方法。任何帮助或信息都会很棒！

注意：请不要说诸如“你为什么不这样做根本无法回答你的问题”之类的话。

代码

client_id.json

    "web": 
        "client_id": "[MY_CLIENT_ID]",
        "project_id": "[MY_PROJECT_ID]",
        "auth_uri": "https://accounts.google.com/o/oauth2/auth",
        "token_uri": "https://accounts.google.com/o/oauth2/token",
        "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
        "client_secret": "[MY_CLIENT_SECRET]",
        "redirect_uris": [
            "http://127.0.0.1:60077/authorize/"
        ]
    

正在尝试使用 API 的方法

public async Task<IActionResult> Test()

    string ClientIdPath = @"C:\Path\To\My\client_id.json";
    UserCredential credential;

    using (var stream = new FileStream(ClientIdPath, FileMode.Open, FileAccess.Read))
    
        credential = await GoogleWebAuthorizationBroker.AuthorizeAsync(
            GoogleClientSecrets.Load(stream).Secrets,
            new[]  YouTubeService.Scope.YoutubeReadonly ,
            "user",
            CancellationToken.None,
            new FileDataStore(this.GetType().ToString())
        );
    

    var youtubeService = new YouTubeService(new BaseClientService.Initializer()
    
        HttpClientInitializer = credential,
        ApplicationName = this.GetType().ToString()
    );

    var channelsListRequest = youtubeService.Channels.List("contentDetails");
    channelsListRequest.Mine = true;

    // Retrieve the contentDetails part of the channel resource for the authenticated user's channel.
    var channelsListResponse = await channelsListRequest.ExecuteAsync();

    return Ok(channelsListResponse);

项目属性

【参考方案1】：

我已经在 .net Core 应用程序中为这个问题苦苦挣扎了好几个小时。最终为我解决的问题是，在 Google 开发人员控制台中，为“桌面应用程序”而不是“Web 应用程序”创建和使用凭据。

【参考方案2】：

我注意到有一种简单的非编程方式。

如果您有典型的 MS 惯例构建的典型单体应用程序（因此与 12factor 和典型 DDD 不兼容），则可以选择告诉您的代理 WWW 服务器将所有请求从 HTTP 重写为 HTTPS，即使您已经设置了 Web http://localhost:5000 上的应用程序，然后添加到 Google API url 中，例如：http://your.domain.net/sigin-google，它将完美运行，它不是那么简单，因为设置主 WWW 以将所有内容重写为 HTTPS 更安全。

我猜这不是很好的做法，但它很有意义并且可以完成工作。

【讨论】：

mylive.stagingapplication.com 以 https 开头，但随后给出 400 错误，当更改为 http 时，它无法处理 ExternalLoginCallback 并给出 500 错误。它与localhost:4220/signin-google 完美配合，但提供了我的实时网址

【参考方案3】：

原始答案有效，但它不是为 ASP.NET Web 应用程序执行此操作的最佳方法。有关处理 ASP.NET Web 应用程序流的更好方法，请参阅下面的更新。

---

原答案

所以，我想通了。问题在于 Google 将 Web 应用程序视为基于 javascript 的 Web 应用程序，而不是具有服务器端处理功能的 Web 应用程序。因此，您不能在 Google Developer Console 中为基于服务器的 Web 应用程序创建 Web 应用程序 OAuth 客户端 ID。

解决方法是在Google Developer Console中创建OAuth Client ID时选择Other类型。这将使 Google 将其视为已安装的应用程序而不是 JavaScript 应用程序，因此不需要重定向 URI 来处理回调。

这有点令人困惑，因为 Google 的 .NET 文档告诉您创建 Web App OAuth 客户端 ID。

---

2018 年 2 月 16 日更新了更好的答案：

我想提供对此答案的更新。虽然，我上面所说的有效，但这并不是为 ASP.NET 解决方案实现 OAuth 工作流的最佳方式。有一种更好的方法可以实际使用适当的 OAuth 2.0 流程。 Google 的文档在这方面很糟糕（尤其是对于 .NET），所以我将在这里提供一个简单的实现示例。该示例使用 ASP.NET 核心，但它很容易适应完整的 .NET 框架:)

注意：Google 确实有一个 Google.Apis.Auth.MVC 包来帮助简化此 OAuth 2.0 流程，但不幸的是，它与特定的 MVC 实现耦合，不适用于 ASP.NET Core或 Web API。所以，我不会使用它。我将给出的示例适用于所有 ASP.NET 应用程序。相同的代码流可用于您启用的任何 Google API，因为它取决于您请求的范围。

另外，我假设您已在 Google 开发者仪表板中设置了您的应用程序。也就是说，您已经创建了一个应用程序，启用了必要的 YouTube API，创建了一个 Web 应用程序客户端，并正确设置了您允许的重定向 url。

流程将像这样工作：

用户点击按钮（例如添加 YouTube） View调用Controller上的方法获取授权URL 在控制器方法中，我们要求 Google 根据我们的客户端凭据（在 Google Developer Dashboard 中创建的凭据）向我们提供授权 URL，并向 Google 提供我们应用程序的重定向 URL（此重定向 URL 必须在您的您的 Google 应用程序接受的重定向 URL 列表） Google 将授权 URL 返还给我们 我们将用户重定向到该授权 URL 用户授予我们的应用程序访问权限 Google 使用我们根据请求提供给 Google 的重定向 URL 向我们的应用程序返回一个特殊的访问代码 我们使用该访问代码为用户获取 Oauth 令牌 我们为用户保存 Oauth 令牌

您需要以下 NuGet 包

Google.Apis Google.Apis.Auth Google.Apis.Core Google.apis.YouTube.v3

模型

public class ExampleModel

    public bool UserHasYoutubeToken  get; set; 

控制者

public class ExampleController : Controller

    // I'm assuming you have some sort of service that can read users from and update users to your database
    private IUserService userService;

    public ExampleController(IUserService userService)
    
        this.userService = userService;
    

    public async Task<IActionResult> Index()
    
        var userId = // Get your user's ID however you get it

        // I'm assuming you have some way of knowing if a user has an access token for YouTube or not
        var userHasToken = this.userService.UserHasYoutubeToken(userId);

        var model = new ExampleModel  UserHasYoutubeToken = userHasToken 
        return View(model);
    

    // This is a method we'll use to obtain the authorization code flow
    private AuthorizationCodeFlow GetGoogleAuthorizationCodeFlow(params string[] scopes)
    
        var clientIdPath = @"C:\Path\To\My\client_id.json";
        using (var fileStream = new FileStream(clientIdPath, FileMode.Open, FileAccess.Read))
        
            var clientSecrets = GoogleClientSecrets.Load(stream).Secrets;
            var initializer = new GoogleAuthorizationCodeFlow.Initializer  ClientSecrets = clientSecrets, Scopes = scopes ;
            var googleAuthorizationCodeFlow = new GoogleAuthorizationCodeFlow(initializer);

            return googleAuthorizationCodeFlow;
        
    

    // This is a route that your View will call (we'll call it using JQuery)
    [HttpPost]
    public async Task<string> GetAuthorizationUrl()
    
        // First, we need to build a redirect url that Google will use to redirect back to the application after the user grants access
        var protocol = Request.IsHttps ? "https" : "http";
        var redirectUrl = $"protocol://Request.Host/Url.Action(nameof(this.GetYoutubeAuthenticationToken)).TrimStart('/')";

        // Next, let's define the scopes we'll be accessing. We are requesting YouTubeForceSsl so we can manage a user's YouTube account.
        var scopes = new[]  YouTubeService.Scope.YoutubeForceSsl ;

        // Now, let's grab the AuthorizationCodeFlow that will generate a unique authorization URL to redirect our user to
        var googleAuthorizationCodeFlow = this.GetGoogleAuthorizationCodeFlow(scopes);
        var codeRequestUrl = googleAuthorizationCodeFlow.CreateAuthorizationCodeRequest(redirectUrl);
        codeRequestUrl.ResponseType = "code";

        // Build the url
        var authorizationUrl = codeRequestUrl.Build();

        // Give it back to our caller for the redirect
        return authorizationUrl;
    

    public async Task<IActionResult> GetYoutubeAuthenticationToken([FromQuery] string code)
    
        if(string.IsNullOrEmpty(code))
        
            /* 
                This means the user canceled and did not grant us access. In this case, there will be a query parameter
                on the request URL called 'error' that will have the error message. You can handle this case however.
                Here, we'll just not do anything, but you should write code to handle this case however your application
                needs to.
            */
        

        // The userId is the ID of the user as it relates to YOUR application (NOT their Youtube Id).
        // This is the User ID that you assigned them whenever they signed up or however you uniquely identify people using your application
        var userId = // Get your user's ID however you do (whether it's on a claim or you have it stored in session or somewhere else)

        // We need to build the same redirect url again. Google uses this for validaiton I think...? Not sure what it's used for
        // at this stage, I just know we need it :)
        var protocol = Request.IsHttps ? "https" : "http";
        var redirectUrl = $"protocol://Request.Host/Url.Action(nameof(this.GetYoutubeAuthenticationToken)).TrimStart('/')";

        // Now, let's ask Youtube for our OAuth token that will let us do awesome things for the user
        var scopes = new[]  YouTubeService.Scope.YoutubeForceSsl ;
        var googleAuthorizationCodeFlow = this.GetYoutubeAuthorizationCodeFlow(scopes);
        var token = await googleAuthorizationCodeFlow.ExchangeCodeForTokenAsync(userId, code, redirectUrl, CancellationToken.None);

        // Now, you need to store this token in rlation to your user. So, however you save your user data, just make sure you
        // save the token for your user. This is the token you'll use to build up the UserCredentials needed to act on behalf
        // of the user.
        var tokenJson = JsonConvert.SerializeObject(token);
        await this.userService.SaveUserToken(userId, tokenJson);

        // Now that we've got access to the user's YouTube account, let's get back
        // to our application :)
        return RedirectToAction(nameof(this.Index));
    

观点

@using YourApplication.Controllers
@model YourApplication.Models.ExampleModel

<div>
    @if(Model.UserHasYoutubeToken)
    
        <p>YAY! We have access to your YouTube account!</p>
    
    else
    
        <button id="addYoutube">Add YouTube</button>
    
</div>

<script>
    $(document).ready(function () 
        var addYoutubeUrl = '@Url.Action(nameof(ExampleController.GetAuthorizationUrl))';

        // When the user clicks the 'Add YouTube' button, we'll call the server
        // to get the Authorization URL Google built for us, then redirect the
        // user to it.
        $('#addYoutube').click(function () 
            $.post(addYoutubeUrl, function (result) 
                if (result) 
                    window.location.href = result;
                
            );
        );
    );
</script>

【讨论】：

当我使用“其他”类型的凭据时，我仍然会被重定向到一个随机端口。运行 django web 服务器。

【参考方案4】：

正如提到的here，您需要为 ASP.NET 开发服务器指定一个修复端口，例如 How to fix a port number in asp.NET development server，并将这个带有修复端口的 url 添加到允许的 url。同样如 thread 中所述，当您的浏览器将用户重定向到 Google 的 oAuth 页面时，您应该将希望 Google 服务器与令牌响应一起返回的重定向 URI 作为参数传递。

【讨论】：

两件事：第一，我的端口是固定的，请看我的属性（截图在我的帖子末尾）。其次，我使用的是 Google 的 Data API，而不是裸机 API 调用，因此，在 OAuth 调用上设置重定向 URI 的不是我，而是 Google 的 API。我宁愿不必将裸机 API 调用和库调用组合在一起。