Question

我在反应应用中使用auth0进行LinkedIn身份验证。我在设置中的回调网址中设置了localhost:3000/upload，在用户登录localhost:3000/login后跳转，他们将重定向到localhost:3000/upload。但是，我总是收到此错误：url localhost:3000/login不在回调网址列表中。为什么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)
      }
    })
  }
//....

Answer 1

请确保两件事：

1）。在您的反应应用代码中

 responseType: 'code'

2）。在Auth0信息中心的“设置”下，＆gt;允许的回调URL放置你的回调条目（localhost：3000 / upload） - 我认为你已经完成但是以防万一。

如果您还有问题，请告诉我。

Answer 2

要在成功进行身份验证后重定向到其他网址，您需要提供redirectUrl锁定，如下所示：

//配置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，这通常会执行此操作）。

Answer 3

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

Answer 4

在对AuthProvider的调用中，请确保使用与Auth0设置相同的回调网址：

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

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

Answer 5

之所以要在auth0设置中设置回调网址，是因为任何人都可以使用您的客户端ID并将请求发送到google或linkedin，然后将响应发送到他们设置的任何位置。但只有使用此设置，您才能访问该回复。

一旦您的应用有权从linkedin中提取数据，linkedin就会将数据发送到您指定的位置。您应该创建一个页面来处理Linkedin服务器的响应。我们将该页面命名为callback.js，这将是响应对象的示例。

accessToken: "hNuPLKTZHiE9_lnED0JIiiPNjlicRDp"
   appState: null
   expiresIn: 7200
   idToken: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ik5FRXdSVUl5TURVeE4wSkJPRFZEUlRKRU1EVkZNemsxTXpNNU5VTXlNRGt6T0VWQlJqUkZRUSJ9.eyJodHRwOi8vbG9jYWxob3N0OjMwMDAvcm9sZSI6InNpdGVPd25lciIsImdpdmVuX25hbWUiOiJvbWFyIiwiZmFtaWx5X25hbWUiOiJpYm8iLCJuaWNrbmFtZSI6Im9tYXJpYm8xOTgyIiwibmFtZSI6Im9tYXIgaWJvIiwicGljdHVyZSI6Imh0dHBzOi8vbGg1Lmdvb2dsZXVzZXJjb250BQUFBQUkvQUFBQUFBQUFBQUEvQUNIaTNyLTEwLTEyVDIyOjU4OjAxLjgzM1oiLCJpc3MiOiJodHRwczovL3BvcnRmb2xpby15aWxtYXouYXV0aDAuY29tLyIsInN1YiI6Imdvb2dsZS1vYXV0aDJ8MTE0MDY0NTA2ODI2OTgwNTA5ODY3IiwiYXVkIjoiUEdVY242RjRRS21PRkJhb1k0UFdCeWpjVzIyT09vNGMiLCJpYXQiOjE1NzA5MjEwODIsImV4cCI6MTU3MDk1NzA4MiwiYXRfaGFzaCI6InN0R1l5SnJaMHNnbVYzSWNLWjlPeFEiLCJub25jZSI6InRrOV95b096enRmVThVVjFVMlVFR3IyMW5ORW5abjk4In0.TYS7mM8N2d7jEHFdWQGTSeAAUaDt4-0SMUG3LrcQ1r3xzY0RMGsUsEszj5xqk1GE0cIlFS10xCOYKsuHSwsFLomC1EbLjntjkledHtfD0MW84cMoXN6a-x-1-bNwl3lMYJ98qklTrNvTvkQJ6DWhei3hJ8rs8dnbNyCfckNVU6ptJU-9ef1DwWfHRomW5LQ6WSDRHZScW697gdgBEMU-Nd2SddyHhQe0kVh6lKdcbnskEAyCJLE07jfM40RQI_8LJouFcpoyImcXSDZlKv90tYfVDq9_TwE3GNaSz5I5snn0457oCgz0vuX0JoCUiaDuTIX7XiyXnozW_DxGMuhk4w"
   idTokenPayload: {http://localhost:3000/role: "siteOwner", given_name: "me", family_name: "you", nickname: "nck", name: "nm", …}
   refreshToken: null
  scope: null
   state: "xkEbffzXbdOYPLkXOUkrQeb0Jysbnlfy"
   tokenType: "Bearer"
//THIS CODE IS FOR NEXT.JS9
//auth.js
class Auth0 {
  constructor() {
    this.auth0 = new auth0.WebAuth({
      domain: "portfolio-ys.auth0.com",
      clientID: "PGUWJQKmOFBaoY4PWByjcW22OOo4c",
      redirectUri: "http://localhost:3000/callback",
      responseType: "token id_token",
      scope: "openid profile"
    });

     this.handleAuthentication = this.handleAuthentication.bind(this);
  }
     //there are too many methods are defined here i put only relevant ones
    handleAuthentication() {
        return new Promise((resolve, reject) => {
          this.auth0.parseHash((err, authResult) => {
            console.log(authResult);
            if (authResult && authResult.accessToken && authResult.idToken) {
              this.setSession(authResult);
              resolve();
            } else if (err) {
              reject(err);
            }
          });
        });
      }

setSession function is where you set the cookies based on response object. I use js-cookie package to set the cookie.

    setSession(authResult) {
        const expiresAt = JSON.stringify(
          authResult.expiresIn * 1000 + new Date().getTime()
        );
        Cookies.set("user", authResult.idTokenPayload);
        Cookies.set("jwt", authResult.idToken);
        Cookies.set("expiresAt", expiresAt);
      }


}
const auth0Client = new Auth0();
export default auth0Client;


callback.js
import React from "react" 
import auth0Client from "./auth0"
import {withRouter} from "next/router"

 class Callback extends React.Component{
    async componentDidMount(){
        await auth0Client.handleAuthentication()
        this.props.router.push('/')
    }
    render() {
        return (

                    <h1>verifying logging data</h1>

        )
    }
}

export default withRouter(Callback) //this allows us to use router

Auth0回调网址不匹配

5 个答案: