2016-10-24 18 views
1

Auth0を使用してユーザー認証を作成しようとしています。自分のWebサイトに記載されているガイドに従ってきましたが、コンソールにログされたメッセージで認証が失敗し、クロスオリジンリソース共有が有効になっていないことがわかりました。Angular2認証でAuth0とのクロスオリジンリソース共有を有効にする

マイauth.service.tsクラス:Access-Control-Allow-Origin: *.auth0.com*、しかしどこ私はこれを追加するために、どのような形式で入力する必要があります必要があります:

export class AuthService { 
    // Configure Auth0 
    auth0 = new Auth0({ 
    domain: myConfig.domain, 
    clientID: myConfig.clientID, 
    callbackOnLocationHash: true, 
    callbackURL: myConfig.callbackURL, 
    }); 

    constructor(private router: Router) { 
    var result = this.auth0.parseHash(window.location.hash); 

    if (result && result.idToken) { 
     localStorage.setItem('id_token', result.idToken); 
     this.router.navigate(['/dashboard']); 
    } else if (result && result.error) { 
     alert('error: ' + result.error); 
    } 
    } 

    public login(username: string, password: string) { 
    this.auth0.login({ 
     connection: 'Username-Password-Authentication', 
     responseType: 'token', 
     email: username, 
     password: password, 
    }, function(err: any) { if (err) alert("something went wrong: " + err.message); }); 
    }; 
} 

私は多分、ヘッダに何かを追加する必要があると考えていますか?ブロックされた

クロスオリジン・リクエスト:

完全なエラーメッセージ

は以下のとおりです。同一生成元ポリシーが https://[mydomain]/usernamepassword/loginでリモートリソースを読み込む禁止します。 (理由:CORSヘッダー「Access-Control-Allow-Origin」がありません)。 HTTPステータスコード:400

私は現在、 'lite' Angular2開発サーバーライブラリ/プロセスを使用しています。

ドメイン名は次の形式で、Auth0ダッシュボードを使用してコールバックし、CORSのホワイトリストの両方に追加されました:

http://*.[mydomain]* 

私はリストにhttps://*.[mydomain]*を追加しようとhttps://への自動リダイレクトを設定しますこれは役立つだろうかどうかを確認するために、しかし、ウェブサイトがHTTPSを介してアクセスし、私はそうしようとすると、次のエラーがスローされて好きしていないようです:

セキュアな接続が

01を失敗しました。

ページがロードされている間にwww。[mydomain]:3004への接続が中断されました。

私はSSL証明書を持っていない可能性がありますか?

+0

エラーメッセージは何ですか?サーバーがCORSヘッダーで応答するように構成されていますか? 'Access-Control-Allow-Origin'ヘッダは、サーバから返され、クライアントから送られないものです。 –

+1

@NitzanTomerはおそらくないですか?それはUbuntu 16.04 LTSのLinodeであり、CORSを有効にするための具体的な作業は行っていないので、有効にしていないと思います...?私は今、Angular2のドキュメントからライトサーバプロセスを使用しています... –

+0

Angular2開発モードで[Set Access-Control-Allow-Originヘッダー]の可能な複製(http://stackoverflow.com/questions/37767093/)設定アクセス制御可原点ヘッダ角2展開モード) – msanford

答えて

2

あなたが取得しているエラーがAuth0のAPI(https://[mydomain]/usernamepassword/login)からですので、問題は、それがCORSがあなたない限りを要求できませんセキュリティによるAuth0サーバー、サーバーない適切なCORSヘッダを返すですされていません起源のホワイトリストを設定してください。

これは、ブラウザ内からAuth0 APIを操作するには、クライアントアプリケーションの起点を認識し、動作させるために必要なCORSヘッダを追加するように設定する必要があることを意味します。

Auth0ダッシュボードのclient application settingsで利用可能なAllowed Origins(CORS)の設定に正しい起点を追加することで、これを行うことができます。

+0

ああ。私はAuth0を使用して、適切なバックエンドを実装する過程でウェブサイトユーザーがユーザーアカウントを作成できるようにしようとしていました。 Auth0はおそらくこれに対する正しい解決策ではありませんか?私のサイトにログインして使用アカウントを作成するために、すべてのユーザーがクライアントブラウザの設定を変更するとは思えません... –

+0

Auth0は認証/承認ロジックを委任して、あなたのアプリのビジネス価値。変更について:**ユーザークライアントのブラウザ設定ではありません**;あなたと**ただあなた**は[Auth0ダッシュボード](https://manage.auth0.com/#/)のクライアントアプリケーションの設定可能なオリジン(CORS)を更新する必要があります。また、私が答えに追加したリンクをチェックしてください。 –

+0

ドメインがAuth0ダッシュボードのCORSリストに追加されたことを確認しましたが、私はまだ同じエラーが発生しています。あなたの答えの中のリンクを見に行って、私がそこから何かを見つけ出すことができるかどうかを見てください。 –

1

Joaoが示唆しているように、クライアント設定のCORS設定にURLを追加しても、この問題は解決している可能性があります。正しいクライアントIDを使用していることを確認してください。クイックスタートからコードをコピーすると、デフォルトの「デフォルトのアプリケーション」クライアントIDになりますので、CORS設定を保持するために正しいクライアントのIDに変更する必要があります

関連する問題