it-swarm.com.de

AngularJS + OAuth

Ich versuche, eine Login-Lösung für meine Angular App zu schreiben. 
Dies bedeutet, dass der Benutzer über Facebok/Google/Twitter eine Verbindung herstellen oder normal registrieren kann. 
Ich fand Angular-OAuth als nützlich, aber es schien nicht mit Facebook (oder Twitter) zu funktionieren.

Wer kennt dafür eine Komplettlösung?

48
Asaf

Werfen Sie einen Blick auf oauth.io

  • Einfache Implementierung in Javascript
  • 80+ OAuth-Anbieter
  • Schnell und sicher
40
Thibaud Arnault

Hier ist ein einfaches Beispiel, das nur Umleitungen mit dem Winkel js verwendet

So leiten Sie zur Authentifizierung um

angular.module('angularoauthexampleApp')
  .controller('MainCtrl', function ($scope) {
    $scope.login=function() {
        var client_id="your client id";
        var scope="email";
        var redirect_uri="http://localhost:9000";
        var response_type="token";
        var url="https://accounts.google.com/o/oauth2/auth?scope="+scope+"&client_id="+client_id+"&redirect_uri="+redirect_uri+
        "&response_type="+response_type;
        window.location.replace(url);
    };
  });

So behandeln Sie die Weiterleitung nach der Authentifizierung

angular
  .module('angularoauthexampleApp', [
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/access_token=:accessToken', {
        template: '',
        controller: function ($location,$rootScope) {
          var hash = $location.path().substr(1);

          var splitted = hash.split('&');
          var params = {};

          for (var i = 0; i < splitted.length; i++) {
            var param  = splitted[i].split('=');
            var key    = param[0];
            var value  = param[1];
            params[key] = value;
            $rootScope.accesstoken=params;
          }
          $location.path("/about");
        }
      })
  });

Weitere Informationen finden Sie hier http://anandsekar.github.io/oauth2-with-angularjs/

52
Anand Rajasekar

Es gibt eine kostenlose Open-Source-Alternative zum Freemium oauth.io : hello.js

13

Schauen Sie sich das Satellizer - Projekt auf Github an. Ich fange gerade erst damit an, es scheint vielversprechend.

Es verwendet JSON-Web-Token und ermöglicht den Login mit: E-Mail + Passwort, Facebook, Twitter, Google und jedem anderen OAuth 1.0/2.0-Anbieter.

Der clientseitige Code funktioniert sofort, Sie müssen die Serverseite selbst implementieren. Es gibt gute Beschreibungen der Arbeitsabläufe und Codebeispiele für viele serverseitige Sprachen.

6
Sunil D.

Ich wollte nur einen Kommentar und ein Beispiel für den Angular-Code für die oben erwähnte OAuth.io -Lösung hinzufügen .. Wie der Gründer feststellte, handelt es sich um eine kostenpflichtige Dienstleistung, die jedoch meiner Meinung nach zwei Hauptvorteile bietet:

  • Es bietet eine konsistente Möglichkeit, eine Verbindung zu einem beliebigen OAuth-Anbieter herzustellen, z. B. Facebook, Twitter usw., d. H. Es verdeckt alle Besonderheiten der einzelnen OAuth-Anbieterimplementierungen.
  • Sie können OAuth-Social-Buttons nur mit Front-End-Code implementieren.

Der Front-End-Code ist auch ziemlich einfach. Ich habe das von coderwall genommen.

import {Component, OnInit} from '@angular/core';

function _window(): any {
  // return the global native browser window object
  return window;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  ngOnInit(): void {
    const oauthScript = document.createElement('script');
    oauthScript.src = 'https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js';

    document.body.appendChild(oauthScript);
  }

  handleClick(e) {
    // Prevents page reload
    e.preventDefault();

    // Initializes OAuth.io with API key
    // Sign-up an account to get one
    _window().OAuth.initialize('YOUR OAUTH.IO PUBLIC KEY');

    // Popup Github and ask for authorization
    _window().OAuth.popup('github').then((provider) => {

      // Prompts 'welcome' message with User's name on successful login
      // Check console logs for additional User info
      provider.me().then((data) => {
        console.log('data: ', data);
        alert('Welcome ' + data.name + '!');
      });

      // You can also call Github's API using .get()
      provider.get('/user').then((data) => {
        console.log('self data:', data);
      });
    });
  }
}
0
nethsix