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 :