Connexion par numéro de téléphone laravel 8

introduction

Laravel est un framework d'artisan qui nous facilite la conception et le développement rapide d'un projet.

Cependant lorsqu'il s'agit de la gestion de l'authentification, laravel nous fournit une déjà configurée, celle nous permettant de se connecter par email bien sûr.

Imaginez que vous devez développer un produit dont le client veut que l'authentification soit par téléphone. Oui vous serez conseiller de créer votre propre authentification. Uhm n'est-ce pas un travail double ?

Dans cet article je vous suggère une autre façon qui m'a permis de changer l'authentification par défaut de laravel, juste en changeant quelques lignes de code. Pour cela nous allons partir d'un nouveau projet laravel.

Etape1: création du projet

Composer create-project --prefer-dist laravel/laravel mobile-authentication

Etape2: générer l'authentification

PHP artisan make:auth

Etape3: Éditer la migration user

Schema::create('users', function (Blueprint $table) {
    $table->increments('id');
    $table->string('name');
    $table->string('email')->unique()->nullable();
 $table->string('phone')->unique();
 $table->string('password');
 $table->rememberToken();$table->timestamps();
                            });

Nb: ici nous avons ajouté nullable email, pour que ce dernier ne soit pas exiger dans le remplissage de la table. En suite taper la commande

php artisan migrate

Etape4: modifier le middleware RedirectIfAuthenticated

Copiez ce bout de code dans votre middleware.

namespace App\Http\Middleware;

use Closure;
use Illuminate\Support\Facades\Auth;

class RedirectIfAuthenticated
{
    /**
         * Handle an incoming request.
         *      *
     * @param  \Illuminate\Http\Request  $request
     *      * @param  \Closure  $next
     * @param  string|null  $guard
     *      * @return mixed
     */
     *    public function handle($request, Closure $next, $guard = null)
     *        {
     *                if (Auth::check()) {
     *                            return redirect('/home');
     *                                    }
        return $next($request);
            }
            }

Etape5: modifier le controlleur

Maintenant faisons quelques changements dans notre Controller loginController

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\User;

class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */

    use AuthenticatesUsers;

    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/home';

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
        $this->user = new User;
    }

    public function login(Request $request)
    {
        //validation du numéro de téléphone, 
        Vous pouvez changer à vos préférences. 

        $this->validate($request, [
            'phone' => 'required|regex:/[0-9]{10}/|digits:10',   

        ]);

        // Get user record
        $user = User::where('phone', $request->get('phone'))->first();

        // vérifier l'existence du mot de passe
        if($request->get('phone') != $user->phone) {
            \Session::put('errors', 'numéro de téléphone introuvable.!!');
            return back();
        }        

        // Set Auth Details
        \Auth::login($user);

        // Redirect home page
        return redirect()->route('home');
    }
}

Dans ce cas nous validons le numéro avec le nombre total de 10 chiffres. Vous pouvez améliorer cette validation à vos préférences.

Étape 6: modification du fichier blade login

Modifions notre blade d'enregistrement afin de pouvoir réagir en cas d'erreur.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Login</div>

                <div class="panel-body">
                    <form class="form-horizontal" method="POST" action="{{ route('login') }}">
                        {{ csrf_field() }}
                        <div class="form-group{{ $errors->has('phone ') ? ' has-error' : '' }}">
                            <label for="phone" class="col-md-4 control-label">Entrer le numéro de téléphone .</label>
                            <div class="col-md-6">
                                <input id="phone" type="text" class="form-control" name="phone" value="{{ old('phone') }}" required autofocus>
                                @if ($errors->has('phone'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('phone') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    Login
                                </button>

                                <a class="btn btn-link" href="{{ route('password.request') }}">
                                    Forgot Your Password?
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Nous voilà avec une connexion par téléphone bien gérée, sans pour autant recommencer tout à zéro. J'espère que l'article vous a été utile. N'oubliez pas de vous abonner pour ne pas manquer mon prochain article.

Did you find this article valuable?

Support Jocelin Kisenga by becoming a sponsor. Any amount is appreciated!