angular-oauth/angular-oauth

Client-side (implicit grant) OAuth 2.0 authorization flow for AngularJS.

About

This project provides an implementation of a client-side (implicit grant) OAuth 2.0 authorization flow.

Features

• Retrieval of a user's token using popups using the promise-based Token.getTokenByPopup() function, that presents the user with the authorization endpoint and returns the token asynchronously.

  (Implementation detail: A successfully obtained access token is handed back to the parent window via window.opener.postMessage and the source and origin of the sending window are verified by the parent.)

• Access token verification using Token.verifyAsync, by requesting token information from the authorization server, verifying that the token is valid and that it was generated by the current client (to prevent the confused deputy problem).

• Storage and retrieval of tokens via the Token.get and Token.set calls in the Token service.

• A preconfigured module for use with Google authentication. Check out the example/js/demo.js and example/demo.html for an example.

Demo

Online

Check out the demo by going to example/demo.html via rawhithub.com.

Local

1. Run a static file server in the root directory (the one this file is in) on localhost:9000. Python 2.X: python -m SimpleHTTPServer 9000.
2. Navigate to http://localhost:9000/example/demo.html.

Google authentication quickstart

1. Create a project in the Google APIs Console. In the "API Access" tab of the console, create an OAuth 2.0 client ID. When prompted, set the following settings:

   • Application Type: Web application.
   • Site or Hostname: The location at which you'll host these files.

2. Edit authorized redirect URIs and JavaScript origins to match where you will be hosting your site. For example, let's say you're planning to host your site at https://example.com/. In that case, you might upload the angular-oauth code to https://example.com/angular-oauth/. You would then set your client ID settings accordingly:

   • Authorized Redirect URIs: https://example.com/angular-oauth/oauth2callback.html
   • Authorized JavaScript Origins: https://example.com

3. Add googleOauth as a dependency to your app.

4. Configure the TokenProvider with the following minimal settings:

   • clientId: (Required.) The client ID of your application, as given by your authentication server.
   • redirectUri: (Required.) The URI to redirect back to. You normally have to configure your authorization server to ensure that it redirects back to this point.
   • scopes: (Optional.) A list of scope tokens to describe the scope of the access request (more concretely, what information will be requested.) The scopes available for a given service are probably documented by the authorization server.

   For example:

   config(function(TokenProvider) {
     TokenProvider.extendConfig({
       clientId: '191261111313.apps.googleusercontent.com',
       redirectUri: 'http://localhost:9000/oauth2callback.html',
       scopes: ["https://www.googleapis.com/auth/userinfo.email"]
     });
   }).
   

5. After doing this, you can inject the Token service and enjoy its methods:

   • Request a token with Token.getTokenByPopup(), which returns a promise that resolves to an object with an access_token item.
   • Verify that this is a valid token for your application by calling Token.verifyAsync(accessToken), which returns a promise that resolves to the response of Google's TokenInfo service.
   • If you're able to verify the token, persist it in the browser using Token.set(accessToken).
   • Then when you need that token (e.g., to authorize a web service call), call Token.get().

Roadmap

This is a work in progress! Don't use it in production. Here's some of what's yet to be done:

• Security. While some mechanisms have been implemented to prevent token stealing, the project needs a systematic review of weaknesses. Some things to look out for are outlined in the OAuth specification, which also links to other resources.

  I also don't have intimate knowledge of the browser security model. The isolation of localStorage.

• Testing. Still lacking some confidence in this area, but soon enough I'll need to do something about the lack of tests.

• Customization. Users may not always want to use popups. Perhaps taking over the entire browser window is more appropriate in some cases. (The reason for focusing on popup support is that tokens may expire, and ideally reauthentication should be able to occur without interrupting the state of the application.)

