How to Build Web Application Login with Laravel 5.2
Introduction
Here you iarn about How to Build Web Application Login with Laravel 5.2
In this tutorial, we’ll be creating simple web application authentication/login in mesosfer using laravel 5.2. Mesosfer authentication use oAuth2.0 so you will get a token for authorization when operating data. This is a second section from web application tutorial series with laravel. If you wanna follow from the begining, you can read the first section here.
Prerequisites
To follow this tutorial, you will need to prepare item below :
- Sign up for an account in mesosfer cloud platform then create application to get applicationId
- Install composer.
- Download source previous section here.
Let’s Write The Code!
Based on previous tutorial, you have UserController.php in folder app/Http/Controller. Then you just create serveral method to handle login process. First add method login for handling navigation to login page.
|
1 2 3 |
public function login(){ return view('pages.login'); } |
Then add login page –> login.blade.php in resources/views/pages.
|
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 |
<html> <head> <title>Login Page</title> </head> <body> <form action="signin" method="POST"> {!! csrf_field() !!} <table> <tr> <td>Username</td> <td><input type="email" name="email"></td> </tr> <tr> <td>Password</td> <td><input type="password" name="password"></td> </tr> <tr> <td> <input type="submit" value="submit"> </td> </tr> </table> </form> </body> </html> |
For handling routing, you have to add routing path in file app/Http/routes.php
|
1 2 |
Route::get('login', 'UserController@login'); Route::post('signin', 'UserController@signin'); |
Run php artisan server then access from browser, It will be like picture below.
We should add sign in method in app/Http/Controllers/UserController.php for handling action post from login page.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
public function signin(Request $request){ $appId = "Your appId"; $email = $request->input('email'); $password = $request->input('password'); $respAuth = \Guzzle::post('https://api.mesosfer.com/api/v2/users/signin', [ 'json' => ['email' => $email, 'password' => $password], 'headers' => ['X-Mesosfer-AppId' => $appId] ]); $bodyAuth = (string) $respAuth->getBody(); $auth = json_decode($bodyAuth); echo "<pre>"; var_dump($auth); echo "</pre>"; } |
Then we will get result json below :
|
1 2 3 4 5 6 7 8 9 10 |
object(stdClass)#183 (4) { ["accessToken"]=> string(22) "kH5rFS6_QeCkLO1QxXbvrQ" ["expiresIn"]=> int(604800) ["objectId"]=> string(10) "J30cf5AjMM" ["tokenType"]=> string(6) "Bearer" } |
Working with Session
In the next section (CRUD) you will need access token for every single API execution. After login success you will get access token, to keep that you need store at session variable. Firstly, you should add library Session like script below.
|
1 2 3 |
namespace App\Http\Controllers; use Illuminate\Http\Request; use Session; |
Add script for storing data to session variable inside method signin, after execution no error.
|
1 2 3 4 5 6 7 |
$userdata = array( 'access_token' => $auth->access_token, 'object_id' => $auth->object_id, 'token_type' => $auth->token_type ); Session::put('userdata', $userdata); return redirect('animal'); |
Create controller AnimalController.php to handle redirect after login. In the next section we will also use this controller for managing data (CRUD).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php namespace App\Http\Controllers; use Session; use Illuminate\Http\Request; class AnimalController extends Controller { public function index(){ return view('pages.animal.view'); } } |
Then create animal view for show page after login success. Add link for logout.
|
1 2 |
<h1>Howdy...</h1> <a href="{{ url('signout') }}">Signout</a> |
Add method signout for destroy all session user.
|
1 2 3 4 |
public function signout(){ Session::forget('userdata'); return redirect('login'); } |
We should also add checking session when try to access login page.
|
1 2 3 4 5 |
public function login(){ if(Session::get('userdata')) return redirect('animal'); return view('pages.login'); } |
Update routing for handling signout and animal controller.
|
1 2 |
Route::get('signout', 'UserController@signout'); Route::get('animal', 'UserController@index'); |
If you access from browser, It will look like the picture below.
Let’s try and share to your community. Download complete code here.
Conclusion
With Mesosfer you don’t need to setup authentication library, just create apps and call RestAPI that provided. So easy and simple for implementation. With authorization token your data will keep secure and safe. Always follow tutorial for upgrade information and knowledge from Mesosfer.
Mesosfer helps you connect your project to the cloud. Cut off the development process so you can straight into the delivery process instead stumble on the complicated infrastructure.
