Express-Server mit Pass-twitchtv kann nicht die Anmeldung von meinem angularjs Client arbeiten

Question

Ich bin mir absolut sicher, dass ich hier etwas Grundlegendes vermisse, aber ich bin verloren, was als nächstes zu versuchen.

Ich habe eine ausdrückliche Anwendung Pass TwitchTV auf der Grundlage der Beispielanwendung hier gebaut: https://github.com/johnkernke/passport-twitchtv/tree/master/examples/login

Wenn ich meinen Browser und wechseln Sie zu http://localhost:3000/auth/twitchtv ich erfolgreich weitergeleitet Twitch ein Login durchzuführen, hier ist der Ausschnitt aus der Express-Code:

app.get('/auth/twitchtv', 
    passport.authenticate('twitchtv', {scope: [ 'user_read' ]}), 
    function(req, res){ 

    }); 

app.get('/auth/twitchtv/callback', 
    passport.authenticate('twitchtv', { failureRedirect: "/" }), 
    function(req, res) { 
    // Successful authentication, redirect home. 
    //DEBUG 
    console.log('Hit the auth callback'); 
    res.redirect("/"); 
}); 

Mein eigentliches Problem ist, dass ich die Anmeldung durchzuführen versuchen von einer AngularJS Anwendung aus dem Express-Server bedient, habe ich eine Taste, die ich mag, dass die Anmeldung jedoch drücken es nicht zu erlauben, Arbeit, hier ist ein Code:

Anmeldung Ansicht:

<!-- login.html --> 
    <div class="jumbotron text-center"> 
     <h1>Login</h1> 

     <p>{{ message }}</p> 
    </div> 
    <div class="container-fluid"> 
     <div ng-controller="twitchLoginController" class="row"> 
     <button ng-click="twitchLogin()" class="btn btn-default mybutton" > 
      <img src="images/twitchconnect.png" img-responsive /> 
     </button> 
     </div> 
    </div> 

Controller-Code:

myApp.controller('twitchLoginController', function($scope, $http, $location) { 

     $scope.twitchLogin = function() { 
      console.log("in the login call"); 
      var response = $http.get('/auth/twitchtv'); 
      //$location.url('/auth/twitchtv'); 
      console.log(response); 
      response.success(function(data, status, headers, config) { 
       $scope.message = 'ok'; 
      }); 

      response.error(function(data, status, headers, config) { 
       $scope.message = status; 
      }) 
     } 
    }); 

Wie man hier sehen kann Ich versuche, ein GET auf die URL zu tun, das ist, was ich glaube, ich brauche zu tun, aber wann immer ich auf die Schaltfläche klicken ich einen Fehler im Browser erhalten:

XMLHttpRequest kann nicht geladen werden https (entfernt: //) api.twitch.tv/kraken/oauth2/authorize?response_type=code & redirect_u ... tchtv% 2Fcallback & scope = user_read & client_id = ire1vyl32phgrfofwab5uebs3er8htr. Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden. Origin 'http (removed: //) localhost: 3000' ist daher nicht erlaubt.

Wie Sie aus meinem Code sehen können, habe ich gerade versucht, die URL auf/auth/twitch mit $ location zu setzen, aber wenn ich das mache passiert überhaupt nichts, kein Fehler, auch kein Login.

So bin ich stecken und ich weiß nicht, ob es weil mein Code falsch ist oder ob ich ein grundlegendes Missverständnis habe, was ich versuche zu erreichen, weiß ich zumindest, dass meine Server-Code funktioniert und so Ich habe mich auf das eckige Stück konzentriert.

Ich habe folgend in meinem Winkel Code versucht:

$httpProvider.defaults.useXDomain = true; 
delete $httpProvider.defaults.headers.common['X-Requested-With']; 

CORS Damit aber das scheint nicht geholfen zu haben.

Irgendwelche Ideen?

EDIT

Ich habe diese auf meine Anmeldung Ansicht:

<!-- login.html --> 
    <div class="jumbotron text-center"> 
     <h1>Login</h1> 

     <p>{{ message }}</p> 
    </div> 
    <div class="container-fluid"> 
     <div ng-controller="twitchLoginController" class="row"> 
     <button ng-click="twitchLogin()" class="btn btn-default mybutton" > 
      <img src="images/twitchconnect.png" img-responsive /> 
     </button> 

-------><a target="_self" href="/auth/twitchtv">Login</a> 
     </div> 
    </div> 

Und wenn ich auf den Link klicken Sie auf die Login ausgeführt wird, funktioniert nur mit _self aktiviert.Das scheint also die einzige Lösung zu sein, aus meiner Sicht ist das in Ordnung, aber kann jemand bestätigen, dass dies das ist, was man dazu bringen sollte, damit ich arbeite, also weiß ich, dass ich nichts Dummes oder Unsicheres mache :-)

Dank Adrian

Answer 1

Kurze Antwort: Ihr Client /auth/twitchtv Umleiten ist die richtige Lösung. Sie sollten diese in der Lage sein, mit Ihrer Taste durch einfaches Hinzufügen zu erreichen:

$scope.twitchLogin = function() { 
    $window.location.href = '/auth/twitchtv'; 
    // inject $window  
} 

Als this answer beschreibt $location.url('/auth/twitchtv'); hier nicht funktioniert, wie es verwendet wird, innerhalb eines SPA zu bleiben.

Das Problem mit dem Original-GET-Anforderung war die folgende:

Ihre Schnellstraße /auth/twitchtv mit einer Umleitungsantwort reagierten auf Twitch. Wenn angulars $http eine solche Antwort empfängt, startet sie automatisch eine neue GET-Anfrage an die URL, die in der Antwort angegeben ist (soweit so gut).

Allerdings erlaubt Twitch nicht den Zugriff auf diese Ressource wie folgt, es möchte, dass Sie den Webbrowser auf diese URL umleiten, nicht XMLHttpRequest hinter den Kulissen zu starten (was sinnvoll ist, wenn Sie bedenken, dass Twitch mit seiner antworten muss Authentifizierungsseite).

Dies ist auch der Grund, warum CORS nicht funktionierte, auch nachdem Sie es von Ihrer Seite aktiviert haben - Twitch war derjenige, der diese Art des Zugriffs verbot.

Hoffe, das hilft!