使用自定义策略进行 Azure AD B2C 登录的 Cypress 测试设置

Question

设置

• 具有自定义策略的 Azure AD B2C (B2C_1A_SIGNIN)
• 反应前端
• MSAL 实现身份验证（@azure/msal-browser：2.37.0、@azure/msal-react：1.5.7） - 使用 loginRedirect()（无 MFA）
• Cypress (v12.5.1) 用于 e2e 测试

我做了什么

我通过 MSAL 库为我的前端应用程序实现了身份验证，为我的应用程序创建了应用程序注册，添加了重定向 URI 和自定义登录策略。整个登录流程运行得很好，我得到了我的令牌，一切都很好。

问题

我正在使用 cypress 进行 e2e 测试，现在（自从我实现了身份验证）我当然必须更新我的所有测试，因为我的所有测试都希望已经登录。

这就是棘手的部分。如果我做对了，首选方法是在我的 cypress 配置中添加一个 login() 命令，这样在执行测试之前只执行一次整个登录操作。

到目前为止我尝试过的事情

1.以非交互方式获取令牌

我按照本指南https://blog.mechanicalrock.io/2022/08/08/azure-ad-authentication-cypress.html通过api为我的测试用户请求令牌，而不是交互式地挑战用户的令牌凭证。

默认端点

首先我通过邮递员测试了微软的默认端点https://login.microsoftonline.com：

POST: https://login.microsoftonline.com/<b2cTenantId>/oauth2/v2.0/token
body: {
  grant_type:password
  client_id:<applicationId>
  client_secret:<clientSecret>
  scope:openid profile email
  username:<testUsername>
  password:<testUserPassword>
}

这很有效，我得到了一个 Id-Token 和一个访问令牌。这里的问题是此令牌不适用于我的自定义登录策略。

自定义端点

因此，我对自定义策略端点进行了相同的尝试：

POST: https://<b2cDomain>.b2clogin.com/<b2cdomain>.onmicrosoft.com/B2C_1A_SIGNIN/oauth2/v2.0/token?p=B2C_1A_SIGNIN
body: {
  grant_type:password
  client_id:<applicationId>
  client_secret:<clientSecret>
  scope:openid profile email
  username:<testUsername>
  password:<testUserPassword>
}

但是对于该请求，我收到以下错误：

{
  "error": "invalid_request",
  "error_description": "AADB2C90055: The scope 'openid profile email' provided in request must specify a resource, such as 'https://example.com/calendar.read'.\r\nCorrelation ID: <someId> \r\nTimestamp: 2023-05-12 14:03:41Z\r\n"
}

我也尝试过没有范围，但端点确实需要范围。因此，要么这种方式不适用于自定义策略，要么我做错了什么。

2.通过 cypress 填写登录表单

我尝试的第二种方法是通过 cypress 处理真正的前端登录流程。但不知何故，cypress 似乎不喜欢登录的重定向方式。我基本上遵循了本指南https://docs.cypress.io/guides/end-to-end-testing/azure-active-directory-authentication 不专门研究自定义策略。

我最新的测试代码（包括从这里使用 cy.origin() 的提示cypress 登录后等待重定向）是：

cy.visit('http://localhost:3000');
cy.origin(
'https://<b2cDomain>.b2clogin.com',
{
  args: {},
},
() => {
  cy.url().should('contain', 'https://<b2cDomain>.b2clogin.com');
  cy.get('input[id="signInName"]').type(Cypress.env('AZURE_TEST_USERNAME'), {
    log: false,
  });
  cy.get('input[id="password"]').type(Cypress.env('AZURE_TEST_PASSWORD'), {
    log: false,
  });
  cy.get('button[id="next"]').click();
}
);

// cy.wait(1000);
cy.url().should('contain', 'http://localhost:3000');

最让我烦恼的是，代码似乎可以工作（当查看执行视频时），但测试无论如何都会失败。他们很早就失败了。在我看来，这在某种程度上是一个异步问题。但无论如何：错误消息对我来说没有任何意义：

周围的测试让我觉得 cypress 不能正确处理重定向，但我不知道它是如何工作的。

现在我不知道哪种方法更有希望。 我感谢任何提示或替代解决方案。

Answer 1

您遵循的指南适用于 Azure AD，但您正在尝试为 Azure AD B2C 实施解决方案。 Azure 方面没有官方指南，因此我不认为这是“官方”支持的。我对 Cypress 配置不太熟悉，但 Cypress 中的 CORS 处理存在一些众所周知的问题，这可能会触发“无法设置仅具有 getter 的 [object DOMException] 的属性名称”。 Cypress 会阻止跨源调用，因此您需要使用资源所有者密码凭据流程将用户凭据发布到 Azure 并获取令牌。不过，这对您的场景有限制，因为该流程仅适用于 B2C 中的本地帐户，其中您的用户已使用电子邮件地址或用户名注册了 B2C。本指南提供了如何从 Azure AD 获取访问令牌的示例：

  cy.request({
    method: 'POST',
    url: `https://login.microsoft.com/${config.tenant}/oauth2/token`,

仅用于测试的一种解决方法是在

chromeWebSecurity: false

中设置

cypress.json

，如 获取“无法设置仅具有 getter 的属性名称”