AngularJS OAuth2 authentication module written in ES6.
Currently angular-oauth2 only uses the Resouce Owner Password Credential Grant, i.e, using a credentials combination (username, password), we'll request an access token (using grant_type='password') which, in case of success, will typically return a response such as:
{
"access_token": "foobar",
"token_type": "Bearer",
"expires_in": 3600,
"refresh_token": "foobiz"
}
Internally we'll automatically store it as a cookie and it will be used in every request adding an Authorization header: Authorization: 'Bearer foobar'.
Choose your preferred method:
- Bower:
bower install angular-oauth2 - NPM:
npm install --save angular-oauth2 - Download: angular-oauth2
If you're using bower they will be automatically downloaded upon installing this library.
<scriptsrc="<VENDOR_FOLDER>/angular/angular.min.js"></script><scriptsrc="<VENDOR_FOLDER>/angular-cookies/angular-cookies.min.js"></script><scriptsrc="<VENDOR_FOLDER>/query-string/query-string.js"></script><scriptsrc="<VENDOR_FOLDER>/angular-oauth2/dist/angular-oauth2.min.js"></script>angular.module('myApp',['angular-oauth2']).config(['OAuthProvider',function(OAuthProvider){OAuthProvider.configure({baseUrl: 'https://api.website.com',clientId: 'CLIENT_ID',clientSecret: 'CLIENT_SECRET'// optional});}]);You can also configure OAuth service in a .run() block, in case you retrieve the Oauth server configuration from a ajax request.
angular.module('myApp',['angular-oauth2']).run(['OAuth',function(OAuth){OAuth.configure({baseUrl: 'https://api.website.com',clientId: 'CLIENT_ID',clientSecret: 'CLIENT_SECRET'// optional});}]);angular.module('myApp',['angular-oauth2']).run(['$rootScope','$window','OAuth',function($rootScope,$window,OAuth){$rootScope.$on('oauth:error',function(event,rejection){// Ignore `invalid_grant` error - should be catched on `LoginController`.if('invalid_grant'===rejection.data.error){return;}// Refresh token when a `invalid_token` error occurs.if('invalid_token'===rejection.data.error){returnOAuth.getRefreshToken();}// Redirect to `/login` with the `error_reason`.return$window.location.href='/login?error_reason='+rejection.data.error;});}]);Configuration defaults:
OAuthProvider.configure({baseUrl: null,clientId: null,clientSecret: null,grantPath: '/oauth2/token',revokePath: '/oauth2/revoke'});Update configuration defaults:
OAuth.configure({baseUrl: null,clientId: null,clientSecret: null,grantPath: '/oauth2/token',revokePath: '/oauth2/revoke'});Check authentication status:
/** * Verifies if the `user` is authenticated or not based on the `token` * cookie. * * @return {boolean} */OAuth.isAuthenticated();Get an access token:
/** * Retrieves the `access_token` and stores the `response.data` on cookies * using the `OAuthToken`. * * @param {object} user - Object with `username` and `password` properties. * @param {object} config - Optional configuration object sent to `POST`. * @return {promise} A response promise. */OAuth.getAccessToken(user,options);Refresh access token:
/** * Retrieves the `refresh_token` and stores the `response.data` on cookies * using the `OAuthToken`. * * @return {promise} A response promise. */OAuth.getRefreshToken()Revoke access token:
/** * Revokes the `token` and removes the stored `token` from cookies * using the `OAuthToken`. * * @return {promise} A response promise. */OAuth.revokeToken()NOTE: An eventoauth:error will be sent everytime a responseError is emitted:
{ status: 400, data: { error: 'invalid_request' }{ status: 400, data: { error: 'invalid_grant' }{ status: 401, data: { error: 'invalid_token' }{ status: 401, headers: { 'www-authenticate': 'Bearer realm="example"' } }
OAuthTokenProvider uses angular-cookies to store the cookies. Check the available options.
Configuration defaults:
OAuthTokenProvider.configure({name: 'token',options: {secure: true}});If you want to manage the token yourself you can use OAuthToken service.
Please check the OAuthToken source code to see all the available methods.
Found a bug or want to suggest something? Take a look first on the current and closed issues. If it is something new, please submit an issue.
It will be awesome if you can help us evolve angular-oauth2. Want to help?
- Fork it.
npm install.- Do your magic.
- Run the tests:
gulp test. - Build:
gulp build - Create a Pull Request.
The source files are written in ES6.