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

Question

我在尝试使用Javascript 单页应用程序 (SPA) 的 MSAL 快速入门登录 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（快速）”步骤自动设置的（并且看起来是正确的）。与快速入门中“选项 2（手动）”下描述的手动设置相比，隐式流设置和 redirectUri 设置都是正确的。

根据该错误，我非常确定我的客户端配置中关于redirectUri 缺少某些内容。

Answer 1

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

重定向Uri：“ 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 关联用户名并提示输入密码。输入密码后，我在屏幕上得到预期的响应：

MSAL JS 预期响应快速入门 png

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

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