web-dev-qa-db-fra.com

AngularJS + OAuth

J'essaie d'écrire une solution de connexion pour mon application angulaire, 
Cela signifie permettre à l'utilisateur de se connecter via Facebok/Google/Twitter ou de s'inscrire normalement. 
J'ai trouvé Angular-OAuth être utile, mais cela ne semblait pas fonctionner avec Facebook (ou Twitter).

Quelqu'un sait-il d'une solution complète pour cela?

angularjsoauth
48
Asaf

Jetez un oeil à oauth.io

  • Mise en œuvre facile en Javascript
  • 80+ fournisseurs OAuth
  • Rapide et sécurisé
40
Thibaud Arnault

Voici un exemple simple utilisant juste des redirections avec js angulaire

Voici comment rediriger vers l'authentification

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

Voici comment gérer la redirection après authentification

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

Informations plus complètes ici http://anandsekar.github.io/oauth2-with-angularjs/

52
Anand Rajasekar

Il existe une alternative Free-Open-Source au freemium oauth.io : hello.js

13
Pedro Montoto García

Regardez le Satellizer project sur Github. Je commence tout juste avec, ça semble prometteur.

Il utilise des jetons Web JSON et permet la connexion avec: email, mot de passe, Facebook, Twitter, Google et tout autre fournisseur OAuth 1.0/2.0.

Le code côté client fonctionne comme prévu, vous devrez implémenter le côté serveur vous-même. Il existe de bonnes descriptions des flux de travail et des exemples de code pour de nombreux langages côté serveur.

6
Sunil D.

Je voulais juste ajouter quelques commentaires et un exemple de code angulaire pour la solution OAuth.io susmentionnée .

  • Il fournit un moyen cohérent de se connecter à n’importe quel fournisseur OAuth, que ce soit Facebook, Twitter, etc., c’est-à-dire qu’il cache toutes les particularités de la mise en œuvre de chaque fournisseur OAuth.
  • Il vous permet d'implémenter des boutons sociaux OAuth en utilisant uniquement du code frontal.

Le code frontal est également assez simple. J'ai pris ceci de coderwall .

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