时间戳

首页 > 解决方案 > 使用 Net Core 2.1 和 Angular 2 创建使用 Google 登录选项时出现问题

angular - 使用 Net Core 2.1 和 Angular 2 创建使用 Google 登录选项时出现问题

问题描述

我有以下堆栈 - Angular 2、Net Core 2.1 并且正在使用 Identity。我想添加用于 Google 身份验证的选项，并发现使用客户端 gapi 库的一些限制 - 如果不允许 3rd 方 cookie，主要的限制是不行。

这导致我尝试在服务器端实现 Google 身份验证。从 Angular 向我的 externallogin 端点发起一个 http 请求会导致 CORS 问题，如此处和此处所示。我可以通过直接使用我的 externallogin 端点或使用 Angular 使用 document.location.href 成功地通过 Google 进行身份验证。使用 document.location.href 似乎是错误的实现方式。我使用 Net Core 和 Angular 已经有一段时间了，但这个让我很难过。是否有有效的方法来实现这一点，或者我是否将自己设计成一个黑暗的角落并被迫使用 document.location.href？

  1. 我已经在 Google API 控制台上正确设置了 Authorized Javascript Origin 和 Authorized redirect URIs。
  2. 我在服务器上正确设置了 COR
  3. Angular 和 Net Core（前端和后端）位于同一台服务器上。

当请求来自 Angular http get 请求时，我不确定如何或是否可以在后端的身份验证挑战后正确处理重定向。

标签： angularasp.net-coregoogle-authentication

解决方案

您正在寻找 OAuth2 规范的授权代码授予流程

看看这部分规范

 +----------+
 | Resource |
 |   Owner  |
 |          |
 +----------+
      ^
      |
     (B)
 +----|-----+          Client Identifier      +---------------+
 |         -+----(A)-- & Redirection URI ---->|               |
 |  User-   |                                 | Authorization |
 |  Agent  -+----(B)-- User authenticates --->|     Server    |
 |          |                                 |               |
 |         -+----(C)-- Authorization Code ---<|               |
 +-|----|---+                                 +---------------+
   |    |                                         ^      v
  (A)  (C)                                        |      |
   |    |                                         |      |
   ^    v                                         |      |
 +---------+                                      |      |
 |         |>---(D)-- Authorization Code ---------'      |
 |  Client |          & Redirection URI                  |
 |         |                                             |
 |         |<---(E)----- Access Token -------------------'
 +---------+       (w/ Optional Refresh Token)

以下是合乎逻辑的步骤

  1. 将用户重定向到 Google 页面以进行身份​​验证，并将重定向 url 返回到您的应用程序。(A & B)

这是你需要注意的地方。

  1. 成功验证后，它会将您重定向回您的应用，并提供步骤 C 中显示的授权代码

现在您要处理来自 Google 身份验证的重定向，在显示您的 Angular 应用程序之前，您向 Google 身份验证服务器发出另一个请求以请求访问令牌，您可以通过提供授权代码来执行此操作。（反向通道）

  1. 通过反向通道请求访问令牌并将其存储在服务器端的某个位置。(D&E)

现在您在服务器端有了访问令牌，这涵盖了身份验证位，如果您需要使用此身份验证令牌访问受保护的 API，您将被覆盖。

如何判断用户是否经过身份验证？那么你需要一个 id 令牌。

这是由OpenIdConnect完成的

这只是 OAuth2 之上的一层，除了返回您的访问令牌之外，它还将返回一个可用于验证用户身份的 id 令牌。

本质上，您想要的是在 dotnet 核心中设置一些路由，这些路由将在处理反向通道通信的 Angular 应用程序之外工作。另请阅读此谷歌指南。

推荐阅读