SPA + Web API 应用程序中的 OAuth2 如何实现？

【问题标题】：How can OAuth2 in SPA + Web API app be implemented?SPA + Web API 应用程序中的 OAuth2 如何实现？
【发布时间】：2020-11-28 14:52:11
【问题描述】：

有一个应用程序在前端使用 Angular 10，在后端使用 ASP.NET Core 3.1 Web API。我需要为用户添加通过 GitHub 和 Google 登录的功能，而无需使用登录名和密码。这个过程的正确流程是什么？有没有一些实现这种东西的例子？

我有一个可行的解决方案，但它的问题是从后端向前端发送用户数据和访问令牌。

【问题讨论】：

@Yurri - 不使用登录名和密码 - 你的意思是说用户应该能够在不提示输入用户凭据的情况下登录。如果是这种情况，你应该看的是 oauth2 客户端凭据流，恐怕这个流不推荐/不支持 SPA，它打算用于守护程序应用程序，即服务器到服务器调用

【解决方案1】：

使用流程

SPA 的标准流程是使用授权代码流程 (PKCE)，这会产生来自 my blog post 的消息。

无需登录名和密码

我知道你的意思：如果用户尚未登录，则通过熟悉的密码登录。

连接运动部件

我的index page 有一些分步代码示例，虽然我还没有介绍社交登录。

基础设施

通常您从云授权服务器（例如 Azure AD）开始，该服务器具有自己的默认登录选项，供没有 Google/GitHub 帐户的用户使用。 AS 还可以在需要时联合到 Google/GitHub。

联邦

架构目标

【讨论】：