Setup Project

We going to create the project and install the resources

JWT and Cors


composer create-project --prefer-dist laravel/laravel login-project "5.0.0"
composer require tymon/jwt-auth

Continue with this link Jwt-Intallation

In the require of composer.json we going to add


"asm89/stack-cors": "dev-master as 0.2.2",
     "barryvdh/laravel-cors": "^0.7.3"

on config/app.php inside of providers add

'Barryvdh\Cors\ServiceProvider'

Execute
composer update

in kernel.php comment
'App\Http\Middleware\VerifyCsrfToken',
and add inside of $routeMiddle


'jwt.auth' => '\Tymon\JWTAuth\Middleware\GetUserFromToken',
'jwt.refres' => '\Tymon\JWTAuth\Middleware\RefreshToken'

ApiAuthController

Create controller
php artisan make:controller ApiAuthController
add to ApiAuthController
use Tymon\JWTAuth\Facades\JWTAuth;

<?php namespace App\Http\Controllers;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use Tymon\JWTAuth\Facades\JWTAuth;

use Illuminate\Http\Request;

class ApiAuthController extends Controller {
    public function userAuth(Request $request) {
        $credentials = $request->only('email', 'password');
        $token = null;


        try{
            if(!$token = JWTAuth::attempt($credentials)){
                return response()->json(['error' => 'invalid credential']);
            }
        }catch(JWTException $ex){
            return response()->json(['error' => 'something went wrong']);
        }
        return response()->json(compact('token'));
    }
}

Seed

With Laravel 5.1 and after, we can do
php artisan make:seeder UserTableSeeder
but with Laravel 5.0 we need create manually
copy database/seeds/DatabaseSeeder.php
to database/seeds/UserTableSeeder.php
rename the class to UserTableSeeder

<?php

use Illuminate\Database\Seeder;
use Illuminate\Database\Eloquent\Model;

class UserTableSeeder extends Seeder {

    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        Model::unguard();
        $users = [
            [
                'name' => 'Kevin',
                'email' => 'kev@mail.com',
                'password' => Hash::make('123')
            ]
        ];

        foreach($users as $user){
            \App\User::create($user);
        }
    }
}

on Databaseeder.php uncomment
$this->call('UserTableSeeder');

composer dump-autoload

Configure .env for database


php artisan migrate
php artisan db:seed

Add the route on routes.php


Route::group(['middleware' => 'cors'], function(){
    Route::post('/login','ApiAuthController@userAuth');
});

Test Restful

I used a firefox addon REST-easy

Setup Angular

I want to use directory /public and use bower


prompt/public/> npm install -g bower
prompt/public/> bower install angular angular-route satellizer
prompt/public/> mkdir js && touch js/app.js

Edit the file app.js

Aqui va la imagen con el codigo

mkdir public/views/ touch public/views/login.html

public/js/service/authservice.js


angular.module('apiLogin')
    .factory('authUser',function($auth){
        var login = function (loginForm){
            $auth.login(loginForm).then(
                function(response){
                    console.log(response);
                },
                function(error){
                    console.log(error);
                }
            );
        };

        return{
            loginApi: function(loginForm){
                login(loginForm);
            }
        };
    });

public/js/controller/loginController.js


 angular.module("apiLogin")
    .controller("loginController", ["authUser", function(authUser){
        var vm = this;
        vm.loginForm ={
            email:'kev@mail.com',
            password:'123'
        };

        vm.login = function(){
            authUser.loginApi(vm.loginForm);
        };
    }]);

public/js/app.js


angular.module("apiLogin", [
        'satellizer',
        'ngRoute'
    ])
    .config(function($authProvider){
        $authProvider.loginUrl= 'http://localhost:8000/auth_login';
    });

vista login public/login.html

<head>
    <meta charset="utf-8">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body ng-app="apiLogin">
<div class="container" ng-controller="loginController as login">
<div class="row">
<div class="col-md-12 text-center">
  <h3>Login</h3>
</div>
</div>
  <form>
    <div class="form-group">
      <input type="email" class="form-control" placeholder="Email" ng-model="login.loginForm.email">
    </div>
    <div class="form-group">
      <input type="password" class="form-control" placeholder="Password" ng-model="login.loginForm.password">
    </div>
    <button class="btn btn-primary" ng-click="login.login()">Log in</button><br>
  </form>
</div>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/satellizer/dist/satellizer.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services/authService.js"></script>
<script src="js/controllers/loginController.js"></script>
</body>

homeController.php

public function index()
{
     // return view('app');
     return redirect('app.html');
}

Modificar en homecontroller redirect to app.html

login.html

<body ng-app="apiLogin">
<div class="container" ng-controller="loginController as login">
<div class="row">
<div class="col-md-12 text-center">
  <h3>Login {{a}}</h3>
</div>
</div>
  <form>
    <div class="form-group">
      <input type="email" class="form-control" placeholder="Email" ng-model="login.loginForm.email">
    </div>
    <div class="form-group">
      <input type="password" class="form-control" placeholder="Password" ng-model="login.loginForm.password">
    </div>
    <button class="btn btn-primary" ng-click="login.login()">Log in</button><br>
  </form>
</div>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/satellizer/dist/satellizer.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services/authService.js"></script>
<script src="js/controllers/loginController.js"></script>
</body>

app.js

angular.module("apiLogin", [
        'satellizer',
        'ngRoute'
    ])
    .config(function($authProvider){
        $authProvider.loginUrl= 'http://localhost:8000/auth_login';
    });

authService.js

angular.module('apiLogin')
    .factory('authUser',function($auth){
        var login = function (loginForm){
            $auth.login(loginForm).then(
                function(response){
                    console.log(response);
                },
                function(error){
                    console.log(error);
                }
            );
        };

        return{
            loginApi: function(loginForm){
                login(loginForm);
            }
        };
    });

loginController.js

angular.module("apiLogin")
    .controller("loginController", ["authUser", function(authUser){
        var vm = this;
        vm.loginForm ={
            email:'kev@mail.com',
            password:'123'
        };

        vm.login = function(){
            authUser.loginApi(vm.loginForm);
        };
    }]);

Resource

https://github.com/tymondesigns/jwt-auth
Issue with cors in laravel 5.0
Differente php artisan dump and composer dump

The videos in Spanish by KDCToturiales

I need finish video 3... soon
* video 3 Sistema de Autenticacion JWT con AngularJS y Laravel

Laravel 5.0 Authentication JWT and AngularJs