Basic authentification with EmberJs and Laravel
Written by Bastien Donjon, Posted in Javascript, PHP
The following example uses the ember-simple-auth plugin. This is an early implementation for the Basic authentication with Laravel session and RestFul Api.
Currently, it can :
- Require authentication to the IndexRoute and DashboardRoute
- Refresh authentication if you refresh the page
Not being a specialist EmberJs this code is incomplete like :
- Retrieving information form
- Error handling in a loss of authentication with an API call
- Proper use of the accessToken property
For safety reasons use the HTTPS protocol.
I am at your service if you have any comments or questions.
Ember configuration
Template : login.hbs
</pre> <form action=""><label for="identification">Login</label> {{input id='identification' placeholder='Enter Login' value=identification}} <label for="password">Password</label> {{input id='password' placeholder='Enter Password' type='password' value=password}} <button type="submit">Login</button></form> <pre>
app.js
// Defining a custom authentication with Basic method. var CustomAuthenticator = Ember.SimpleAuth.Authenticators.Base.extend({ // Check session if you refresh browser (F5) restore: function(properties) { return new Ember.RSVP.Promise(function(resolve, reject){ Ember.$.ajax({ url: 'http://localhost.com/api/guest', success : function(datas){ resolve(properties); }, error: function(datas){ reject(); } }); }); }, // Initialized authentification authenticate: function(options) { return new Ember.RSVP.Promise(function(resolve, reject){ Ember.$.ajax({ url: 'http://localhost.com/api/profile', success : function(datas){ resolve({accessToken : 'fddfgdfgfdgfg'}); }, headers: { "Authorization": "Basic " + btoa("email4@domain.fr:password4") } }); }); }, invalidate: function(options) { return new Ember.RSVP.Promise(function(resolve, reject){ Ember.$.ajax({ url: 'http://localhost.com/api/logout', success : function(datas){ resolve({accessToken : 'fddfgdfgfdgfg'}); } }).then(function(response){ Ember.run(resolve); }, function(xhr, status, error){ Ember.run(reject); }); }); } }); // Initialied a custom authentication. Ember.Application.initializer({ name: 'authentication', initialize: function(container, application) { container.register('authenticators:custom', CustomAuthenticator); Ember.SimpleAuth.setup(container, application); } }); BackendWebapp.LoginController = Ember.Controller.extend(Ember.SimpleAuth.LoginControllerMixin, { authenticatorFactory: 'authenticators:custom' }); // Add authentification for Route Index BackendWebapp.IndexRoute = Ember.Route.extend(Ember.SimpleAuth.AuthenticatedRouteMixin); // Add authentification for DashBoardIndex BackendWebapp.IndexRoute = Ember.Route.extend(Ember.SimpleAuth.AuthenticatedRouteMixin);
Laravel configuration
route.php
// Logout current user Route::get('/logout', function(){ Auth::logout(); }); // Chech current authentification state Route::get('/guest', function(){ if(Auth::guest()){ throw new \Symfony\Component\HttpKernel\Exception\UnauthorizedHttpException(); }else{ echo 'ok'; } });
filters.php
Change Authentification method “Basic” to “x-Basic” to desactivate authentification popup in Google Chrome with ajax request.
Route::filter( 'auth.basicCustom', function () { $credentials = [ 'email' => Request::getUser(), 'password' => Request::getPassword() ]; if (!Auth::once($credentials)) { throw new \Symfony\Component\HttpKernel\Exception\UnauthorizedHttpException('x-Basic'); } } );
sources :