Angular 2アプリケーションでのコールバックURLの不一致の取得

Question

私はAuth0を使用して、Google、Facebookなどからユーザーを認証します。これは、URLがAuth0のホワイトリストにあるコールバックURLのリストにある間にログインをクリックすると完全に機能します。

しかし、私のWebアプリケーションには任意の数の異なるURLを割り当てることができます。したがって、いくつかの許可されたURLで簡単なホワイトリストを作成することはできません。

ログインは、ログインしたときと同じURLに常にリダイレクトしようとします。このURLは、ほとんどの場合、許可されたURLのリストには含まれません。

私は上記の設定のバリエーションのすべての種類を試してみましたが、私は唯一のこれらのもののようなエラーを取得：

URL「https://x.com/posts/gif/hot/1は」 "許可コールバックURLのリスト
URLではありませんhttps://x.com/posts/world/new/1がhttps://x.com/posts/nature/hot/6がhttps://x.com/posts/gaming/hot/3「許可されたコールバックURLを
URLのリストにありません」「許可するコールバックURLを
URLのリストにありません」「許さコールバックURLのリストにない

ロックの設定に関連するコード：

options = { 
    auth: { 
     callbackURL: 'https://x.com', 
     // redirectUrl: 'https://x.com', 
     responseType: 'token', 
     // sso: true, 
     // redirect: true, 
     params: { 
      scope: 'openid user_id name nickname email picture' 
     } 
    } 
}; 

// Configure Auth0 
lock = new Auth0Lock('x', 'x.auth0.com', this.options); 

constructor(private _router: Router) { 
    this.userProfile = JSON.parse(localStorage.getItem('profile')); 

    // Add callback for the Lock `authenticated` event 
    this.lock.on('authenticated', (authResult) => { 
     localStorage.setItem('id_token', authResult.idToken); 

     // Fetch profile information 
     this.lock.getProfile(authResult.idToken, (error, profile) => { 
      if (error) { 
       throw new Error(error); 
      } 
     }); 
    }); 
}; 

ログイン方法：

public login() { 
    // Call the show method to display the widget. 
    this.lock.show({ 
     callbackUrl: 'https://x.com', 
     state: this._router.url 
    }); 
}; 

Answer 1

私はあなたがロックの最新バージョン（Lock 10）を使用して、それはそこケースの場合だと仮定していますあなたが含まれているコードのいくつかの問題です：

• URL to which Auth0 will redirect toユーザーが完了した後電子認証ステップがauth: { redirectUrl: '...' }で指定されていて、その行にコメントが付いていて、代わりにコードが間違ってcallbackURLを使用しています。
• According to the docsでは、showメソッドは引数をとらなくなりました。
• ロックバージョンとは無関係に、state parameterは、CSRF攻撃を軽減するために使用する必要があります。そのため、コンテキスト情報を渡すために排他的に使用することは危険です。あなたはredirectUrlがあなたをコメントしている考える

---

はおそらくもそれを試してみました。そのパラメータを使用するときに同じ動作をしましたか？あなたが達成しようとしている何のために必要な設定を持っていることによって達成されなければならない文書に基づいて

：

options = { 
    auth: { 
     redirectUrl: 'https://example.com/login/callback', 
     responseType: 'token', 
     params: { 
      state: '[your_state_value]', 
      scope: 'openid user_id name nickname email picture' 
     } 
    } 
}; 

 

public login() { 
    // Call the show method to display the widget. 
    this.lock.show(); 
};