Auth0 回调 URL 不匹配

IT技术 authentication reactjs auth0 social-authentication
2021-05-21 09:50:56

我正在 React 应用程序中使用 auth0 进行 LinkedIn 身份验证。我在设置localhost:3000/upload设置了回调 url,跳到用户登录后localhost:3000/login,他们将被重定向到localhost:3000/upload. 但是,我总是收到此错误:urllocalhost:3000/login不在回调 url 列表中。为什么auth0登录后会期望返回到刚才登录的页面,不应该是一些不同的url吗?这对我来说没有意义。

编辑:

export default class AuthService {
  constructor(clientId, domain) {
    // Configure Auth0
    const options = {
      allowedConnections: ['linkedin'],
      auth: {
        params: {responseType: 'code'}
      }
    };  
    this.lock = new Auth0Lock(clientId, domain, options)
    // Add callback for lock `authenticated` event
    this.lock.on('authenticated', this._doAuthentication.bind(this))
    // binds login functions to keep this context
    this.login = this.login.bind(this)
    this.loggedIn = this.loggedIn.bind(this)
  }

  _doAuthentication(authResult){
    // Saves the user token
    console.log(authResult);
    this.setToken(authResult.idToken)
    this.lock.getProfile(authResult.idToken, (error, profile) => {
      if (error) {
        console.log('Error loading the Profile', error)
      } else {
        console.log(profile)
      }
    })
  }
//....
4个回答

请确保两件事:

1)。在您的react应用程序代码中

 responseType: 'code'

2)。在 Auth0 仪表板上,在 Settings -> Allowed Callback URLs 下放置您的回调条目 (localhost:3000/upload) - 我认为您已经这样做了,但以防万一。

在此处输入图片说明

如果您仍有问题,请告诉我。

要在身份验证成功后重定向到不同的 URL,您需要提供redirectUrlto Lock,如下所示:

// 配置 Auth0 const options = { allowedConnections: ['linkedin'], auth: { responseType: 'code', redirectUrl: ' http://localhost:3000/upload ' } };
this.lock = new Auth0Lock(clientId, domain, options)

(另请注意,该responseType选项位于 之下auth,而不是之下auth.params。)

如果您进行重定向,您将无法到达您在登录页面中定义的事件处理程序。您将需要在目标页面中添加一个事件处理程序(并使用responseType:token)或在您的服务器代码中处理身份验证结果(这是您在请求 时通常会执行的操作responseType: code)。

将 URL 粘贴到 Auth0 设置站点时,请确保 URL 之间的逗号之间没有特殊的隐藏字符或空格。我没有意识到这个 util 我把每个 urls 放入 Vim 中检查并查看是否有上述情况

在对 AuthProvider 的调用中,确保使用与 Auth0 设置中相同的回调 url:

const uri='http://localhost:3000/upload';

        <Auth0Provider
        domain={domain}
        clientId={clientId}
        redirectUri={uri}>