Auth0-jsカスタムログイン - 401未承認

Question

私はauth0 https://auth0.com/docs/quickstart/spa/react/02-custom-loginでこのReact Quickstartを試して、カスタムログインを実装しようとしています。私がログインしようとすると、401 Unauthorized Errorが発生します。サインアップしようとすると、同じアラートエラーが発生しますが、ユーザーは作成され、ホームページにリダイレクトされます。 Lock Widgetを使ってすべてうまく動作することを心に留めておいてください。しかし、私はカスタムログインでそれをやろうとします。

ここには、私が感じる最も関連性の高いAuthServiceコードがあります。 Loginコンポーネントは単にloginメソッドとsignupメソッドを呼び出します。

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

答えが得られたのかどうかわかりませんが、同じ問題が発生していました。バックエンドがJWTを正しくデコードできなかったためです。カスタムログインはRS256トークンで署名し、ロックはHS256で署名しているようです。バックエンドでこれらを別々にデコードする必要があります。

Here's a python example

Auth0.jsバージョン8は、認証トランザクションの間、IDトークンを検証します。 RS256アルゴリズムで署名されたトークンのみがクライアント側で検証できます。つまり、Auth0クライアントはRS256でトークンに署名するように構成する必要があります。詳細については、auth0.js移行ガイドを参照してください。