Find the best way to define the CSS for the component. Probably the best way is to get specific CSS or to already load them into the main.css, but in this way it's a bit more difficult to personalize the component.

Right now we set different attributes in the oauth tag. It would be nice to have a Service that enable the configuaration, so that we can remove the attributes from the tag. Something like:

OAuth.config({ 
  // all params here 
})

Typically a purely client-side solution would only allow for 'implicit' flow since no client_secret is needed to get the access_token. Without going too far with this I was wondering how you are doing the authorization code flow without storing the client_secret in client side code or is the intention that the code be picked up by the server and the access token call be done server side?

In the timeout we got an "expired" event, but in the handler when we check AccessToken.expired() it returns false.
When we looked in the code, we found out that the timeout and ExpiredInterceptor defines expirety differently from AccessToken.expired() method.
ExpiredInterceptor Line 18:

var expired = function(token) {
    return (token && token.expires_at && new Date(token.expires_at) < new Date())
  };

AccessToken Line 52:

service.expired = function(){
        return (this.token && this.token.expires_at && this.token.expires_at<new Date());
};

I've had some problems making the directive work with google. It took me a while to figure out that the cause was not using the authorize-path attribute in my directive, as it was defaulting to "/oauth/authorize" and appending that to my url, thus sending me to the wrong page.

For clarity, I think it would be better to either have it default to nothing at all, or making it more clear in the documentation that this might be a common issue.

The code is pretty nice and compact in its current form. However I would suggest taking another look at the code style and errors reported by JSHint.

For example instead of this:

if (!token)           { return loggedOut() } // without access token it's logged out

preferr this:

if (!token) { 
    return loggedOut(); // without access token it's logged out
}

If not changing the style (thats just suggestion), the errors should be fixed (missing semicolons etc.). By the way feel free to close if you disagree as I don't feel strongly about this.

Right now all tests have been working using the HTML5 mode. We need to test out how it works without it. We got some problems in the past and before saying it works, we need to make some checks.

The maximum timeout for javascripts setInterval function (function that angular's $interval wraps) is: 4294967295 (32 bit int). This means 4294967295ms = 1193 hours = 49.71 days as max timeout. Some api's provide tokens that are valid for 3 months or longer. Because this time exceeds the maximum value the 'oauth:expired' is fired immediately.

Hi, I'm reviewing your API and cannot find a way to include for every http request an authorization header with the Bearer and access_token.

I've modified the ExpiredInterceptor ('oauth.interceptor') to add this:
if (token && expired(token)){
$rootScope.$broadcast('oauth:expired', token);
} else if (token !== undefined){
config.headers.Authorization = 'Bearer ' + token.access_token;
};

Do you think this is affortable for coming versions??

<oauth
    template="template.html"
    site="https://accounts.google.com/o/oauth2/auth"
        client-id="my_client_id"
    redirect-uri="my_redirect_url"
    profile-uri="http://www.googleapis.com/plus/v1/people/me"
    scope="openid email">
</oauth>

Hi, can anybody help to get it right with google+, why does the code above dont work?

This is something I need for our purposes on and will be working on and adding a pull request for soon...

As it exists at this time you may only authenticate one oauth client into an angular application given this system's current approach. Many systems may want to authenticate you into two different services. For example; login with facebook to connect your facebook AND connect your github account. This is common practice for many social services which may allow you to connect and use details or import data from a few different services.

My concept for this is simple and I would like to continue to support the default "AccessToken"; keeping the library's usage simple in this case as it is, but allowing you to specify a "clientName" thus enabling you to configure and connect to different oauth providers if you so desire.

Hello,

after I login and refresh the page no event is firing.
Have somebody the same problem?

best regards
Ivan

oauth:profile event is not fired anywhere within the factories. Should be within the Profile.(service).find on success.

Hi there - readying a pull request, but I can't run the grunt build because .jshintrc isn't checked in? I've just put a dummy one in for now, but would be helpful to have one already there.

On getting started the best thing to do is to make a tutorial where starting using yeoman, we build an app from scratch and we make it work using the oauth server demo. In this way people can try it out and directly see how it works.

Hi

I've just been stuck for an hour to get oauth-ng working, only to find out that I didn't include the required ngStorage ;)

