AngularJS + OAuth

问题:

I'm trying to write a login solution for my Angular App,
This means to allow the user to connect via Facebok/Google/Twitter or Register normally.
I found Angular-OAuth to be useful, but it didn't seem to work with Facebook (or Twitter).

Anyone knows of an all-inclusive solution for this?

回答1:

Take a look at oauth.io

• Easy implementation in Javascript
• 80+ OAuth providers
• Fast & secure

回答2:

Here is a simple example using just redirects with angular js

Here is how to redirect to authentication

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

Here is how to handle the redirect after authentication

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

More complete information here http://anandsekar.github.io/oauth2-with-angularjs/

回答3:

There is a Free-Open-Source alternative to the freemium oauth.io: hello.js

回答4:

Have a look at the Satellizer project on Github. I'm just getting started with it, it seems promising.

It uses JSON Web Tokens, and allows login with: email+password, Facebook, Twitter, Google, and any other OAuth 1.0/2.0 provider.

The client side code works out the box, you'll have to implement the server side yourself. There are good descriptions of the work flows and code examples for many server side languages.

回答5:

Just wanted to add some comment and sample Angular code for the OAuth.io solution mentioned above. As the founder stated, it is a paid service but it has 2 main benefits I believe:

• It provides a consistent way to connect to any OAuth provider be it Facebook, Twitter, etc., i.e.,it hides all the peculiarities of each OAuth provider implementation.
• It enables you implement OAuth social buttons using only front-end code.

The front-end code is also rather simple. I took this from 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);
      });
    });
  }
}