20

我在反应应用程序中使用 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

6 回答 6

18

请确保两件事：

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

 responseType: 'code'

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

在此处输入图像描述

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

于 2016-07-25T10:15:07.467 回答
3

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

于 2018-03-10T05:49:27.227 回答
2

我有类似的问题“回调 URL 不匹配”，并通过使用受信任的证书在 https 上运行应用程序来解决它。

这是来自 Auth0 应用程序设置部分的关于回调 URL 的片段，上面写着“确保指定协议 (https://)，否则在某些情况下回调可能会失败。”

在此处输入图像描述

于 2021-01-14T12:18:20.960 回答
2

要在成功验证后重定向到不同的 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）。

于 2016-09-06T13:26:22.423 回答
1

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

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

        <Auth0Provider
        domain={domain}
        clientId={clientId}
        redirectUri={uri}>
于 2020-09-29T10:22:35.500 回答
0

您应该在 auth0 设置中设置回调 Url 的原因，因为任何人都可以使用您的客户端 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
于 2019-10-13T18:45:15.960 回答