ng2-handy-oauth

The Angular 2 component supports OAuth 2 implicit grant flow.

Live demo

Installation

npm install ng2-handy-oauth --save

Configuration

In your app add Ng2HandyOauthModule:

import { NgModule } from 'angular2/core';
import { Ng2HandyOauthModule } from 'ng2-handy-oauth';

@NgModule({
 bootstrap:    [ /*YourAppComponent*/ ],
 declarations: [ /*YourAppComponent*/ ],
 imports:      [ 
   BrowserModule, 
   Ng2HandyOauthModule.forRoot({
      providers: {
        google: {
          clientId: '<KEY>',
          redirectUrl: '<REDIRECT_URL>'
        },
        <PROVIDER>: {
          clientId: '<KEY>',
          redirectUrl: '<REDIRECT_URL>'
        }
      }
    }) 
 ]
})
export class AppModule {}

Obtaining OAuth 2 Keys

Google

• Doc
• Go to Google Developer Console
• Click "Credentials" (left menu)
• Click "Create credentials"
• Then select OAuth client ID
  • Application Type: Web Application
  • Authorized Javascript origins: http://example.com
  • Authorized redirect URI: http://example.com/callback

Facebook

• Doc
• Go to Facebook Developers
• Click "My Apps"
• Then click "Add a New App" in the navigation bar
• Enter Display Name, choose a category and click "Create App ID"
• Click on Settings (left menu), then click + Add Platform
• Select Website
• Enter http://example.com for Site URL

Foursquare

• Doc
• Go to Developers
• Click "My Apps"
• Click "Create a new app"
• Enter "Your app name", "Application Url", "Redirect Url"

Spotify

• Doc
• Go to Spotify Developers
• Click "My Apps"
• Enter "Application Name", "Application Description"
• In next step enter Website and Redirect URIs
• Prepare other components - Full example

vHost config

If you use PathLocationStrategy strategy you should configure vhost, example (nginx):

server {
      listen   80;
      server_name <ADDRESS>;

      root /var/www/<PATH>;
      index index.html index.htm;
      try_files $uri /$uri index.html;
}

Prepare other components - Full example

• Sign in - init implicit grant flow
• Callback - receive access_token
• Info - display user data
• Error - handling errors

ng2-handy-oauth is responsible for the "implicit grant flow", the view and the name of the components depend on you.