2016-10-24 4 views
1

Ich versuche, Benutzerauthentifizierung über Auth0 zu erstellen. Ich habe den auf ihrer Website beschriebenen Leitfaden gelesen, aber ich finde, dass die Authentifizierung mit einer Nachricht fehlschlägt, die auf der Konsole protokolliert wird. Sie lautet . Die übergreifende Ressourcenfreigabe ist nicht aktiviert.Aktivieren der ursprungsübergreifenden Ressourcenfreigabe mit Auth0 für Angular2-Authentifizierung

Meine auth.service.ts Klasse:

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); }); 
    }; 
} 

Ich glaube, ich etwas zu den Header hinzufügen müssen, möglicherweise: Access-Control-Allow-Origin: *.auth0.com*, aber wo würde ich brauche dies und in welchem ​​Format hinzuzufügen, sollte es eingegeben werden?

Die vollständige Fehlermeldung ist folgende:

Cross-Origin-Anforderung blockiert: Die Same Origin Policy nicht zulässt, bei https://[mydomain]/usernamepassword/login die Remote-Ressource zu lesen. (Grund: CORS-Header 'Access-Control-Allow-Origin' fehlt). HTTP-Statuscode: 400.

Ich verwende derzeit die 'lite' Angular2-Entwicklungsserverbibliothek/-prozess.

Der Domain-Name wird in folgendem Format sowohl für den Rückruf und CORS weißen Listen mit dem Auth0 Armaturenbrett, hinzugefügt:

http://*.[mydomain]* 

ich versuchen würde, https://*.[mydomain]* auf die Liste und legen Sie eine automatische Umleitung auf https:// hinzufügen wenn dies würde zu sehen, helfen, aber die Website scheint nicht über https auf die zugegriffen zu mögen und führt den folgenden Fehler, wenn ich dies versuchen:

Sichere Verbindung

fehlgeschlagen

Die Verbindung zu www. [Mydomain]: 3004 wurde unterbrochen, während die Seite geladen wurde.

Vielleicht, weil ich kein SSL-Zertifikat habe ??

+0

Was ist die Fehlermeldung?Sind Sie sicher, dass Ihr Server für die Antwort mit CORS-Headern konfiguriert ist? Der Header "Access-Control-Allow-Origin" ist etwas, das vom Server zurückgegeben und nicht vom Client gesendet wird. –

+1

@NitzanTomer wahrscheinlich nicht? Es ist nur ein Linode mit Ubuntu 16.04 LTS und ich habe nichts spezielles getan, um CORS zu aktivieren, also denke ich, dass es nicht aktiviert ist ...? Ich verwende den Lite-Server-Prozess aus den Angular2-Dokumenten im Moment ... –

+0

Mögliches Duplikat von [Einstellung von Access-Control-Allow-Origin-Header im Angular2-Entwicklungsmodus] (http://stackoverflow.com/questions/37767093/ setting-access-control-allow-ursprung-header-in-angular2-development-mode) – msanford

Antwort

2

Der Fehler Sie ist von einer Auth0 API bekommen (https://[mydomain]/usernamepassword/login) so das Problem nicht Ihr Server nicht Rückgabe des entsprechenden CORS-Header ist, dann ist es der Auth0 Server, der aus Sicherheitsgründen nicht CORS erlauben es sei denn, Sie fordert Konfigurieren Sie eine Whitelist der Herkunft.

Das bedeutet, wenn Sie mit Auth0-APIs im Browser interagieren möchten, müssen Sie es so konfigurieren, dass es den Ursprung Ihrer Client-Anwendung erkennt und die notwendigen CORS-Header hinzufügt, damit es funktioniert.

Sie können dies tun, indem Sie die richtige Herkunft der erlaubt Origins (CORS) Einstellungen in der client application settings Ihrer Auth0-Dashboard hinzufügen.

+0

Ah. Ich habe versucht, Auth0 zu verwenden, um Website-Benutzern zu ermöglichen, Benutzerkonto zu erstellen, während ich gerade bin, ein ordnungsgemäßes Back-End zu implementieren. Ist Auth0 vielleicht nicht die richtige Lösung dafür? Natürlich kann ich nicht erwarten, dass alle Benutzer ihre Client-Browsereinstellungen ändern, um sich auf meiner Site anzumelden und Benutzerkonten zu erstellen ... –

+0

Auth0 ist die ideale Lösung, wenn Sie Ihre Authentifizierungs-/Autorisierungslogik delegieren möchten der Geschäftswert Ihrer Apps. Über die Änderung: ** Es ist nicht Benutzer-Client-Browser-Einstellungen **; Sie und ** nur Sie ** müssen die Einstellung Erlaubte Herkunft (CORS) der Client-Anwendung im [Auth0 Dashboard] (https://manage.auth0.com/#/) aktualisieren. Überprüfen Sie auch den Link, den ich in der Antwort hinzugefügt habe. –

+0

Ich stellte sicher, dass die Domäne der CORS-Liste im Auth0-Dashboard hinzugefügt wurde, aber ich bekomme immer noch den gleichen Fehler. Gehen Sie durch den Link in Ihrer Antwort, sehen Sie, ob ich etwas mehr von dort aus erarbeiten kann. –

1

Für alle, die dieses Problem möglicherweise noch haben, aber Ihre URL zu den CORS-Einstellungen in Ihren Clienteinstellungen hinzugefügt haben, wie Joao vorgeschlagen hat ... stellen Sie sicher, dass Ihre Konfiguration die richtige Client-ID verwendet. Wenn Sie den Code aus dem Schnellstart kopieren, wird standardmäßig die Client-ID "Standard-App" verwendet. Sie müssen also die korrekte Client-ID für Ihre CORS-Einstellungen ändern.

Verwandte Themen