how to use stormpath in angular js
TRANSCRIPT
![Page 1: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/1.jpg)
How to Use Stormpath in Angular.js
Robert Damphousse @robertjd_
Lead Front-End Developer, Stormpath
![Page 2: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/2.jpg)
About Stormpath
• User Management API for Developers
• Password security
• Authentication and Authorization
• LDAP Cloud Sync
• Instant-on, scalable, and highly available
• Free for developers
![Page 3: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/3.jpg)
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
![Page 4: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/4.jpg)
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
![Page 5: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/5.jpg)
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
![Page 6: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/6.jpg)
SPAs – Authentication Strategies
• Session identifiers – opaque string in a cookie. You CAN use this strategy
• Access Tokens are better – JWT
![Page 7: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/7.jpg)
JSON Web Tokens (JWT)
• Used to persist authentication assertions
• Signed, structured
• Should be stored in cookies, not local storage
![Page 8: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/8.jpg)
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
![Page 9: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/9.jpg)
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
![Page 10: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/10.jpg)
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
![Page 11: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/11.jpg)
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)
![Page 12: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/12.jpg)
Stormpath, Angular
&
Your Architecture
![Page 13: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/13.jpg)
Your Server
Stormpath SDK
User’s Web Browser
(SPA)
Stormpath Angular SDK
StormpathHTTP API
Architecture Overview
Token Authentication(JWT)
Stormpath APIKey Authentication
![Page 14: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/14.jpg)
Integration Example
Express.JS Backend
![Page 15: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/15.jpg)
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:
![Page 16: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/16.jpg)
Server-Side:
• Create the Stormpath Middleware
• Attach the default route handlers
• Use specific middleware for API Authentication
Stormpath, Angular & Your Architecture
![Page 17: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/17.jpg)
Server-Side: Create the Middleware
var app = express();
var stormpathSdk = require('stormpath-sdk-express');
var spMiddleware = stormpathSdk.createMiddleware();
![Page 18: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/18.jpg)
Server-Side: Attach default route handlers
spMiddleware.attachDefaults(app);
![Page 19: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/19.jpg)
Server-Side: Use API Authentication
app.use('/api/*', spMiddleware.authenticate);
![Page 20: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/20.jpg)
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
![Page 21: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/21.jpg)
Client-Side: Add the SDK Dependencies
Stormpath, Angular & Your Architecture
angular.module('MyApplication', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ui.router', 'stormpath', 'stormpath.templates'])
![Page 22: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/22.jpg)
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' }); });
![Page 23: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/23.jpg)
Client-Side: Built-in Form Directives
<div sp-login-form></div>
![Page 24: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/24.jpg)
Client-Side: Built-in Form Directives
<div sp-registration-form post-login-state="main”></div>
![Page 25: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/25.jpg)
Client-Side: Auth Directives
Classic Use Case: Menu bar changes when logged in
Logged In:
Not Logged In:
![Page 26: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/26.jpg)
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”
![Page 27: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/27.jpg)
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, } }); });
![Page 28: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/28.jpg)
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’ } } }); });
![Page 29: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/29.jpg)
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
![Page 30: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/30.jpg)
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
![Page 31: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/31.jpg)
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/
![Page 32: How to Use Stormpath in angular js](https://reader033.vdocument.in/reader033/viewer/2022042522/55c4aba3bb61ebfd5a8b4620/html5/thumbnails/32.jpg)
Get started with your free Stormpath developer account!
https://api.stormpath.com/register
Questions?