This is a tutorial outlining how to create an Ember.js app with authorization using
This assumes you have git, node, bower, and ember-cli installed
ember init or ember new see the ember-cli docs for more info
npm install --save-dev torii ember-cli-simple-auth-torii
ember generate ember-cli-simple-auth-torii
ember g route application
ember g route protected
ember g route login
ember g controller login
//--- /app/routes/application.js
import Ember from 'ember';
import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin';
export default Ember.Route.extend(ApplicationRouteMixin);
//--- /app/routes/protected.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin);
You could add more torii providers, see the documentation for more info
//--- /app/controllers/login.js
import Ember from 'ember';
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';
export default Ember.Controller.extend(LoginControllerMixin, {
authenticator: 'authenticator:torii'
});
//--- /app/routes/login.js
import Ember from 'ember';
export default Ember.Route.extend({
actions: {
googleLogin: function() {
this.get('session').authenticate('simple-auth-authenticator:torii', 'google-oauth2');
return;
}
}
});
See example
This is likely analgous to other torii providers, I have only used google
- client_id from google under API & auth > credentials
- update your authorized origins (ex. http://localhost:4200/)
- update the redirect URI (ex. http://localhost:4200)
//--- config/environment.js
ENV['torii'] = {
providers: {
'google-oauth2': {
apiKey: 'client_id from google',
scope: 'profile',
redirectUri: 'http://localhost:4200'
}
}
};
run ember server and try it out!
We are going to create a custom torii provider that will also get the users information from google. We need the custom provider because the default google-ouath2 uses the code workflow rather than the token workflow that the google plus api's need. This code extends torii oauth2-bearer and borrows from torri google-oauth2. It also uses jQuery for the GET request, if there is a better way let me know!
Then update:
- environment.js torii provider to match the custom providers name (this provider also uses scope
profile email) - Your login action to match the custom providers name
Then enable the Google+ API in your google dev console
You now will have access to session.content.userName and session.content.userEmail