Bastien Donjon

· Javascript, PHP

Basic authentification with EmberJs and Laravel

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 :

Not being a specialist EmberJs this code is incomplete like :

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 :