47 votes

AngularJS + OAuth

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

Quelqu'un connaît-il une solution globale à ce problème ?

54voto

Anand Rajasekar Points 21

Voici un exemple simple utilisant uniquement des redirections avec angular js

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

Plus d'informations ici http://anandsekar.github.io/oauth2-with-angularjs/

10 votes

Pourquoi n'est-ce pas la réponse choisie ?

1 votes

Je suis d'accord, c'est la réponse la plus complète

0 votes

Comment les différentes parties de l'application obtiennent-elles que l'utilisateur est autorisé ?

40voto

Thibaud Arnault Points 902

Jetez un coup d'œil à oauth.io

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

0 votes

Est-ce toujours la meilleure solution pour les applications angulaires ?

5 votes

OAuth.io a un modèle freemium important (jusqu'à 1000 utilisateurs mensuels) et une version opensource disponible sur Github : github.com/oauth-io/oauthd

0 votes

Une idée sur la façon d'appeler twitter authorize au lieu de autenticate en utilisant Oauth.io ?

13voto

Il existe une alternative gratuite et ouverte au freemium. oauth.io : hello.js

6 votes

OAuth.io est également opensource avec son deamon OAuth : github.com/oauth-io/oauthd ;)

0 votes

Mais c'est seulement le fournisseur OAuth (serveur), pas le client js je pense.

2 votes

Tous les clients sont disponibles sur github : js , ios , Android , phonegap , flex , php , node.js et d'autres sont à venir). Vous pouvez les configurer pour qu'ils fonctionnent avec oauthd au lieu de oauth.io

6voto

Sunil D. Points 8955

Jetez un coup d'œil à la Satelliser sur Github. Je ne fais que commencer à l'utiliser, mais il semble prometteur.

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

Le code côté client est prêt à l'emploi, 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.

0voto

nethsix Points 438

Je voulais juste ajouter un commentaire et un exemple de code Angular pour l'élément suivant OAuth.io solution mentionnée ci-dessus. Comme le fondateur l'a indiqué, il s'agit d'un service payant mais il présente 2 avantages principaux je crois :

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

Le code frontal est également assez simple. Je l'ai pris 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);
      });
    });
  }
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X