如何在 Angular 项目中使用 msal.js 2.x (msal-browser) 使用 PKCE 实现授权代码流？答案

【问题标题】：how to use msal.js 2.x (msal-browser) in angular project to implement authorization code flow using PKCE?如何在 Angular 项目中使用 msal.js 2.x (msal-browser) 使用 PKCE 实现授权代码流？
【发布时间】：2021-02-18 21:04:26
【问题描述】：

我想在 Angular 项目中使用 msal.js 2.x (msal-browser) 来使用 PKCE 实现授权代码流。我使用 Azure Active Directory 作为 IAM。请指导我使用正确的库还是应该使用其他库？

【问题讨论】：

标签： oauth-2.0 azure-active-directory openid-connect msal.js angular-auth-oidc-client

【解决方案1】：

Azure AD 端点基于基于标准的消息，您应该能够使用任何基于标准的 JavaScript 安全库。如果您无法从 MSAL 获得您想要的，那么OIDC Client 是一个不错的选择。

如果有帮助，我有一个使用上述库和授权代码流 (PKCE) 的 Azure SPA 代码示例。您应该能够非常轻松地针对您自己的 Azure AD 设置运行它。

还值得一提的是，我使用的库可与任何基于标准的提供程序一起使用，而不仅仅是 Azure AD。

【讨论】：

【解决方案2】：

最好的方法是阅读Redirect URI: MSAL.js 2.0 with auth code flow

请参考这个doc。

【讨论】：

【解决方案3】：

目前，我没有可以分享的特定示例可以帮助您结合 MSAL j.s 2.0 和 Angular。但下面的解决方案将创建一种自己做的方法，

要实现 Angular，请参考here 指南，要实现 PKCE 实现（用 JS 编写），请参考 here

【讨论】：