Could you include in the docs that you need to add

<script src="bower_components/ngstorage/ngStorage.min.js"></script>
<script src="bower_components/oauth-ng/dist/oauth-ng.js"></script>

to your index.html?

(i didn't follow the tutorial with the example project but tried to integrate it in my own project ;)

Think that would help lots of people out ;)

Hi there,

I was trying to get this to work with Github OAuth. I cloned the demo project and modified the config in main.html:

<oauth
      site="https://github.com/login"
      client-id="supersecret12345"
      redirect-uri="http://localhost:9000"
      profile-uri="https://api.github.com/user"
      scope="user">
    </oauth>

The Github application of course also has http://localhost:9000 as redirect url. Clicking on Sign In does lead me to Github, where I see that my demo application wants access, so far so good. When I grant it, I'm redirected to http://localhost:9000/?code=1234567da5307f351420&state=%2F, so it looks like it kinda works, but oauth-ng doesn't recognize the reply from Github and gets stuck in the middle of the OAuth2 exchange process. I've tried to get it to work by forcing a JSON reply from Github, but I didn't manage to force an Accept-header into the requests that oauth-ng is sending.

I'm fairly new with angular-js, which is why I'm asking here a little sooner rather then spend more hours trying to find a solution on Google – should Github OAuth work with the demo page, or do I misunderstand something else and am destined to fail at my attempt anyway?

I'd be grateful for any input!

Thanks, Manuel

Edit: After looking into it some more, it seems to me that it won't be possible to use oauth-ng with Github OAuth, as they don't support the "implicit flow" version of the protocol. Correct?

Link the official documentation and remove all duplicated stuff.

At the moment the directive is not set to accept it. Also add a test for it.

Check out in the project the absense of the word Lelylan as it should not compare anywhere.

I assumed that the 'dist' folder contains stable releases, but there are various commits with changes to the file without a version bump.
Tags only go to v0.2.6 while currently the file is v0.2.8 + some changes.

Where can I find releases?

Checkout this article to better understand how to handle the token security issue.

oauth:login is (incorrectly in my opinion) being broadcasted on load of the page if the local sessionStorage key is set.

I would propose the oauth:login event is only fired when the AccessToken detects the correct info in $location.hash() - said another way, only fired during the actual login flow.

AccessToken.set(scope); is called when clientId is added to the DOM. So if you login, then refresh the page the initView() call will get a token (because its in session storage) which will then cause the oauth:login to fire. See here:

    var initView = function(token) {
      var token = AccessToken.get();

      if (!token)             { return loggedOut() }   // without access token it's logged out
      if (token.access_token) { return loggedIn() }    // if there is the access token we are done
      if (token.error)        { return denied() }      // if the request has been denied we fire the denied event
    }

I need to make the change for my purposes, so if proposal is OK I'll contribute it back. The 'breaking' change here would be if people are relying on the oauth:login event to render some "user is logged in" view, their logic would break. However, in my opinion, this logic is incorrect as the $scope.show should be used inside a custom template instead of relying on the oauth:login event OR by leveraging the existence of session storage.

Thoughts?

I'm using openAM as an oauth2 server. It provides the ability to retrieve token info after a token has been supplied to the client. The client calls an api service periodically that is the resource granted by the token. That api also provides the Bearer token found in the headers of the request to thje openAM oauth server which has a 'keepalive' and therefore updates the expiry of the session on the server.

The client can subsequently call an openAM tokeninfo endpoint to get a new expiry time. I would like to be able to update the AccessToken service so that it can update the token from this json object.

Any reason why I shouldn't do this?

In this section we need to add three things.

• explain how to set the template (installing with bower it could change)
• explain the CSS personalization
• explain the custom template with a new view
• explain the capability to change the template at runtime

