Auth0 3 次 localauthsetup 失败，后来我可以路由到主页

Question

当我通过 auth0 登录时 - localauthsetup 失败了 3 次，然后它返回 true 以登录，你能帮我解决这个问题吗？

在appcomponent中调用localauthsetup和handleAuthCallback，在构造上调用类似。

域 id 和客户端 id 是从配置文件中导入的，它也按预期工作，代码工作几乎与提供的链接中的代码相同：

https://auth0.com/docs/quickstart/spa/angular2/01-login#add-the-authentication-service

auth0Client$ = (from(
    createAuth0Client({
      domain: AuthConfig.domain,
      client_id: AuthConfig.clientId,
      redirect_uri: `${window.location.origin}`
    })
  ) as Observable<Auth0Client>).pipe(
    shareReplay(1), // Every subscription receives the same shared value
    catchError(err => _throw(err))
  );
  // Define observables for SDK methods that return promises by default
  // For each Auth0 SDK method, first ensure the client instance is ready
  // concatMap: Using the client instance, call SDK method; SDK returns a promise
  // from: Convert that resulting promise into an observable
  isAuthenticated$ = this.auth0Client$.pipe(
    concatMap((client: Auth0Client) => from(client.isAuthenticated())),
    tap(res => this.loggedIn = res)
  );
  handleRedirectCallback$ = this.auth0Client$.pipe(
    concatMap((client: Auth0Client) => from(client.handleRedirectCallback()))
  );
  // Create subject and public observable of user profile data
  private userProfileSubject$ = new BehaviorSubject<any>(null);
  userProfile$ = this.userProfileSubject$.asObservable();
  // Create a local property for login status
  loggedIn: boolean = null;

  constructor(private router: Router) {
    console.log('service called');
    //calling localauthsetup and handleAuthCallback here 

   }

  // When calling, options can be passed if desired
  // https://auth0.github.io/auth0-spa-js/classes/auth0client.html#getuser
  getUser$(options?): Observable<any> {
    return this.auth0Client$.pipe(
      concatMap((client: Auth0Client) => from(client.getUser(options))),
      tap(user => this.userProfileSubject$.next(user))
    );
  }

  localAuthSetup() {
    // This should only be called on app initialization
    // Set up local authentication streams
    const checkAuth$ = this.isAuthenticated$.pipe(
      concatMap((loggedIn: boolean) => {
        console.log('localauthsetup',loggedIn);
        if (loggedIn) {
          // If authenticated, get user and set in app
          // NOTE: you could pass options here if needed
          return this.getUser$();
        }
        // If not authenticated, return stream that emits 'false'
        return of(loggedIn);
      })
    );
    checkAuth$.subscribe((res)=>{
      console.log('subscripbe',res)
    });
  }

  login(redirectPath: string = '/') {
    console.log('login called',redirectPath);
    // A desired redirect path can be passed to login method
    // (e.g., from a route guard)
    // Ensure Auth0 client instance exists
    this.auth0Client$.subscribe((client: Auth0Client) => {
      // Call method to log in
      client.loginWithRedirect({
        redirect_uri: `${window.location.origin}`,
        appState: { target: redirectPath }
      });
    });
  }

  handleAuthCallback() {
    console.log('handleauth called');
    // Call when app reloads after user logs in with Auth0
    const params = window.location.search;
    if (params.includes('code=') && params.includes('state=')) {
      let targetRoute: string; // Path to redirect to after login processsed
      const authComplete$ = this.handleRedirectCallback$.pipe(
        // Have client, now call method to handle auth callback redirect
        tap(cbRes => {
          // Get and set target redirect route from callback results
          targetRoute = cbRes.appState && cbRes.appState.target ? cbRes.appState.target : '/';
        }),
        concatMap(() => {
          // Redirect callback complete; get user and login status
          return combineLatest([
            this.getUser$(),
            this.isAuthenticated$
          ]);
        })
      );
      // Subscribe to authentication completion observable
      // Response will be an array of user and login status
      authComplete$.subscribe(([user, loggedIn]) => {
        // Redirect to target route after callback processing
        this.router.navigate([targetRoute]);
      });
    }
  }

  logout() {
    // Ensure Auth0 client instance exists
    this.auth0Client$.subscribe((client: Auth0Client) => {
      // Call method to log out
      client.logout({
        client_id: AuthConfig.clientId,
        returnTo: `${window.location.origin}`
      });
    });
  }

Answer 1

这里是康拉德。我是 Auth0 社区工程师。不是 Angular 专家，但正如我看到的，查看我们的快速入门和您的代码 sn-p，您不会在任何您定义它的地方调用 localAuthSetup 方法以及 handleAuthCallback。您可以尝试按照快速入门中的建议在构造函数中调用两者吗？

Answer 2

登录到您的租户，转到水疗应用程序，设置。 找到允许的回调 URL 并确保你有类似的东西`

您的域名， 你的域名/登录名 """

PS "/login" 是应用程序登录 URI 的同一路径