auth0 登录时进程卡在回调 url

Question

我正在研究 React 项目并将 auth0 与其集成。 我已经完成了所有步骤，但卡在了一点。 当我要使用 Gmail 帐户使用 auth0 登录时，它卡在回调 URL 上并且进程停止在回调 URL 之后未调用handleAuthentication方法。我该如何解决这个问题？

export default class Auth {
  auth0 = new auth0.WebAuth({
    domain: AUTH_CONFIG.domain,
    clientID: AUTH_CONFIG.clientId,
    redirectUri: 'http://localhost:3000/callback',
    audience: `https://${AUTH_CONFIG.domain}/userinfo`,
    responseType: 'token id_token',
    scope: 'openid'
  });

  constructor() {
    console.log('process.env.NODE_ENV',process.env.NODE_ENV)
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.handleAuthentication = this.handleAuthentication.bind(this);
    this.isAuthenticated = this.isAuthenticated.bind(this);
  }

  login() {
    this.auth0.authorize();
    console.log('login done',store)
  }

  handleAuthentication() {
    console.log('asdfasfasf')
    this.auth0.parseHash((err, authResult) => {
      console.log('authResult.accessToken',authResult.accessToken)
      if (authResult && authResult.accessToken && authResult.idToken) {
        this.setSession(authResult);
        localStorage.setItem("user_id", "user-id");
        let store1 = store();
        store1.dispatch({ type: 'LOGIN_USER_SUCCESS', payload: authResult })
        window.location.replace('/')
      } else if (err) {
        console.log(err);
        alert(`Error: ${err.error}. Check the console for further details.`);
      }
    });
  }
}

Answer 1

我知道回答这个问题有点晚了，但以防万一它对将来的人有帮助或至少指向正确的方向。

我有同样的问题，问题是这一行

redirectUri: 'http://localhost:3000/callback',

如果您以http://localhost:3000访问本地主机，您现有的回调应该可以工作。

但是，redirectUrl 不适用于http://www.localhost:3000 。 url 会卡在回调中。 我认为 auth0 组件对路由非常具体。 尽管 www 和没有 www 指向同一个域，但它确实会以不同的方式对待它们。

为了使 www 和非 www 都适用，我将 redirectUri url 更改为以下内容

redirectUri: ${window.location.origin}/callback ,

PS：进行此更改后，也不要忘记调整 auth0 站点上的回调以允许两种变化。