Auth0-js自定義登錄 - 401未授權

Question

我一直在嘗試使用auth0 https://auth0.com/docs/quickstart/spa/react/02-custom-login上的此React快速入門，試圖實現自定義登錄。當我嘗試登錄時，我收到了401未授權錯誤，並且當我嘗試註冊時，出現相同的警報錯誤，但用戶確實已創建，並且我被重定向到主頁。請注意，使用鎖定小部件時，一切正常，但當我嘗試使用自定義登錄時，它不會。

以下是我認爲最相關的AuthService代碼。 Login組件只需調用登錄和註冊方法。

export default class SocialAuthService extends EventEmitter { 
    constructor(clientId, domain) { 
    super() 
    // Configure Auth0 
    this.auth0 = new auth0.WebAuth({ 
     clientID: 'clientID', 
     domain: 'domain', 
     responseType: 'token id_token', 
     redirectUri: 'http://localhost:3000/login' 
    }) 

    this.login = this.login.bind(this) 
    this.signup = this.signup.bind(this) 
    this.loginWithGoogle = this.loginWithGoogle.bind(this) 
    this.loginWithTwitter = this.loginWithTwitter.bind(this) 
    this.loginWithFacebook = this.loginWithFacebook.bind(this) 
    } 

    login(username, password) { 
    this.auth0.client.login({ 
     realm: 'Username-Password-Authentication', 
     username, 
     password 
    }, (err, authResult) => { 
     if (err) { 
     alert('Error: ' + err.description) 
     return 
     } 
     if (authResult && authResult.idToken && authResult.accessToken) { 
     this.setToken(authResult.accessToken, authResult.idToken) 
     browserHistory.replace('/home') 
     } 
    }) 
    } 

    signup(email, password){ 
    this.auth0.redirect.signupAndLogin({ 
     connection: 'Username-Password-Authentication', 
     email, 
     password, 
    }, function(err) { 
     if (err) { 
     alert('Error: ' + err.description) 
     } 
    }) 
    } 

    parseHash(hash) { 
    this.auth0.parseHash({ hash }, (err, authResult) => { 
     if (authResult && authResult.accessToken && authResult.idToken) { 
     this.setToken(authResult.accessToken, authResult.idToken) 
     browserHistory.replace('/home') 
     this.auth0.client.userInfo(authResult.accessToken, (error, profile) => { 
      if (error) { 
      console.log('Error loading the Profile', error) 
      } else { 
      this.setProfile(profile) 
      } 
     }) 
     } else if (authResult && authResult.error) { 
     alert('Error: ' + authResult.error) 
     } 
    }) 
    } 

    loggedIn() { 
    // Checks if there is a saved token and it's still valid 
    const token = this.getToken() 
    return !!token && !isTokenExpired(token) 
    } 

    setToken(accessToken, idToken) { 
    // Saves user access token and ID token into local storage 
    localStorage.setItem('access_token', accessToken) 
    localStorage.setItem('id_token', idToken) 
    } 

    setProfile(profile) { 
    // Saves profile data to localStorage 
    localStorage.setItem('profile', JSON.stringify(profile)) 
    // Triggers profile_updated event to update the UI 
    this.emit('profile_updated', profile) 
    } 

    getProfile() { 
    // Retrieves the profile data from localStorage 
    const profile = localStorage.getItem('profile') 
    return profile ? JSON.parse(localStorage.profile) : {} 
    } 

    getToken() { 
    // Retrieves the user token from localStorage 
    return localStorage.getItem('id_token') 
    } 

    logout() { 
    // Clear user token and profile data from localStorage 
    localStorage.removeItem('id_token') 
    localStorage.removeItem('profile') 
    } 

    loginWithGoogle() { 
    this.auth0.authorize({ 
     connection: 'google-oauth2' 
    }) 
    } 

    loginWithTwitter() { 
    this.auth0.authorize({ 
     connection: 'twitter' 
    }) 
    } 

    loginWithFacebook() { 
    this.auth0.authorize({ 
     connection: 'facebook' 
    }) 
    } 

} 

這是錯誤：

Object 
code 
: 
"access_denied" 
description 
: 
"Unauthorized" 
original 
: 
Error: Unauthorized at Request.<anonymous> (http://localhost:3000/static/js/bundle.js:49311:20) at Request.Emitter.emit (http://localhost:3000/static/js/bundle.js:49954:21) at XMLHttpRequest.xhr.onreadystatechange (http://localhost:3000/static/js/bundle.js:49616:11) 
statusCode 
: 
401 
statusText 
: 
"Unauthorized" 

爲什麼我無法登錄任何想法？

Answer 1

不知道你是否有答案，但我遇到了同樣的問題，這是因爲後端無法正確解碼智威湯遜。自定義登錄標誌與RS256令牌似乎鎖定標誌與HS256。你必須在後端以不同的方式進行解碼。

Here's a python example

Auth0.js版本8中的認證的交易驗證ID的令牌。只有使用RS256算法簽名的令牌才能在客戶端進行驗證，這意味着您的Auth0客戶端必須配置爲使用RS256簽名令牌。有關更多詳細信息，請參閱auth0.js遷移指南。