개발 환경을위한 Auth0 콜백 리디렉션

Question

Auth0은 멋진 문서를 가지고 있으며, 때때로 1000 번 읽지 만 개인적으로 나에게도 의미가 없기 때문에 다른 사람과 비슷한 문제가 생길 수 있습니다.

뭘 원합니까? 나는 그것이 로컬 호스트에 개발자를 리디렉션 할

auth0 = new auth0.WebAuth({ 
    clientID: 'adscsdcascascascasdcsdac', 
    domain: 'webatom.auth0.com', 
    responseType: 'token id_token', 
    audience: 'https://api.webatom.com', 
    redirectUri: 'http://localhost:5000/callback',   
    scope: 'openid profile' 
}); 

:

II는 내가 auth0.WebAuth 객체가이처럼 보이는 컴파일 내 로컬 호스트 환경에서 로그인합니다.

프로덕션 환경 즉, 로그인 한 경우 (또는 사용자가 로그인 한 경우). jtrade.pro에서 jtrade.pro/callback으로 리디렉션되도록합니다. 물론 생산 버전의 객체는 (다른 리디렉션 URI를) 다음과 같습니다

auth0 = new auth0.WebAuth({ 
    clientID: 'adscsdcascascascasdcsdac', 
    domain: 'webatom.auth0.com', 
    responseType: 'token id_token', 
    audience: 'https://api.webatom.com', 
    redirectUri: 'http://jtrade.pro/callback',   
    scope: 'openid profile' 
}); 

는 지금까지 내가 이해, 당신이 그것을 할 방법 이잖아. uri를 전달하면 uri가 허용 목록에 있고 클라이언트 설정에서 쉼표로 구분 된 경우 필요한 페이지로 리디렉션됩니다. Beautifull, 화이트리스트에 쉼표로 구분되었습니다.

마지막 단계 인 호스팅 된 페이지.

var lock = new Auth0Lock(config.clientID, config.auth0Domain, { 
    auth: { 
    redirectUrl: config.callbackURL, 
    responseType: 'token', 
    params: config.internalOptions 
    }, 
    assetsUrl: config.assetsUrl, 
    allowedConnections: connection ? [connection] : null, 
    rememberLastLogin: !prompt, 
    language: language, 
    languageDictionary: languageDictionary, 
    theme: { 

    }, 
    prefill: loginHint ? { email: loginHint, username: loginHint } : null, 
    closable: false, 
}); 

리디렉션 URL은 지금까지 내가 이해로 인 화이트리스트로보고 제공된 URI 중 하나가 있는지하고 있는지 확인하여 사용자를 리디렉션 auth0 만드는 config.callbackURL로 설정됩니다.

그러나 이것은 발생하지 않습니다. Auth0은 사용자를 허용 된 사이트의 첫 번째 URI로 리디렉션합니다. 이 문제에 대한 적절한 해결책을 찾을 수 없습니다. 바라건대 누군가이 상황에 빠지기를 바랍니다.

Answer 1

위의 내용을 확인했는데 보이는 동작이 다릅니다. Auth0은 전달 된 redirectUri를 올바르게 사용합니다. 설정/구성에 문제가있는 경우 설정을 모두 다시 확인해야합니다.

클라이언트 응용 프로그램 (사용 상자의 샘플 반응) :

https://demo.auth0.com/login?client=zalZ1MxxxxxxxxxxxZ5xfZga&protocol=oauth2&redirect_uri=http://localhost:3000/callback&response_type=token id_token&scope=openid&audience=https://demo.auth0.com/userinfo&nonce=2OfVCpn-4Ka9k33h50Y5YjNgw8nsxE5B 

https://demo.auth0.com/login?client=zalZ1MxxxxxxxxxxxZ5xfZga&protocol=oauth2&redirect_uri=http://localhost:3001/callback&response_type=token id_token&scope=openid&audience=https://demo.auth0.com/userinfo&nonce=kDNsP5Sfp1M0ydJ57h7eG.S_sNkO7gRs 

:

auth0 = new auth0.WebAuth({ 
    domain: AUTH_CONFIG.domain, 
    clientID: AUTH_CONFIG.clientId, 
    redirectUri: AUTH_CONFIG.callbackUrl, 
    audience: `https://${AUTH_CONFIG.domain}/userinfo`, 
    responseType: 'token id_token', 
    scope: 'openid' 
    }); 

는 다음의 각 변환 아래, 연구 결과의 요점의 반복이다 기본 Auth0 HLP를 사용하면 다음을 갖게됩니다.

<script src="https://cdn.auth0.com/js/lock/10.18/lock.min.js"></script> 
    <script> 
    // Decode utf8 characters properly 
    var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@')))); 
    config.extraParams = config.extraParams || {}; 
    var connection = config.connection; 
    var prompt = config.prompt; 
    var languageDictionary; 
    var language; 

    if (config.dict && config.dict.signin && config.dict.signin.title) { 
     languageDictionary = { title: config.dict.signin.title }; 
    } else if (typeof config.dict === 'string') { 
     language = config.dict; 
    } 
    var loginHint = config.extraParams.login_hint; 

    var lock = new Auth0Lock(config.clientID, config.auth0Domain, { 
     auth: { 
     redirectUrl: config.callbackURL, 
     responseType: (config.internalOptions || {}).response_type || 
      config.callbackOnLocationHash ? 'token' : 'code', 
     params: config.internalOptions 
     }, 
     assetsUrl: config.assetsUrl, 
     allowedConnections: connection ? [connection] : null, 
     rememberLastLogin: !prompt, 
     language: language, 
     languageDictionary: languageDictionary, 
     theme: { 
     //logo:   'YOUR LOGO HERE', 
     //primaryColor: 'green' 
     }, 
     prefill: loginHint ? { email: loginHint, username: loginHint } : null, 
     closable: false, 
     // uncomment if you want small buttons for social providers 
     // socialButtonStyle: 'small' 
    }); 

    lock.show(); 
    </script> 

원래 콜백 URL (redirectUri)에 할당 된 포트에서 클라이언트를 올바르게 호출합니다.

Answer 2

문제는 사용자를/authorize 끝점으로 리디렉션하는 auth0.authorize() 메서드를 호출하는 대신 URL을 하드 코드하여 사용자를/login 끝점으로 리디렉션하고 매개 변수에 데이터를 포함시키지 않은 것입니다 (즉, URL 문자열 내부). 원하는 경우 메서드를 사용할 필요가 없으며 직접 문자열을 구성 할 수도 있습니다. 방법에 대한 전체 안내서는 here입니다.