Question

我想为我的Angular应用程序设置一些端到端测试，这需要使用MSAL库对某些下游服务进行身份验证。当我尝试在本地运行e2e测试时，MSAL库迫使我使用用户名/密码进行身份验证。

这是一个问题，因为我们的CI / CD e2e测试不应有任何人为干预；因此，我正在寻找一种绕过MSAL身份验证或设置服务帐户进行登录的方法。不幸的是，关于Angular的MSAL（尤其是当涉及到e2e测试时），没有太多的文档，但这似乎是其他人可能遇到的一个常见问题。

我尝试从我们的app.module.ts文件中禁用MsalModule，但在尝试运行该应用程序时仍提示我登录。我也看到过一些文章尝试以编程方式登录，但是这对我们不起作用，因为从技术上讲MSAL并不是我们可以接触到的Angular组件。

app.module.ts：

CREATE PROCEDURE [schema].[StoredProcedure] 
    @parameter BIGINT NULL
AS EXTERNAL NAME [AssemblyNameFromProjectProperties].[ClassWithProcedure].[Method];
GO

预期结果：删除MSAL身份验证模块将使我们的应用程序无需登录即可运行。

实际结果：应用程序仍在提示登录，或无法正确呈现。

Answer 1

要绕过MSAL，您可以模拟MsalGuard内部MsalService文件副本的MsalInterceptor，main-skip-login.ts和main.ts的实现。

import { MsalGuard, MsalInterceptor, MsalService } from '@azure/msal-angular';

MsalGuard.prototype.canActivate = () => true;

MsalInterceptor.prototype.intercept = (req, next) => {
  const access = localStorage.getItem('access_token');
  req = req.clone({
    setHeaders: {
      Authorization: `Bearer ${access}`
    }
  });
  return next.handle(req);
};

MsalService.prototype.getAccount = (): any => {
  if (!localStorage.getItem('access_token')) return undefined;
  return {
    idToken: {
      scope: [],
      // other claims if required
    }
  };
};

然后在angular.json内创建一个名为e2e的配置，并将main.ts替换为main-skip-login.ts。

"configurations": {
            "e2e": {
              "fileReplacements": [
                {
                  "replace": "src/main.ts",
                  "with": "src/main-skip.login.ts"
                }
              ]
}}

现在，您可以使用此配置运行项目，并使用真实令牌设置localStorage以绕过MSAL身份验证流。您还可以使用模拟逻辑来获得所需的结果。

Answer 2

我通过在我的 environment.test.ts 中添加一个属性enableMsal来解决此问题（在生产环境中添加了一个值为true的属性）：

export const environment = {
  production: false,
  enableMsal: false,
};

然后在路由模块中使用它（默认情况下称为 app-routing.module.ts ，如下所示：

//... 
const guards: any[] = environment.enableMsal ? [MsalGuard] : [];

const routes: Routes = [
  {path: '', redirectTo: '/main', pathMatch: 'full'},
  {path: 'main', component: MainComponent, canActivate: guards},
  {path: 'other', component: OtherComponent, canActivate: guards},
];
//...

如果您不知道如何配置多个环境，可以使用angular here很好的指南。

Answer 3

为了解决此问题，我们设置了另一个配置文件来运行e2e测试。

我们利用了一个不包含canActivate属性的自定义ngular.routing.module：[MsalGuard]

运行Angular e2e测试时如何禁用或绕过MSAL身份验证？

3 个答案: