使用 Cypress 测试受 OAuth 2.0 保护的 Angular 应用程序

Question

背景

我正在尝试为我的 Angular 应用程序编写一些 Cypress 测试。该应用程序内置在带有 Nx 的 monorepo 中，赛普拉斯在其中自动为我们安装和设置。我们正在使用 Identity Server 4 和 OAuth2 来保护 Angular 应用程序。我们使用NPM的angular-auth-oidc-client 包来处理登录/身份验证。该应用程序使用隐式流程，因此当您登录该应用程序时，您将被发送到身份验证服务器，输入您的凭据，然后被重定向回 Angular 应用程序。登录并重定向回 Angular 应用程序后的回调 URL 至少部分是，

/auth/calback#id_token=<token>

我不完全确定回调 URL 的其余部分，但我相信（根据我能找到的）它包括token_type(Bearer)、expires_in（在我的情况下为 3600）和state（我不知道应该放什么） .

题

我的问题是如何让 Angular 应用程序进行身份验证，以便我可以运行 Cypress 测试？我知道我无法真正执行隐式流程，所以我的计划是在每次测试之前使用 HTTP 请求获取令牌并手动将其输入到/auth/callbackAngular 应用程序的路由中，希望从那里 Angular 应用程序可以接管。这是设置：

cy.request(options).then((result: any) => {
  const { body: tokenInfo } = result;
  // I've used access_token and id_token, both with the same result
  cy.visit(
    `/auth/callback#id_token=${tokenInfo['access_token']}&token_type=${tokenInfo['token_type']}&expires_in=${tokenInfo['expires_in']}&state=some-fake-state`,
  );
});

我知道肯定请求成功并返回access_token，token_type和expires_in值。但这似乎是我的规范文件的最后一部分。

之后，还会发出一些其他 XHR 请求，例如发送到身份验证服务器的众所周知的端点。但几毫秒后，这些 XHR 调用被取消，测试从beforeEach登录完成的地方继续进行。这是测试运行的GIF：

（我在测试中添加了 5 秒的等待时间，只是为了看看它是否有任何帮助。它没有。）

在我进行的一项测试中，我只是想检查此人是否可以在页面上看到要求他们登录的内容。但是，每次都失败了。

我确定有办法做到这一点，但我遇到了困难。如果有人对如何做到这一点有任何想法，我将不胜感激。我认为这个关于 Auth0 的教程会让我到达那里，但它并不足以工作。我查看了其他几个资源，但没有一个提供我需要的所有信息。