使用 msal javascript 单页应用程序 (spa) 快速入门解决 redirectUri 错误

Question

我在尝试使用 MSAL Quickstart for a Javascript single-page application (SPA) 登录 Azure AD（Microsoft 身份平台/msal）然后从 Microsoft Graph API 获取并使用访问令牌时遇到错误。我正在使用 Visual Studio 在 Chrome 中启动快速入门。在提示我登录并输入我的用户名后出现错误：

我们无法完成您的请求 invalid_request：为输入参数“redirect_uri”提供的值无效。预期值是一个 URI，它与为此客户端应用程序注册的重定向 URI 匹配。

这是我的 msal 配置的样子：

    var msalConfig = {
        auth: {
            clientId: "194461f0-3d74-49db-a6f0-c7aa07f25ac8",
            authority: "https://login.microsoftonline.com/common"
        },
        cache: {
            cacheLocation: "localStorage",
            storeAuthStateInCookie: true
        }
    };

我确认我在 Azure Active Directory 应用程序注册中的设置是正确的。这些设置是由快速入门中的“选项 1 (Express)”步骤自动设置的（并且显示正确）。与快速入门中“选项 2（手动）”下描述的手动设置相比，隐式流设置和 redirectUri 设置都是正确的。

基于该错误，我很确定我的客户端配置中围绕redirectUri 缺少某些内容。

Answer 1

我能够通过将以下行添加到我的 msalConfig 下的身份验证来解决此错误：

redirectUri: "http://localhost:30662/"

新的 msalConfig 如下所示：

    var msalConfig = {
        auth: {
            clientId: "194461f0-3d74-49db-a6f0-c7aa07f25ac8",
            authority: "https://login.microsoftonline.com/common",
            redirectUri: "http://localhost:30662/"
        },
        cache: {
            cacheLocation: "localStorage",
            storeAuthStateInCookie: true
        }
    };

现在流程接受我与 Azure 相关的用户名并提示我输入密码。输入密码后，我会在屏幕上得到预期的响应：

Quickstart for MSAL JS expected response png

希望这对使用此快速入门并看到相同行为的人们有所帮助。 :)

编辑：在看到此错误之前，我也忘记添加了，我也没有在 Chrome 中看到弹出窗口，并且不得不转到 Chrome 右上角的控件以“始终允许来自该站点的弹出窗口”。我在这里添加这个是因为 Chrome 中这个问题的视觉指示器对我来说似乎不是很明显，所以我花了一段时间才意识到这正在发生。