Angular Oidc登录无限循环

在我的Angular应用程序中，我正在使用Auth0和Oidc进行登录

我有以下配置：

验证模块

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 })
      }
    })

环境。ts

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'
  }
};

在Auth0中：

<script src="oidc-client.min.js"></script>
<script>
   var config = {
      userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })
   };
   var mgr = new Oidc.UserManager(config);
   mgr.signinRedirectCallback().then(
      () => {
        window.history.replaceState({}, window.document.title, windows.location.origin);
        window.location = '/';
      }, error => {
          console.log(error);
      }
   );
</script>

<script src="oidc-client.min.js"></script>
<script>
  var Oidc = window.Oidc;
  var config = {
    userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })
  };
  if (Oidc && Oidc.Log && Oidc.Log.logger) {
    Oidc.Log.logger = console;
  }
  var isPopupCallback = JSON.parse(
    window.localStorage.getItem('ngoidc:isPopupCallback')
  );
  if (isPopupCallback) {
    new Oidc.UserManager(config).signoutPopupCallback();
  } else {
    new Oidc.UserManager(config).signoutRedirectCallback().then(test => {
      window.location.href = '/';
    });
  }
</script>

<script src="oidc-client.min.js"></script>
<script>
  var config = {
    userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })
  };
  new Oidc.UserManager(config).signinSilentCallback().catch(function(e) {
    console.log(e);
  });
</script>

providers: [
    AppInitializerService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [AppInitializerService],
      multi: true
    }
  ],

@Injectable()
export class AppInitializerService {
  constructor(private authService: AuthService) {}

  public async init(): Promise<void> {
    return new Promise(async resolve => {
      await this.authService.init();

      resolve();
    });
  }
}

允许的回调URL:

允许的网站来源：

允许的注销URL：

来自oidc HTML页面的脚本如下所示：

oidc登录重定向回调.html：

<script src="oidc-client.min.js"></script>
<script>
   var config = {
      userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })
   };
   var mgr = new Oidc.UserManager(config);
   mgr.signinRedirectCallback().then(
      () => {
        window.history.replaceState({}, window.document.title, windows.location.origin);
        window.location = '/';
      }, error => {
          console.log(error);
      }
   );
</script>

<script src="oidc-client.min.js"></script>
<script>
  var Oidc = window.Oidc;
  var config = {
    userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })
  };
  if (Oidc && Oidc.Log && Oidc.Log.logger) {
    Oidc.Log.logger = console;
  }
  var isPopupCallback = JSON.parse(
    window.localStorage.getItem('ngoidc:isPopupCallback')
  );
  if (isPopupCallback) {
    new Oidc.UserManager(config).signoutPopupCallback();
  } else {
    new Oidc.UserManager(config).signoutRedirectCallback().then(test => {
      window.location.href = '/';
    });
  }
</script>

<script src="oidc-client.min.js"></script>
<script>
  var config = {
    userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })
  };
  new Oidc.UserManager(config).signinSilentCallback().catch(function(e) {
    console.log(e);
  });
</script>

providers: [
    AppInitializerService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [AppInitializerService],
      multi: true
    }
  ],

@Injectable()
export class AppInitializerService {
  constructor(private authService: AuthService) {}

  public async init(): Promise<void> {
    return new Promise(async resolve => {
      await this.authService.init();

      resolve();
    });
  }
}

这里是AppInitializerService的：

<script src="oidc-client.min.js"></script>
<script>
   var config = {
      userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })
   };
   var mgr = new Oidc.UserManager(config);
   mgr.signinRedirectCallback().then(
      () => {
        window.history.replaceState({}, window.document.title, windows.location.origin);
        window.location = '/';
      }, error => {
          console.log(error);
      }
   );
</script>

<script src="oidc-client.min.js"></script>
<script>
  var Oidc = window.Oidc;
  var config = {
    userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })
  };
  if (Oidc && Oidc.Log && Oidc.Log.logger) {
    Oidc.Log.logger = console;
  }
  var isPopupCallback = JSON.parse(
    window.localStorage.getItem('ngoidc:isPopupCallback')
  );
  if (isPopupCallback) {
    new Oidc.UserManager(config).signoutPopupCallback();
  } else {
    new Oidc.UserManager(config).signoutRedirectCallback().then(test => {
      window.location.href = '/';
    });
  }
</script>

<script src="oidc-client.min.js"></script>
<script>
  var config = {
    userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })
  };
  new Oidc.UserManager(config).signinSilentCallback().catch(function(e) {
    console.log(e);
  });
</script>

providers: [
    AppInitializerService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [AppInitializerService],
      multi: true
    }
  ],

@Injectable()
export class AppInitializerService {
  constructor(private authService: AuthService) {}

  public async init(): Promise<void> {
    return new Promise(async resolve => {
      await this.authService.init();

      resolve();
    });
  }
}

---

事实上我发现了一些东西：这是由loggedIn引起的？resolve（）：this.oidcFacade.SignInDirect（）；来自auth.service。这就像来自oidcFacade的loggedIn永远都不是真的，并且总是调用SignInDirect函数。如果我使用这个.oidcFacade.SignInPop（）函数，则会显示一些弹出窗口，在这之后，我成功登录，但弹出窗口仍会出现。看起来您正在正确地获取令牌，这表明这个问题与回调的处理方式有关。我不熟悉像这样同时使用OIDC和Auth0，使用官方的Auth0快速入门可能更容易。您不遵守该指南有什么原因吗？您能告诉我您启动登录流程的逻辑吗？我的意思是，在您获得访问令牌之后，应该执行登录回调函数，它应该将您重定向回您开始的页面。可能是用户详细信息不可用，并且再次启动登录流程。实际上我发现了一些问题：这是由loggedIn引起的？resolve（）：this.oidcFacade.SignInDirect（）；来自auth.service。这就像来自oidcFacade的loggedIn永远都不是真的，并且总是调用SignInDirect函数。如果我使用这个.oidcFacade.SignInPop（）函数，则会显示一些弹出窗口，在这之后，我成功登录，但弹出窗口仍会出现。看起来您正在正确地获取令牌，这表明这个问题与回调的处理方式有关。我不熟悉像这样同时使用OIDC和Auth0，使用官方的Auth0快速入门可能更容易。您不遵守该指南有什么原因吗？您能告诉我您启动登录流程的逻辑吗？我的意思是，在您获得访问令牌之后，应该执行登录回调函数，它应该将您重定向回您开始的页面。用户详细信息可能不可用，并且它再次启动登录流