How to Use Stormpath in Angular.js Robert Damphousse @robertjd_ Lead Front-End Developer, Stormpath
How to Use Stormpath in Angular.js
Robert Damphousse @robertjd_
Lead Front-End Developer, Stormpath
About Stormpath
• User Management API for Developers
• Password security
• Authentication and Authorization
• LDAP Cloud Sync
• Instant-on, scalable, and highly available
• Free for developers
Talk Overview
• Authentication in Single Page Apps (SPAs)
• JWTs instead of Session IDs
• Securing cookies
• Where does Stormpath fit in your architecture?
• End-to-end example with Angular.js + Express.js
SPAs – What’s different?
• Data resources are treated differently than application resources (HTML/CSS/JS assets are separated from data resources)
• Forces you to build a proper API, likely a REST + JSON API
• User Experience (UX) gets a spotlight
SPAs – What’s the same?
• Browser JavaScript is an untrusted environment!
• Your server is responsible for resource authentication and authorization
• You CAN use Cookies for authentication
SPAs – Authentication Strategies
• Session identifiers – opaque string in a cookie. You CAN use this strategy
• Access Tokens are better – JWT
JSON Web Tokens (JWT)
• Used to persist authentication assertions
• Signed, structured
• Should be stored in cookies, not local storage
JSON Web Tokens (JWT)
{ "typ":"JWT", "alg":"HS256"}
{ "iss": "http://trustyapp.com/”, "exp": 1300819380, "sub": "users/8983462", "scope": "self api/buy"}
tß´—™à%O˜v+nî…SZu¯µ€U…8H×
Header
Body (‘Claims’)
Cryptographic Signature
Why Cookies?
• Automatically supplied on every request
• HttpOnly flag prevents the JS environment from accessing the cookie
• Secure flag ensures the cookie is only transmitted over HTTPS
• Can restrict by subdomain and path
Why Not Local Storage?
• Exposed to JS environment, whereas HttpOnly cookies are not.
• Can’t restrict visibility by path, only subdomain
• https://www.owasp.org/index.php/HTML5_Security_Cheat_Sheet#Storage_APIs
Securing Cookies
• Use the HttpOnly and Secure flags.
• Need to protect against Cross-Site Request Forgery (CSRF) attacks
• https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)
Stormpath, Angular
&
Your Architecture
Your Server
Stormpath SDK
User’s Web Browser
(SPA)
Stormpath Angular SDK
StormpathHTTP API
Architecture Overview
Token Authentication(JWT)
Stormpath APIKey Authentication
Integration Example
Express.JS Backend
End-to-End Walkthrough:http://docs.stormpath.com/angularjs/guide/
API Documentation:https://docs.stormpath.com/angularjs/sdk/#/api
Example Application (inside the repo):https://github.com/stormpath/stormpath-sdk-angularjs
Online Guide & Docs:
Server-Side:
• Create the Stormpath Middleware
• Attach the default route handlers
• Use specific middleware for API Authentication
Stormpath, Angular & Your Architecture
Server-Side: Create the Middleware
var app = express();
var stormpathSdk = require('stormpath-sdk-express');
var spMiddleware = stormpathSdk.createMiddleware();
Server-Side: Attach default route handlers
spMiddleware.attachDefaults(app);
Server-Side: Use API Authentication
app.use('/api/*', spMiddleware.authenticate);
Client-Side:
• Add the Stormpath Angular SDK to your Angular application
• Configure UI Router integration
• Use directives for built-in forms
• Use UI Router config for view authorization
Stormpath, Angular & Your Architecture
Client-Side: Add the SDK Dependencies
Stormpath, Angular & Your Architecture
angular.module('MyApplication', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ui.router', 'stormpath', 'stormpath.templates'])
Client-Side: UI Router Integration
angular.module('MyApplication') .config(function ($urlRouterProvider, $locationProvider) { $urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true); }) .run(function($stormpath){ $stormpath.uiRouter({ loginState: 'login', defaultPostLoginState: 'main' }); });
Client-Side: Built-in Form Directives
<div sp-login-form></div>
Client-Side: Built-in Form Directives
<div sp-registration-form post-login-state="main”></div>
Client-Side: Auth Directives
Classic Use Case: Menu bar changes when logged in
Logged In:
Not Logged In:
Client-Side: Auth Directives
<li if-not-user> <a ui-sref="login">Login</a></li>
<li if-user> <a ui-sref="main" sp-logout>Logout</a></li>
“If User” and “If Not User”
Client-Side: View Authentication
angular.module('MyApplication') .config(function ($stateProvider) { $stateProvider .state('profile', { url: '/profile', templateUrl: 'app/profile/profile.html', controller: 'ProfileCtrl', sp: { authenticate: true, } }); });
Client-Side: View Authorization
angular.module('MyApplication') .config(function ($stateProvider) { $stateProvider .state('profile', { url: '/profile', templateUrl: 'app/profile/profile.html', controller: 'ProfileCtrl', sp: { authorize: { group: ‘admins’ } } }); });
Client-Side: Behind the Scenes..
• On login: Stormpath Express SDK sends a JWT to Angular, stored in a secure cookie
• Browser automatically supplies JWT cookie on all requets
• /me route is served by SDK, so that Angular can know context about current user
Recap..
• Stormpath SDK on your server and in your SPA
• JWTs are used instead of sessions
• Angular SDK provides directives for forms and authentication state
• Angular SDK will work with any backend
• User data is stored and secured behind the Stormpath API
Stormpath for Authentication & User Management
Stormpath can handle authentication and authorization for your API, SPA or mobile app, as well as a range of advanced user features
• Single Sign-On Across Your Apps
• API Authentication & Key Management
• Token Based Authentication
• Oauth Workflows
• JWTs
Implementations in your Library of choice:
https://docs.stormpath.com/home/
Get started with your free Stormpath developer account!
https://api.stormpath.com/register
Questions?