Hello,

I am building a single page app where you need to be logged in on every page. So on every one of my route I check if the AccessToken has been set, otherwise I redirect to the Oauth login page using the EndPoint service. After being logged, when I am redirected towards my app I have a route for retrieving the accessToken that set it to the AccessToken with AccessToken.setTokenFromString(token) as described on your webpage.

So I never really use the "sign-in" button. But I want to use the "logout" button.

On logout, I want to add the redirection towards the logout url. So I thought I was going to listen the the logout event and do a $location.path(myLougoutUrl);

Problem is the logout event is fired inside the initView() method. So after loggin, I am redirected towards my app that send the logout event at initialization then as I listen to that event then I am redirected towards the logout url automatically :(

I think logout event should NOT be fired inside initView()

I hope I was clear enough. Maybe this can be merged with issue about adding logout url

P.S. Thx for the lib :)

All the documentation can live into the OAuth 2.0 server where we want to make the examples work. In this way we can leave the repo pretty clean. Otherwise we need to use sinatra or express.

We need to add the logout-uri attribute to associate a URI that will be called when the widget logs out. Its logic should be pretty similar to the one used for the profile-uri.

We need to find the best way to deploy the project. We should keep this project as clean as we can in the angular part, by compiling only the needed CSS, the needed JS and the needed templates. Everything else should live outside in another app. It could be a Rails app that uses with Bower all we need to make the demo work. Docs + Demo + Examples.

In this case we need to remove the actual index.html and to restore the old one with just the basic and simple demo. Probably this is the commit to restore as it is the one before starting with the presentation site.

Hi,

We were testing your nice oauth-ng module and came across the issue with the code minification.

When included in an app and minified with browserify, we see the classical Angular error: [$injector:unpr] Unknown provider: aProvider <- a <- Profile <- oauthDirective

When the module code is modified as suggested at https://docs.angularjs.org/error/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20Profile%20%3C-%20oauthDirective, it seems work.

Is it something you are planning to change it in the future?

Add an OAuth2 server to make it easy the example to test. This lets people to see it work at first and then people can check it out on how it works. The example lives in the top of the page.

Hello,

what is if we would open the dialog in an popup?
It this in planning?

best regard
codeDem

Is there a way to call the directive's login() and logout() functions from outside the directive?

For some applications (more long lived ones). Session storage is inappropriate. If you wish to use this library for authentication for a chrome-angular application for example, session storage dies when you close and then reopen the application. It would be important to be able to configure this per application needs.

Hi guys,

is there any way to pass nonce in request? our IdProvider requires a nonce for implicit and hybrid clients. Thanks for any response.

Regards,
Erno

At the moment, when a server returns a token that has no expires_in property, the token is assumed to have expired.

The best solution (in my current case at least, and regardless of any code changes to oauth-ng), would be to change the server's response so that it includes expires_in, but when looking at the spec (http://tools.ietf.org/html/rfc6749#section-4.2.2), expires_in is marked as recommended only and not required.

I'd be happy to make any changes and open a pull request, but I thought you might have an opinion on how tokens that are missing this property should be dealt with?

I'm trying to figure how how invalidated tokens (on the server side) should be handled.

Once a user logs in successfully the token is stored locally and on each page reload the token is retrieved and the profile is being requested.
I assumed that if the profile returns a 401 HTTP code it would remove the locally stored token and require the user to login again.

What would be the "correct" or suggested way to do this?

Additionally how would an $http response interceptor force the user to re-login when an 401 HTTP status is received?
This would be useful for custom made requests using the token.

Thank you and I do apologise if this is common knowledge around here. :)

upgrading from 0.2.2 -> 0.2.6, the expires_at attribute stopped being set correctly on the token.

Fixed in #24

There seems to be an issue when redirecting back to the client.
The error seems to happen in the latest version (v0.3.6).

This can be easily reproducible with a github account. To reproduce this
download the source. Inside the folder do

