Bastien Donjon

Développeur web à Bordeaux

Basic authentification Archive

Thursday

3

April 2014

36

COMMENTS

Basic authentification with EmberJs and Laravel

Written by , 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

1
2
3
4
5
6
7
</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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// 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

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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.

1
2
3
4
5
6
7
8
9
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 :

Categories

Recent Posts

Mes sites

Archives