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

Question

设置

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

我做了什么

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

问题

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

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

到目前为止我尝试过的内容

1。以非交互方式获取 token

我遵循了本指南 https://blog.mechanicalrock.io/2022/08/08/azure-ad-authentication-cypress.html通过 api 为我的测试用户请求 token ，而不是交互式地询问用户的凭据。

默认端点

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

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 和一个访问 token 。这里的问题是此 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 wait for redirection after login )是:

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 并获取 token 。不过，这对您的场景有限制，因为该流程仅适用于 B2C 中的本地帐户，其中您的用户已使用电子邮件地址或用户名注册了 B2C。这个guide提供了如何从 Azure AD 获取访问 token 的示例:

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

一种仅用于测试的解决方法是在 cypress.json 中设置 chromeWebSecurity: false，如 Getting "cannot set property name of which has only a getter" 中引用的那样。