$ npm install && grunt serve

Next in app/index.html change line 29 from

<div style="display:none">

to

<div style="display:block">

and line 34 set profile-uri to https://api.github.com/user.

To see the problem first we need a github token, follow the
instructions in https://help.github.com/articles/creating-an-access-token-for-command-line-use/
to get a hold of one.

Next attempt to see if the site works by setting the url

http://127.0.0.1:9000/#access_token=your-access-token

Nothing will appear in the site, and if you open the console we can
see that angular throws an exception (You may need to adjust the debug settings
so that it sets a break when an exception is thrown).

But now, if you were to add just another parameter which is not one
that oauth-ng expects:

http://127.0.0.1:9000/#access_token=your-access-token&hello

Then everything works out, but the url is left with the extra parameter.

I set up a demo application (https://github.com/andreareginato/oauth-ng-demo)
and connected it with my local oauth2 server.

Both are up and running but I've noticed that each time I sign up to the system, the oauth-ng module sends 4 requests to get user-profile data:

I'm trying to understand why is it happening and if it's really needed, because I think one request should be enough.

Thank you for any comment!

It seems to work in brief testing. Any reason you're constrained to ~1.2.26? Just haven't had a chance to bump the version yet?

Added "undefined" check to the initAttributes object.
In the current version, you could not assign an empty value to authorizePath (or other params of the initAttributes object) since it would be falsy, falling into the default values.

Tests ran OK.

Facebook's JS SDK supports "auto" renewal of expired tokens it would be nice if oauth-ng could do the same.

My suspicion is they catch expired token HTTP responses from calls to their api, then re-direct user through oAuth2 login flow.

oauth-ng could do something similar, it would just have to standardize on a HTTP response that indicated token expire. A global ajax listener could be setup to handle.

We would not want to use something like setinterval because it would take user away from whatever they were doing right in the middle.

Here are some backup links:
https://developers.facebook.com/docs/facebook-login/access-tokens#extending
http://stackoverflow.com/questions/4622171/what-is-the-correct-way-to-refresh-facebook-oauth2-access-token-after-it-expires

Hello,

Versions seems not to be aligned in js and bower.

BR

Hi,
I'm using oauth-ng-demo to test the library. Everything was working fine except that I could not catch the event oauth:profile.
So I edit bower.json to use the version 0.3.2 (but I have the same behavior with 0.3.1, 0.2.8 and 0.2.6), fetch the files and test again.
Now I have now an unexcepted behavior:

• When I hover the mouse the signin link, I do not get a "hand" curson but instead a "edit" cursor
• When I click, I'm redirected to the authorization server but when I come back, I'm not seen as connected.
  I have tested with FF, Chrome and IE.
  What am I missing?

Right now the state param is initialized in the beginning with the page path.

This was made to let the page redirect to the redirect-uri and be able to set again the page status (mainly when using the fragment status). The solutions are different, but I think that status should be used for its own purposes.

• Use popups.
• Let the redirect-uri accept the page URI where the login is done.

Greetings!

This repo looks interesting. I'd love to see some basic usage snippets (examples) in the README explaining how you use each element (directive, service, etc). It looks like there are some handy components here, but I'm not entirely sure what they are all for.

I notice that every time you refresh the page, the profile endpoint is hit. This is wasteful. How about storing the profile data in local/session storage on successful login?

In our setup we need to be able to pass custom query platform_id parameter to OAuth service. The current code does not allow for this. Would be nice to allow custom query parameters.

On some system logging out redirects to an SSO logout. However if you redirect the browser too quickly, the session storage persists and the user remains logged into the angularjs app.

Tracked down this issue to here:

gsklee/ngStorage#39

The workaround (as suggested in ngStorage issue) is to wait for >100ms for session storage to flush, see here:

        $timeout(function () {
            $window.location = "http://localhost:9070/authserver/logout?redirect_uri=" + window.encodeURIComponent($location.absUrl());
        }, 110);