授权代码流程在单页应用程序中如何工作？

Question

您好，我正在探索与天蓝色活动目录相关的一些身份验证和授权流程。我之前在单页应用程序中使用了誓言隐式流程。在花时间阅读微软文档之后，我了解了以下关于隐式流程的内容。

\n

\n

隐式流程：

\n

\n

单页 javacript 应用程序使用隐式流从 azure Active Directory 获取访问令牌。它直接调用令牌端点来获取令牌，因此这使得隐式流的安全性降低。

\n

\n

.Net Web 应用程序中的授权遵循

\n

\n

每当我们使用带有授权代码流的.Net Core Web MVC应用程序时，浏览器中都会首先调用授权端点来获取代码。在浏览器中我们可以看到向授权端点发出的请求。在请求 url 中，我将传递响应类型作为代码，然后传递客户端 ID 和重定向 ui。这里第一次握手发生在浏览器和授权端点之间。此握手将代码返回到重定向 uri。下一部分，应用程序必须向令牌端点发出 POST 请求以获取访问令牌。第一步收到的代码我将发送令牌请求。在此请求中，我还将包含客户端机密和重定向 uri。但是每当我向授权端点发出第一个 GET 请求时，我都不会传递客户端秘密。这是因为在浏览器中暴露秘密并不好。因此，在第二篇帖子请求中，我还将包括客户秘密。获得访问令牌后，我会将其添加到 api 请求标头中，以对 api 进行安全调用。\n这是我所理解的关于 .Net core Web 应用程序的授权代码流风格。现在我有关于单页应用程序的另一种授权代码。

\n

\n

React Web App 中的授权代码流程

\n

\n

我有使用 MSAL 库的 SPA React 应用程序。我已经从 github https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/3-Authorization-II/1-call-api/SPA克隆了示例应用程序。

\n

每当我运行此应用程序并登录时，第一个调用将如下所示

\n

 https://login.microsoftonline.com/common/discovery/instance?api-version=1.1&authorization_endpoint=https://login.microsoftonline.com/c5ffa990-7e0a-4bf6-6c04-79ab98e05931/oauth2/v2.0/authorize\n

\n

我正在尝试理解这个请求。我已将查询字符串附加到网址authorization_endpoint=https://login.microsoftonline.com/c5ffa990-7e0a-4bf6-6c04-79ab98e05931/oauth2/v2.0/authorize，因此这可用于从授权服务器返回代码。 \n下一个调用将立即发生https://login.microsoftonline.com/c5ffa990-7e0a-4bf6-6c04-79ab98e05931/oauth2/v2.0/token

\n

要获取访问令牌并在 FormData 部分的请求中，我可以看到以下参数

\n

client_d, redirect_uri,scope,code\n

\n

在代码中，我看到一些希望从授权端点收到的代码值。无论如何，这个 api 返回了我的 access_token。

\n

现在得出结论，在 .Net core Web 应用程序和 React SPA 应用程序中，我都在使用授权代码流。

\n

\n

1. 在.Net核心授权代码流中，每当尝试获取访问令牌时，我都会使用客户端秘密。所有这一切都以安全的方式发生在服务器端。在反应中，我也使用授权代码流，但我没有在任何地方使用客户端秘密。

   \n
\n

2. 在反应应用程序中，我还发出两个请求，一个请求授权端点以获取代码，另一个请求获取令牌。所有这些我都可以在浏览器本身中看到，但是我如何才能认为这是安全的呢？

   \n
\n

3. 在 .Net Web 应用程序和 React 应用程序中，这两个应用程序都使用授权代码流，但其行为独立取决于应用程序的类型。

   \n
\n

4. 在互联网上浏览了一些文件和视频后，我得出的结论是

   \n
\n

\n

当授权代码流与服务器端 Web 应用程序（如 .Net core MVC）一起使用时，它利用 client_secret 来获取访问令牌，并且此调用将在服务器端发生，因此客户端秘密不会通过浏览器暴露给用户

\n

当授权流程使用没有服务器端支持的 SPA 应用程序时，首先它将进行调用以获取授权代码，然后它将发出发布请求以获取访问令牌而不需要 client_secret。 没有客户端机密的授权代码授予的唯一安全方法是使用\xe2\x80\x9cstate\xe2\x80\x9d 参数并将重定向 URL 限制为受信任的客户端。

\n

因此，我得出的结论是，当我们使用具有授权代码流的服务器端 Web 应用程序时，我们可以利用客户端机密，但在 SPA 中，我们不会使用 client_secret。

\n

我已经理解了上述概念并解释了我所理解的内容，还列出了在 Web 应用程序和 Spa 应用程序中实现两种风格的授权代码流后遇到的困惑。有人可以帮助我如果我的理解正确与否，如果我的理解错误，我到底理解错在哪里？任何人都可以在这方面帮助我。任何帮助将不胜感激。谢谢

\n

Answer 1

Authcode 流程是 OAuth 2.0 工作流程，您可以在任何类型的客户端（Web/移动/SPA）中使用它。客户端应使用 MSAL 库通过 PKCE 与 AAD/B2C 进行通信，PKCE 用于通过 S256 加密的代码交换证明密钥 (code_challenge) 来保护授权代码授予。

授权码授权流程规范：

如果您使用的是 B2C，您的入口端点是：

https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/authorize?
client_id=90c0fe63-bcf2-44d5-8fb7-b8bbc0b29dc6
&response_type=code
&redirect_uri=urn%3Aietf%3Awg%3Aoauth%3A2.0%3Aoob
&response_mode=query
&scope=90c0fe63-bcf2-44d5-8fb7-b8bbc0b29dc6%20offline_access
&state=arbitrary_data_you_can_receive_in_the_response
&code_challenge=YTFjNjI1OWYzMzA3MTI4ZDY2Njg5M2RkNmVjNDE5YmEyZGRhOGYyM2IzNjdmZWFhMTQ1ODg3NDcxY2Nl
&code_challenge_method=S256

将显示登录-注册-社交登录表单。只需使用您在 B2C 中注册的App ClientId导航到此 URL 。

您还可以查看自定义策略入门包，以根据您的需求（索赔）调整您的工作流程。

如果您将response_type=code 更改为response_type=id_token，您将获得一个令牌，可用于在所有登录过程后对您的受限资源（API）进行身份验证。或者您可以使用对令牌端点的第二次调用来获取它。

令牌端点：

POST https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/token HTTP/1.1

Content-Type: application/x-www-form-urlencoded

grant_type=authorization_code&client_id=90c0fe63-bcf2-44d5-8fb7-b8bbc0b29dc6&scope=90c0fe63-bcf2-44d5-8fb7-b8bbc0b29dc6 offline_access&code=AwABAAAAvPM1KaPlrEqdFSBzjqfTGBCmLdgfSTLEMPGYuNHSUYBrq...&redirect_uri=urn:ietf:wg:oauth:2.0:oob&code_verifier=ThisIsntRandomButItNeedsToBe43CharactersLong 

code=XXXXXXXXXXXXX 参数是第一个 GET 请求返回的 access_code。