jamesrandall / angularjs-oauth2 Goto Github PK
View Code? Open in Web Editor NEWPackage for allowing an AngularJS application to authenticate with an OAuth 2 / Open ID Connect identity provider using the implicit flow.
License: MIT License
Package for allowing an AngularJS application to authenticate with an OAuth 2 / Open ID Connect identity provider using the implicit flow.
License: MIT License
This isn't really an issue, but it would be nice if the token information was published in the authSuccess event. A simple change:
$rootScope.$broadcast('oauth2:authSuccess', service.token);
That way use of the token does not need to be tightly coupled to the library services.
Common use would be to extract the preferred name or email address from the identity token.
Hi,
I am trying to use the plug-in as specified in the post, and I am getting an error when trying to load the module. Any idea why it could be?
This is the error trace:
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.1/$injector/modulerr?p0=n...)
at Error (native)
at http://localhost:8000/assets/libs/bower_components/angular/angular.min.js:6:416
at http://localhost:8000/assets/libs/bower_components/angular/angular.min.js:38:15
at n (http://localhost:8000/assets/libs/bower_components/angular/angular.min.js:7:322)
at g (http://localhost:8000/assets/libs/bower_components/angular/angular.min.js:37:92)
at http://localhost:8000/assets/libs/bower_components/angular/angular.min.js:37:261
at n (http://localhost:8000/assets/libs/bower_components/angular/angular.min.js:7:322)
at g (http://localhost:8000/assets/libs/bower_components/angular/angular.min.js:37:92)
at db (http://localhost:8000/assets/libs/bower_components/angular/angular.min.js:40:367)
at d (http://localhost:8000/assets/libs/bower_components/angular/angular.min.js:19:219
I'm trying to figure out how to get the Identity Token after sign-in to determine user claims like email address, username etc. Since the page reloads after going to the Login, how can you catch the identity token and parse it?
Looks like there is an issue with angularjs 1.6.1 if you are running with $locationProvider.html5Mode(false) where it is now adding a #! to the beginning of the hash. the issue is detailed here. https://docs.angularjs.org/guide/migration#commit-aa077e8
this causes the id_token to be lost in getTokenFromHasParams. Its not difficult to fix, either set html5Mode to true, or add $locationProvider.hasPrefix('') to app.module configuration:
(function () {
var app = angular.module('MainModule',["ngRoute","afOAuth2"]);
//configure routing. Add restircted: true to require authentication
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('');
$routeProvider
.when('/',{
templateUrl: 'index.html',
controller: 'MainController'
,requireToken: true
}).otherwise({
redirectTo: "/"
});
});
}());
I don't know if you are keeping this project up to date, but it dosn't seem to be working anymore.
I cant load the module..., this is error I get in the chrome console:
[$injector:modulerr] Failed to instantiate module
here is my main.js file:
var myApp = angular.module("myApp", ['afOAuth2']);
I am currently having an issue with the directive being placed anywhere other then on the main index.html
. If i add it to a view being called from a controller the redirect back to the site will not return a token in the session storage and the button will still have a text value of "sign in".
As soon as i add it to the index.html this issue goes away. I am very curious as to why this is occurring and if there is any way in which i can add the <oauth>
directive into a view instead of on the main page.
thanks
"name": "AngularJS-OAuth2"
Should the value of name be all lower case?
Running bower install --save AngularJS-OAuth2 gives error: ENOTFOUND Package AngularJS-OAuth2 not found.
Hi James, this is not an issue but a query. I can't see anywhere where this library saves the tokens in localStorage. Does/Can it actually do so? or just use session storage?
Hello,
We use your lib but we have some problem sometime the token is not correctly silent-renewed and then we got error as we have a really short expiration time, could be nice if when in interceptor the token is expired or is going to expire in less than 2 min by example the interceptor should do a silent-renew.
Thanks
Hi,
Did somebody tried to use this plugin with standard Ionic Framework template for Apache Cordova? Because when I'm tring to use it with IdentityServer3 authentication works fine, i am able to log in, but the button don't change to "SingOut". Did somebody have this issue?
Wouldn't it be good to default the "state" attribute to a value, such as in the init() function, add scope.state = scope.state || Date.now() + '' + Math.random();
IdentityServer3 barfs if state us not set.
Hi James,
When a badrequest (status 400) response comes through the interceptor it is not rejected.
As a result any client side validation messages will not be displayed and the user will be forwarded to the service method's succes route.
You can see the fix in my fork if you want to.
Cheers,
Bart
Great work and exactly what I was looking for.
Here are few issues that I'm observing and need some help.
For testing purpose, I had set the Token Expiration in the Auth server to 10 min.
Appreciate everything you have done.
Hi, it seems that the nonce parameter of the request url is always there.
Google doesn't accept requests with that parameter.
A quick fix would be to add the nonce only if it is provided like in the original oauth-ng plugin:
function init(){
...
if (scope.nonce != undefined){
scope.nonce = scope.nonce || generateState();
}
...
service.init = function(params) {
...
if (params.nonce){
service.url += '&' + 'nonce=' + encodeURIComponent(params.nonce)
}
...
I'm having great difficulty in getting the library to work with Safari. It works perfectly and consistently with Chrome, and Firefox running on Windows, Linux, MacOS, Android and IOS and also on Microsoft Edge running on WIndows, but Safari behaves strangely. The rediection URL containting the token and coming from the Identity Provider Service disappears from the URL before the angular script is executed. It disappears even before the angular router script is run, let alone the OAuth2 library. I've even been unsuccessful in finding any breakpoint position that will stop the scripts with the url containig the token still showing in the address bar in Safari.
Any help or suggestion would be most appreciated.
I made the example working after adding angular-md5 to the bower.json file and the index.html. Thanks for the nice code and example.
I have the following configuration based on the sample app
<oauth2 authorization-url="https://accounts.google.com/o/oauth2/auth" sign-out-url="https://accounts.google.com/o/oauth2/revoke?token=" sign-out-append-token="true" sign-out-redirect-url="http://localhost:9000" client-id="***" redirect-url="http://localhost:9000" response-type="id_token token" scope="openid" auto-generate-nonce="false" silent-token-redirect-url="http://localhost:9000/#/silent-renew" > </oauth2>
I've changed the response type as seen above.
The code as given appends "?id_token_hint=XXXXX" to the url, but there is already a ? in the sign-out- url so it needs to be appended with &. Even then Google rejects the request when id_token_hint is in it. and ignores the redirect-url, all I get in response is an empty JSON object {}
So it seems id_token_hint is invalid, post_logout_redirect_uri is ignored and the token needs to be the access_token not the id_token.
Hello,
Thanks for your work on this interesting project.
On our side, we do not use Bower, but "just" npm. Shouldn't it be convenient for developers who are not using Bower, to make the library available on npmjs.org?
Note that there is already a project called angular-oauth2
, which has a name qui similar to this project...
The problem I had was that since the init for the oauth2.endpoint was being called when the directive was loaded, my values for the urls were not being used -- my bootstrap process determines the urls and so they are not known right away.
For example:
<oauth2 authorization-url="{{loginEndpoint}}"
sign-out-url="{{logoutEndpoint}}"
sign-out-append-token="true"
client-id="{{appKey}}"
redirect-url="{{redirectEndpoint}}"
sign-out-redirect-url="{{redirectEndpoint}}"
sign-in-text="Log In"
sign-out-text="Log Out"
response-type="id_token token"
scope="openid profile email roles all_claims">
</oauth2>
In order to fix it, I just re-called init for the oauth2.endpoint module in the directive's login method. I hope that makes sense -- it doesn't seem like it would be very expensive...
This is just an FYI -- not sure if you want to take any action on it.
As it says on the tin. Reminder to myself to add in an upcoming version.
I am able to parse the accessToken but I cannot find the id_token. I am trying to display the user's email id.
I have set response-type="id_token token" and scope="openid email"
Something seems to be wrong with my broadcast wireups. When the auth server redirects back, the broadcasts are fired before the scope.$on functions are wired up in the directive therefore they don't fire?
I'm struggling in finding a way to keep the token in the session storage
when doing a redirection from an application residing in localhost:3000
to an other residing in localhost:3002
.
The thing is when the redirection
is performed, and as the token is located in the session storage of the first application, the session storage
get cleared when changing the port because as I read, the session storage is unique per host and port.
Do you have any suggestion to help me solve the problem?
thanks is advance.
Hi,
When html5Mode for routing is enabled in AngularJS the url param that is received after login starts with a hash (f.e. http://localhost:1881/#access_token=). Because of this the acces_token is not retrieved from the url parameter.
I implemented a quick fix in service.set:
if (hashValues.indexOf('#/') == 0) {
hashValues = hashValues.substring(2);
to
if (hashValues.indexOf('#') == 0) {
hashValues = hashValues.substring(1);
This fixed the issue for me.
Maybe you can add an option to the directive for html5Mode?
Cheers,
Bart
Is it possible to use the requireToken: true with ui-router?
Hello,
Thanks for the Silent Token Renewal feature, which is really useful for us. However, I have a question about its implementation.
As far as I understand this feature, I have to provide an URI which looks like http://my-server/#/silent-renew
. However, if I look on the RFC 6749 (The OAuth 2.0 Authorization Framework), it says that the endpoint URI should not include fragment:
The redirection endpoint URI MUST be an absolute URI as defined by [RFC3986] Section 4.3. The endpoint URI MAY include an "/x-www-form-urlencoded" formatted (per Appendix B) query component ([RFC3986] Section 3.4), which MUST be retained when adding query parameters. The endpoint URI MUST NOT include a component.
On our context, we use ForgeRock solution that does not allow fragments in the redirect_uri
, which prevents the silent token renewal to work correctly.
So did I missed something here? If not, how to accomodate the silent-renew
feature with such constraints?
Thanks
Hi,
I've just read your post (http://www.azurefromthetrenches.com/?p=2241) and found it very helpful. You mention in your blog that you got your directive working with IdentityServer3. You link to a Github of a sample using Google for your identity server, do you have an example I can see using Identity Server?
Also, do you think it would be easy to implement the routing in ui-router?
Any help appreciated.
Thanks,
Matt
This is not the biggest issue, but it would be great if the bower package also contained a .min.js version so that consumers didn't have to minify it themselves.
I think the styling should be left to the dev , it seems odd to cater for bootstrap.
'<p class="navbar-btn"><a class="{{buttonClass}}"><span href="#" ng-hide="signedIn" ng-click="signIn()" >{{signInText}}</span><span href="#" ng-show="signedIn" ng-click="signOut()">{{signOutText}}</span></a></p>'
line 225
Also just out of interest what is the use for the href="#"
Hi,
I'm having trouble implementing revoke token functionality.
I find the problem in this method:
scope.signOut = function() {
var token = accessToken.get().id_token;
accessToken.destroy();
endpoint.signOut(token);
};
token variable is always null;
I think it should be:
var token = accessToken.get().access_token;
Thank You for your great library.
Best regards,
Marko Radinovic
Hi, I'm having an issue loading the module, it looks like it's the oauth2.directive part that crashes, is there any dependency or anything I need to load before yours? I've already loaded angular-md5 and ngStorage.
Thanks.
I think that I'm having problems using bower with the library as there are no tags that match the versions you're specifying in the bower.json currently. This is important for me as I need to shrinkwrap/freeze the versions of the libraries which I depend upon. I don't need any historical versions but one matching the current 'released' version would be rather handy for me please :)
hi
my apllication after sing out redirect to uthorization-url page but i do redirect to sign-out-redirect-url
`
<oauth2
authorization-url="http://172.17.192.7:8080/authentication/oauth/authorize"
sign-out-url="http://172.17.192.7:8080/authentication/logout"
sign-out-redirect-url="http://172.17.192.114:8080"
silent-token-redirect-url="http://172.17.192.114:8080"
sign-out-append-token="true"
client-id="sabaPay"
redirect-url="http://172.17.192.114:8080"
response-type="token"
scope="sabaPayScope"
sign-in-text = "login"
button-class = "btn btn-default btn-success"
sign-out-text = "exit"
` please help to redirect after sign out to redirect sign out redirect
Hi
When I try to use bower install AngularJS-OAuth2, the package is not found.
Hi, thanks for this great lib.
When a silent renew fails for some reason (temporary broken connection or failure of the OAuth server), there is no retry made and only a full reload of the web app solves the issue (by re-executing the init process).
It will be great to have some way to ensure that, even after a silent-renew fails, other ones are tried a bit later on, via the interceptor for example but if it could be done even before a call is tried it will be better.
Possible solutions may be :
1- when we detect the current renew fails : trigger for another renew tentative after x secs
2- have a parallel regular watcher checking for token status and triggering a renew if token is null or expired or soon to expired but after the normal renew delay
3- have angular call interceptor checking for token validity and doing a silent renew if needed before the asked call, as proposed in #45
Solutions 2 and 3 made be tricky due to parallelism issues.
I think a nonce (number used once) attribute would be required for IdentityServer3. When asking for openid scope, IdentityServer3 returns an error that says "nonce required."
The thinktecture guys had this handy function for the (default) value of nonce:
function rand() {
return ((Date.now() + Math.random()) * Math.random()).toString().replace(".","");
}
They used it for the "state" value as well.
After authorizing, when the application refreshes, the id_token is added to the urls of all requests, which makes them unable to be found.
How can I get the component to not put the id_token on the url?
(using NodeJS web server, angular, etc.)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.