Wie wird die Authentifizierung mit Drittanbieter-Login in Angularjs gehandhabt?

Durch Ausführen des folgenden Codes erscheint das Authentifizierungsfenster und der Benutzer bestätigt die Anmeldung. Dieser Teil funktioniert. Nach dem Klicken auf die Schaltfläche "Autorisieren" wird auf die vorherige Registerkarte im selben Fenster umgeleitet (im Popup-Fenster nicht im übergeordneten Fenster). Wie kann ich dieses Popup-Fenster schließen, nachdem die Autorisierung vom Benutzer bestätigt wurde und wie kann ich den Autorisierungscode von der URL abrufen? Zum Beispiel im folgenden Code, der erste "console.log (event.url);" wird nicht ausgeführt.Wie wird die Authentifizierung mit Drittanbieter-Login in Angularjs gehandhabt?

var redirectUri = "http://localhost:8100/callback"; 

    var ref = window.open('https://www.example.com/oauth/authorize?client_id=' + clientID + '&redirect_uri=' + redirectUri + '&scope=write&response_type=code&approval_prompt=force', '_blank', 'location=no,clearsessioncache=yes,clearcache=yes'); 

    ref.addEventListener('loadstart', function (event) { // THIS IS NOT TRIGGERED FOR SOME REASON 

     console.log(event.url); 

     if ((event.url).indexOf(redirectUri) === 0) { 
      requestToken = (event.url).split("code=")[1]; 

      $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
      $http({ 
        method: "post", 
        url: "https://www.example.com/oauth/token", 
        data: "client_id=" + clientId + "&client_secret=" + clientSecret + "&code=" + requestToken 
       }) 
       .success(function (data) { 
        $scope.data = data; 
        console.log(event.url); 

       }) 
       .error(function (data, status) { 
        deferred.reject("Problem authenticating"); 
       }); 
     } 
    });

Im Folgenden finden Sie die in der Anwendung verwendeten Registerkarten. Wie kann ich nach einem Rückruf zu meinem tab.example zurückkehren?

Quelle

2016-07-20 Andrei

macht keinen Sinn, dass Sie 'console.log' nicht ausgeführt wurde, wenn der 'http-Post' darunter war. Manchmal wird ein Protokoll nicht im Konsolenfenster b/c des Kontexts angezeigt. Aber das heißt nicht, dass es nicht ausgeführt wurde. Versuchen Sie einen Unterbrechungspunkt an der 'console.log' –

im Grunde die Fenster-Handler nicht auslösen, nichts wird in diesem Handler ausgeführt. Ich habe versucht mit mehreren Handlern, nichts ist ausgelöst/ – Andrei

scheint es viel fehlt in Ihrem Code. Ich habe Probleme zu verstehen, was getan wurde und warum. Zum Beispiel, warum hören Sie für 'Loadstart' Event? Woher wird es emittiert? Erwarten Sie, dass Ihre App ein Ereignis aus einem anderen Fenster empfängt? –

Sie benötigen einen Dienst, um den 3rd Party Provider einzubinden, damit er auf das Ereignis Callback warten kann.

eine große Bibliothek Implementierung ich verwendet habe:

mrzmyr Angular-Google-Plus

Das Herz des Ansatzes ist die librarie im folgenden Code-Schnipsel:

 NgGooglePlus.prototype.login = function() { 
      deferred = $q.defer(); 
      gapi.auth.authorize({ 
       client_id: options.clientId, 
       scope: options.scopes, 
       immediate: false, 
       approval_prompt: "force", 
       max_auth_age: 0 
      }, this.handleAuthResult); 
      return deferred.promise; 
     };

Quelle

2016-07-23 17:59:58

Ich bin nicht mit der Integration von Google Plus, was ich betrachte, ist eine 3rd-Party-App, die es mit allem authentifiziert, was es will (egal, das Teil). – Andrei

Erklärung ist zu vage. Ist es deine eigene 3rd Party App? Ob es deins ist oder nicht, mehr Erklärung ist erforderlich. Die Besonderheiten der tatsächlichen Umsetzung. –

ehrlich gesagt, ob es Google, FB, Twitter oder Ihre eigene Implementierung ist, ist der Ansatz im Grunde der gleiche. Sie möchten den neuen Fensteraufruf in einen Service einschließen und eine Zusage oder einen Rückruf erfassen. Und der Anbieter muss einen Rückruf oder ein Versprechen zur Lösung haben. Ich bin mir nicht sicher, was du sonst noch willst. –

Wenn Sie wollen, Melden Sie sich bei Drittanbietern an, ich rate Ihnen, einen Login-Dienst zu erstellen, der die Anmeldung durchführt, indem er die guten Informationen an das Login-System sendet (andere API, Web-Applikat ion mit URL ...). Wie, dass Ihr Dienst kann Ereignis emittieren, die in Ihrer Anwendung verwendet werden kann, mehr Action

$scope.$broadcast('loadstart', { 
    someProp: 'send parameter to your event in the data object' 
}); 

$scope.$on('loadstart', function (event, data) { 
    //your function the tretment of the reply 
});

Wenn Sie vorwärts mit dem Ereignis gehen möchten, führen Sie diesen Link folgen: https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

in zurückzukehren Ihr tab.example Sie können den $ -Zustand im .success-Teil Ihrer http-Anfrage versuchen. Mit diesem Dienst können Sie auswählen, in welchem Status Sie sein möchten:

Quelle

2016-07-23 18:45:50

Wie wird die Authentifizierung mit Drittanbieter-Login in Angularjs gehandhabt?

Antwort

Verwandte Themen