具有 Angular 和 Oidc 客户端的 Auth0

Question

我创建了一个新的 Angular 应用程序，我正在使用 Auth0 登录，但是我遇到了 oidc-client 的问题，出现了这个错误：

main.ts:12 TypeError: clientSettings.userStore is not a function
at new OidcService (ng-oidc-client.js:599)

在我的auth.module中我有这样的配置：

NgOidcClientModule.forRoot({
      // prettier-ignore
      oidc_config: {
        authority: environment.sts.authority,
        client_id: environment.sts.clientId,
        redirect_uri: `${environment.appRoot}oidc-login-redirect-callback.html`,
        scope: 'openid profile',
        response_type: 'id_token token',
        post_logout_redirect_uri: `${environment.appRoot}/oidc-logout-redirect-callback.html`,
        silent_redirect_uri: `${environment.appRoot}/oidc-silent-renew-redirect-callback.html`,
        accessTokenExpiringNotificationTime: 10,
        automaticSilentRenew: true,
        metadata: {
          authorization_endpoint: `${environment.sts.authority}authorize audience=${environment.sts.audience}`,
          userinfo_endpoint: `${environment.sts.authority}userinfo`,
          issuer: environment.sts.authority,
          jwks_uri: `${environment.sts.authority}.well-known/jwks.json`,
          // tslint:disable-next-line: max-line-length
          end_session_endpoint: `${environment.sts.authority}v2/logout?returnTo=${environment.appRootEncoded + 'oidc-logout-redirect-callback.html'}&client_id=${environment.sts.clientId}`
        },
        userStore: new WebStorageStateStore({ store: window.localStorage })
      }
    })

这是我的环境文件：

export const environment = {
  production: false,
  appRoot: 'http://localhost:4200',
  appRootEncoded: 'http://localhost:4200',
  apiUrl: 'http://localhost:4201',
  sts: {
    authority: 'https://dev-serj.eu.auth0.com/',
    clientId: 'R7fxgHNkPEj2VX1H7q4Fp0j2XnSqaudJ',
    audience: 'dev-serj-api'
  }
};

我非常确定 userStore 有问题，但我找不到修复它的解决方案。

我的 oidc 版本：

"ng-oidc-client": "^1.0.7",
"oidc-client": "^1.10.1",

Answer 1

这看起来像是 ng-oidc-client 和 oidc-client 之间的版本冲突。

ng-oidc-client 希望您提供 returns WebStorageStateStore 的功能。但是，Config 的形状直接来自 oidc-client，它应该是 WebStorageStateStore 而不是函数。

直到最近，userStore 字段在 oidc-client 中被声明为 any，这允许了这个技巧。在 1.10 中 oidc-client 被重组，新类型为 userStore: WebStorageStateStore.

一个快速的解决办法是提供一个函数——正如 ng-oidc-client 所期望的那样。并添加类型断言以抑制编译错误。

userStore: (() => new WebStorageStateStore({ store: window.localStorage })) as any

并可能为 ng-oidc-client 提交错误报告。 :)

具有 Angular 和 Oidc 客户端的 Auth0

Auth0 with Angular and Oidc-client

angular

auth0

oidc-client