使用 msal.js 对角度 spa 进行身份验证

【问题标题】：Authentication on angular spa using msal.js使用 msal.js 对角度 spa 进行身份验证
【发布时间】：2018-05-21 01:38:15
【问题描述】：

我的 Angular 应用程序有 1000 条独特的路线，用户应该能够从任何这些页面单击登录按钮。已经基于这个示例实现了 msal.js：

调用登录方法时出现以下错误：

AADB2C90006:+the+redirect+URI+'http://localhost:39579/unique-uri'+provided+in+the+request+is+not+registered+for+the+client+id+

有没有办法解决这个问题？

谢谢！

【问题讨论】：

作为后续...我可以在 AD B2C 中将 localhost:39579/login 指定为回复 URI，但这会导致多次重定向。因此，我的 Angular 应用程序将被用户多次下载，这是不可接受的。

【解决方案1】：

默认情况下，Msal.UserAgentApplication 构造函数将“redirect_uri”请求参数设置为当前 URL，该 URL 不可缩放。

Msal.UserAgentApplication 构造函数接受“redirectUri”选项参数，该参数允许将“redirect_uri”请求参数设置为为 Azure AD B2C 应用程序注册的固定 URL（例如“http://localhost:39579/authcallback”）。

在 MSAL 向 Azure AD B2C 生成身份验证请求之前，它会将当前 URL（例如“http://localhost:39579/unique-uri”）写入存储，然后将用户代理重定向到身份验证端点。

在“/authcallback”端点，您必须创建一个新的 Msal.UserAgentApplication 实例，以处理身份验证响应。

MSAL 验证来自 Azure AD B2C 的身份验证响应后，它会从存储中读取原始 URL，然后将用户代理返回到该 URL。

【讨论】：