2016-07-24 69 views
1

我正在用auth0在反應應用程序中進行LinkedIn身份驗證。我在設置中設置了回撥URL中的localhost:3000/upload,在用戶登錄localhost:3000/login後跳轉,他們將重定向到localhost:3000/upload。但是,我總是得到這個錯誤:url localhost:3000/login不在回調網址列表中。爲什麼auth0希望返回到登錄後登錄的頁面?不是它應該是一些不同的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) 
     } 
    }) 
    } 
//.... 

回答

3

請確保兩兩件事:

1)。在您的反應應用程序代碼

responseType: 'code' 

2)。在Auth0儀表板的設置 - >允許的回調URL中,放置您的回調條目(本地主機:3000 /上傳) - 我認爲您已完成,但以防萬一。

enter image description here

讓我知道如果你仍然有問題。

+0

嘿,謝謝你的回答。我做了你的建議,但它仍然指引我進行身份驗證的相同網址。 –

+0

對於反應應用程序,您應該使用隱式授予流程......所以在這種情況下,請使用responseType = token並使用事件偵聽器,因爲您的操作是我的建議。合理? – arcseldon

+0

@shangsunset - 你解決了嗎? – arcseldon

1

要在成功驗證後會重定向到一個不同的URL,你需要提供redirectUrl要鎖定,就像這樣:

//配置Auth0 常量選項= { allowedConnections:「LinkedIn」] , auth:{ responseType:'code', redirectUrl:'http://localhost:3000/upload' } };
this.lock =新Auth0Lock(的clientId,域選項)

(另請注意,responseType選項去auth下,不根據auth.params。)

如果你做的重定向,你將不會達到您在登錄頁面中定義的事件處理程序。您需要在目標頁面添加事件處理程序(並使用responseType:token)或在服務器代碼中處理認證結果(如果您要求responseType: code,通常會這樣做)。

0

確保在將URL粘貼到Auth0 Setting站點時,URL之間的逗號之間沒有特殊的隱藏字符或空格。我沒有意識到這個util我把每一個網址到Vim來檢查,看看有這樣的情況下