Auth0 콜백 URL 불일치

Question

반응 앱에서 auth0으로 LinkedIn 인증을하고 있습니다. 콜백 URL에 localhost:3000/upload을 설정하고 사용자가 localhost:3000/login에 로그인 한 후 호핑하면 localhost:3000/upload으로 리디렉션됩니다. 그러나, 나는 항상이 오류가 발생합니다 : url localhost: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) 
     } 
    }) 
    } 
//.... 

Answer 1

두 가지를 확인하십시오 :

1). 반응 앱 코드

responseType: 'code' 

2). Auth0 대시 보드의 설정 -> 허용 된 콜백 URL에서 콜백 항목 (localhost : 3000/upload)을 입력합니다.

여전히 문제가있는 경우 알려주세요.

Answer 2

성공적인 인증 후 다른 URL로 리디렉션을 유발하는, 당신은 다음과 같이 고정합니다 redirectUrl를 제공해야합니다

// 구성 Auth0 CONST 옵션 = { allowedConnections : [ '링크드 인'] , auth : { 응답 유형 : 'code', redirectUrl : 'http://localhost:3000/upload' } }}; 당신이 리디렉션을 할 경우
this.lock 새로운 Auth0Lock (클라이언트 ID, 도메인 옵션)

는

(또한 responseType 옵션이 없습니다 auth.params에서, auth 아래에 간다 것을 알 수 있습니다.)

, 당신은 도달하지 않습니다 = 로그인 페이지에서 정의한 이벤트 핸들러. 대상 페이지에 이벤트 처리기를 추가하거나 responseType:token을 사용하거나 서버 코드에서 인증 결과를 처리해야합니다 (이것은 responseType: code을 요청할 때 일반적으로 수행하게됩니다).

Answer 3

URL을 쉼표로 붙여 넣을 때 Auth0 Setting 사이트에 쉼표 사이에 공백이 없어야합니다. 나는이 유틸리티에 대해 몰랐다. 나는 모든 URL을 Vim에 넣어 위의 경우를 확인했다.