A wrapper around ngResource that adds authentication to requests, automatically asking the user for credentials when needed. Currently supports OAuth password flow, and OpenID verification with an Authorization header to pass the key.
you will need to provide a polyfill for it.
After you've downloaded the secure-ng-resource component with bower, add the
usual lines in app.js (to
secureNgResource) and index.html (to
Suppose you are writing an Angular app that is backed by a RESTful web
service available at
https://example.com/. Its authentication is based on the
OAuth Resource Owner Password Flow.
Configure your app to use this auth system in a session
service for your application:
// app/scripts/services/appSession.jsangularmodule'myApp'factory'appSession''authSession' 'passwordOAuth' // These are from secureNgResourcereturn authSessionpasswordOAuth"" // Host which provides the OAuth tokens"1_myappmyappmyapp" // OAuth Client ID"shhhhhhhhhhhhhhhh" // OAuth Client Secret;;
Then you can use this session with secureResource, which is just a wrapper around ngResource:
// app/scripts/controllers/things.jsangularmodule'myApp'controller'ThingsCtrl''$scope' 'secureResource' 'appSession'var Thing = secureResourceappSession'';$scopethings = Thingquery;;
Thing.query() executes, SecureResource will add the appropriate
authorization to the request. If the request is refused (if the user hasn't
logged in yet, or if they logged in a long while ago and their access
token expired), then the user is redirected to your login page (by default
/login) within your angular app's internal routing system.
Your login controller can interact with the session like so:
// app/scripts/controllers/login.jsangularmodule'myApp'controller'LoginCtrl''$scope' 'appSession'$scopecredentials =user: null // Attach your login username element to thispass: null // And your password element to this;// Have your "Log In" button call thisif !$scopeloginForm$valid return;appSessionlogin$scopecredentialsthennullif resultstatus == 'denied'alert"Login failed: " + resultmsg;elsealert"Something went wrong: " + resultmsg;;;;
You don't have to worry about redirecting the user after they successfully
log in, the
appSession.login function will take care of that. If the user
was at another internal route and got kicked over to the login page by an
auth failure, then they will be sent back there. Otherwise they will be sent
/ internal route by default.
The OpenID system requires more specific behavior from the back-end server
than the OAuth system. When creating the OpenID auth instance, you supply
host which is typically your server, and a
beginPath at that host.
The login process goes like so:
The user supplies an OpenID identifier as their credentials. You should pass this identifier URL to AuthSession.login() in an object under the key 'openid_identifier'.
Secure-ng-resource redirects user to
beginPathvia a POST, submitting the usual OpenID form data plus these additional fields:
- key: A random byte string, base64 encoded.
- target_url: A URL to go to after authentication completes, generally this is the URL for the angular app's login page.
The server responds with a redirect to the identity provider login page.
When authentication completes, the server redirects to the target URL from step #2, with the following JSON structure base64 encoded as the GET argument
- approved: A boolean indicating whether authentication was accepted
- sessionId: (If approved) An authentication token, XOR'd against the key and then itself base64 encoded
- user: (If approved) The username that the user logged in as
- message: (Optional) An explanation of what happened during authentication
Assuming access was allowed, then from that point forward any requests that go through secureNgResource using this authentication session will include an
Authorizationheader of the form
123ABCis the sessionId from the response object. Note that cookies are not used in these requests; this helps to prevent XSS attacks.
In order to support step #4 of this process, your login controller should check
auth_resp value and pass it to the
login method if it's present:
if $locationsearchauth_respappSessionloginauth_resp: $locationsearchauth_resp;$locationsearch'auth_resp' null;
Project directory structure and build/test configs based on those found in ng-grid.