|
1 |
| -EmberAuthTutorial |
2 |
| -================= |
| 1 | +# Ember-auth-tutorial |
3 | 2 |
|
4 |
| -A quick Ember.js Authorization tutorial using Ember-CLI, Ember-Simple-Auth, and Torii |
| 3 | +This is a tutorial outlining how to create an [Ember.js](http://emberjs.com) app with authorization using |
| 4 | + |
| 5 | +- [Ember-CLI](http://www.ember-cli.com/) |
| 6 | +- [Ember-Simple-Auth](https://github.com/simplabs/ember-simple-auth) |
| 7 | +- [Torii](https://github.com/Vestorly/torii) |
| 8 | + |
| 9 | + |
| 10 | +# Tutorial |
| 11 | + |
| 12 | +This assumes you have git, node, bower, and ember-cli installed |
| 13 | + |
| 14 | +### Create a new ember app |
| 15 | + |
| 16 | +`ember init` or `ember new` see the ember-cli docs for more info |
| 17 | + |
| 18 | + |
| 19 | + |
| 20 | +### Get dependencies |
| 21 | + |
| 22 | +``` |
| 23 | +npm install --save-dev torii ember-cli-simple-auth-torii |
| 24 | +ember generate ember-cli-simple-auth-torii |
| 25 | +``` |
| 26 | + |
| 27 | + |
| 28 | + |
| 29 | +### Basic App setup |
| 30 | + |
| 31 | +``` |
| 32 | +ember g route application |
| 33 | +ember g route protected |
| 34 | +ember g route login |
| 35 | +ember g controller login |
| 36 | +``` |
| 37 | + |
| 38 | + |
| 39 | + |
| 40 | +### Add Mixins |
| 41 | + |
| 42 | +``` |
| 43 | +//--- /app/routes/application.js |
| 44 | +import Ember from 'ember'; |
| 45 | +import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin'; |
| 46 | +
|
| 47 | +export default Ember.Route.extend(ApplicationRouteMixin); |
| 48 | +``` |
| 49 | + |
| 50 | +``` |
| 51 | +//--- /app/routes/protected.js |
| 52 | +import Ember from 'ember'; |
| 53 | +import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin'; |
| 54 | +
|
| 55 | +export default Ember.Route.extend(AuthenticatedRouteMixin); |
| 56 | +``` |
| 57 | + |
| 58 | + |
| 59 | + |
| 60 | +### Add Login Actions and setup controller |
| 61 | + |
| 62 | +You could add more torii providers, see the [documentation](https://github.com/Vestorly/torii) for more info |
| 63 | + |
| 64 | +``` |
| 65 | +//--- /app/controllers/login.js |
| 66 | +import Ember from 'ember'; |
| 67 | +import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin'; |
| 68 | +
|
| 69 | +export default Ember.Controller.extend(LoginControllerMixin, { |
| 70 | + authenticator: 'authenticator:torii' |
| 71 | +}); |
| 72 | +``` |
| 73 | + |
| 74 | +``` |
| 75 | +//--- /app/routes/login.js |
| 76 | +import Ember from 'ember'; |
| 77 | +
|
| 78 | +export default Ember.Route.extend({ |
| 79 | + actions: { |
| 80 | + googleLogin: function() { |
| 81 | + this.get('session').authenticate('simple-auth-authenticator:torii', 'google-oauth2'); |
| 82 | + return; |
| 83 | + } |
| 84 | + } |
| 85 | +}); |
| 86 | +``` |
| 87 | + |
| 88 | + |
| 89 | + |
| 90 | +### Update your templates |
| 91 | + |
| 92 | +See [example](app/templates) |
| 93 | + |
| 94 | + |
| 95 | + |
| 96 | +### Get google setup |
| 97 | + |
| 98 | +This is likely analgous to other torii providers, I have only used google |
| 99 | +- client_id from [google](https://console.developers.google.com/project) under API & auth > credentials |
| 100 | +- update your authorized origins (ex. http://localhost:4200/) |
| 101 | +- update the redirect URI (ex. http://localhost:4200) |
| 102 | + |
| 103 | + |
| 104 | + |
| 105 | +### Update environment.js |
| 106 | + |
| 107 | +``` |
| 108 | +//--- config/environment.js |
| 109 | +ENV['torii'] = { |
| 110 | + providers: { |
| 111 | + 'google-oauth2': { |
| 112 | + apiKey: 'client_id from google', |
| 113 | + scope: 'profile', |
| 114 | + redirectUri: 'http://localhost:4200' |
| 115 | + } |
| 116 | + } |
| 117 | +}; |
| 118 | +``` |
| 119 | + |
| 120 | + |
| 121 | + |
| 122 | +### Test & Enjoy |
| 123 | +run `ember server` and try it out! |
0 commit comments