Несоответствие URL обратного вызова Auth0

Пожалуйста, убедитесь в двух вещах:

1). В коде вашего реагирующего приложения

 responseType: 'code'

2). На панели управления Auth0 в разделе «Настройки» -> «Разрешенные URL-адреса обратного вызова» поместите запись обратного вызова (localhost: 3000 / upload) - что, я думаю, вы сделали, но на всякий случай.

Сообщите мне, если у вас все еще есть проблемы.

Чтобы вызвать перенаправление на другой URL-адрес после успешной аутентификации, вам необходимо указать redirectUrl для блокировки, например:

// Настроить Auth0 const options = {allowedConnections: ['linkedin'], auth: {responseType: 'code', redirectUrl: 'http://localhost:3000/upload '}};
this.lock = new Auth0Lock (clientId, домен, параметры)

(Также обратите внимание, что параметр responseType находится под auth, а не под auth.params.)

Если вы сделаете перенаправление, вы не достигнете обработчика событий, который вы определили на своей странице входа. Вам нужно будет либо добавить обработчик событий на целевой странице (и использовать responseType:token), либо обработать результаты аутентификации в коде вашего сервера (это то, что вы обычно будете делать, если запрашиваете responseType: code).

Убедитесь, что нет специальных скрытых символов или пробелов между запятыми между URL-адресами, когда вы вставляете его на сайт настроек Auth0. Я не знал об этой утилите, я помещал все URL-адреса в Vim, чтобы проверить и увидеть, что есть такие вышеупомянутые случаи

При вызове AuthProvider обязательно используйте тот же URL-адрес обратного вызова, что и в настройках Auth0:

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

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

У меня была аналогичная проблема несоответствия URL-адреса обратного вызова, и я решил ее, запустив приложение через https с доверенным сертификатом.

Вот фрагмент из раздела настроек приложений Auth0 об URL-адресе обратного вызова, в котором говорится: Обязательно укажите протокол (https: //), в противном случае обратный вызов может завершиться ошибкой в ​​некоторых случаях.

причина, по которой вы должны установить URL-адрес обратного вызова в настройках auth0, потому что любой может использовать ваш идентификатор клиента и отправить запрос в 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