• Browser compatibility and fault-tolerance.

  • I've tested all of one browser (Chrome).
  • The library currently depends on localStorage and doesn't take alternative measures if it's not available.
  • Unexpected behaviors are not handled gracefully. For example, if the user opens the callback page, they aren't presented with a friendly message explaining what might have happened. Ideally, the popup would notify the parent when it's closed (if that's even possible when the site in the popup has a different origin.)

• It would be nice to support more authorization servers out of the box.

angular-oauth's Issues

$rootScope updating only with a one-cycle lag

I noticed this problem both in my own installation and in the online demo. Figured out that it occurs because the $rootScope in which the GoogleTokenVerifier function is wrapped (in googleOAuth.js) is not the same $rootScope as that of the window from which the popup is called. I verified this by setting a variable on $rootScope in the calling window and noticing that this variable was undefined inside GoogleTokenVerifier().

Everything works fine once I strip the GoogleTokenVerifier function of its $injector.invoke wrapping and move it inside the $get function in angularOAuth.js. Not sure how to achieve this same result while retaining a separate googleOauth module. Brighter minds, I'm sure, can work that one out...

The problem I've identified, by the way, is a side-effect of the one causing Issue #1. VerifyAsync is called but its deferred.resolve function is not called (until the next cycle) because the $apply() function in which the GoogleTokenVerifier function is wrapped is pointing to the wrong $rootScope.

Licencing

Hello!

As I didn't see any hints to licences regarding this code, I'd like to ask a question. May I use parts of this code in my closed source project?

Farewell

Cannot verify token

Hi,

I would like to thank you for this project, really helpful !

I face a problem to verify my token.This part of your code is never run in the verifyAsync then method.

            Token.verifyAsync(params.access_token).then(function () {

                $log.debug('VERIFY access_token: ' + params.access_token);

                $scope.accessToken = params.access_token;
                $scope.expiresIn = params.expires_in;

                Token.set(params.access_token);
            });

The promise seems to never be resolved... but in your code I see that you try to resolve the promise. I don't understand why.

github oauth support?

Any plan to support github api oauth2?

The requested URL was not found on this server

hello,

I click on the Authenticate button and then i select my google account but then i get
The requested URL was not found on this server

The URL looks like http://localhost/oauth2callback.html#access_token=...

The config has redirectUri: 'http://localhost/oauth2callback.html'

Any ideas what i have to change to make it work?How can i authenticate then go back to the app?

Thanks

bower can't install package

Please create a tag in repo:

bower ENORESTARGET No tag found that was able to satisfy ~0.0.0
Additional error details:
No versions found in git://github.com/enginous/angular-oauth.git

Working with angularjs v1.2?

When using the service in a set up just like the demo but using angularjs 1.2.7 with routes, I don't get a post from the popup window. Does this add on only work with 1.1.4 of angularjs?

The demo is broken

When I try to authenticate on the demo, the Google authentication popup opens with a 400 error:

Error: redirect_uri_mismatch

Application: angular-oauth demo

You can email the developer of this application at: [email protected]

The redirect URI in the request: https://rawgit.com/enginous/angular-oauth/master/src/oauth2callback.html did not match a registered redirect URI

I think implies that the application isn't registered correctly with google apps.

popup window message event wrapped inside jquery event

I couldn't get my installation to work at first. Dug around a bit and realized it was because in my case the message event sent by window.opener.postMessage was received back at my main app as a jquery event, with the actual message stored at event.originalEvent. I'm not sure why this would be since I'm following the example code pretty closely. Maybe because my client is built with ui-bootstrap? In any case the fix is an easy one at my end: in the function bound to the calling window's message event, just alter event to event.originalEvent. But you may want to adjust at your end to help out other users encountering this problem.

Get refresh token?

Is possible to get a refresh token?

missing 'main' attribute in component.js

Hi,

Just wanted to notice that component.js is missing a main entry so that bower/component can work with the package:

10 Nov 14:59:54 - error: [Error: Component JSON file "/home/glibersat/Source/imagination.social/bower_components/angular-oauth/.bower.json" must have `main` property. See https://github.com/paulmillr/read-components#README]

If you have a bit of time to add it, that'd be really helpful!

Thanks,

Guillaume