AjaxによるLALAVELカスタムログイン確認

5406 ワード
javascript laravel php テキストリンク
Laravelは間違いなく、Web職人のための最も使用され、人気のPHPフレームワークです.
Laravelは、Auth(ユーザー登録とログイン)のために、ビルトイン機能でそれ自身を持ちます.あなたが内蔵の機能に満足していると思うならば、あなたはそれを利用することができます、そして、あなたのアプリケーションはうまく機能します.しかし、あなたがさらに自分のカスタム認証機能を持って行きたいなら、この記事はあなたのためです.始めましょう!
この記事では、ブラウザを再読み込みせずにカスタムログインフォームの検証と認証を行う方法を示します.
ステップ1 :ユーザーを作成
私はあなたが既にあなたのユーザーデータベース表で作成されたユーザーを持っていると仮定したいです.
ステップ2 :ログインページを作成する
これは私たちのログインページビューの短いコードです
<body>
<div class="col-lg-4 col-md-4">
   <form action="{{ route('login') }}" method="POST"  id="login_form" 
   class="request-form ">
    @csrf
   <h2>Login</h2>
   <div id="show_error" style="color: red"> </div>

   <div class="form-group mr-2">
      <label for="" class="label">Email</label>
      <input type="email" name="email" class="form-control" >
      <span class="text-danger error-text email_error" 
       style="color: red"></span>
   </div>

   <div class="form-group mr-2">
      <label for="" class="label">Password</label>
      <input type="password" name="password" class="form-control" 
      >
      <span class="text-danger error-text password_error" 
      style="color: red"></span>
   </div>

   <div class="form-group">
   <input type="submit" value="Login" class="btn  py-3 px-4" 
   style="background-color: #5f76e8; color:#ffffff">
   </div>
  </form>
</div>
//add javascript with ajax here
<script src="[place you jquery source here...]"></script>
<script>
        $("#login_form").submit(function(e){
         e.preventDefault();

        var all = $(this).serialize();

        $.ajax({
            url:  $(this).attr('action'),
            type: "POST",
            data: all,
            beforeSend:function(){
                $(document).find('span.error-text').text('');
            },
            //validate form with ajax. This will be communicating 
              with your LoginController
            success: function(data){
                if (data.status==0) {
                    $.each(data.error, function(prefix, val){
                        $('span.'+prefix+'_error').text(val[0]);
                    });
                }
               // redirect the user to [another page] if the 
                   login cred are correct. Remember this is 
                   communicating with the LoginController which we 
                   are yet to create
                if(data == 1){
                    window.location.replace(
                     '{{route("dashboard.index")}}'
                    );
                }else if(data == 2){
                 // Show the user authentication error if the 
                   login cred are invalid. Remember this is 
                   communicating with the LoginController which we 
                   are yet to create
                    $("#show_error").hide().html("Invalid login 
                       details");
                }

            }
            })

        });


    </script>
</body>
ログイン表示サンプル:ログイン.ブレード.PHP

注:あなたはあなたの欲求にカスタマイズすることができます
ステップ3 : logincontrollerを作成する
プロジェクトへのコマンドプロンプトインターフェースを開く
ディレクトリとペーストの下のコマンドphp artisan make:controller LoginController
 namespace App\Http\Controllers;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Session;
 use Illuminate\Support\Facades\Validator;
   class LoginController extends Controller{
      public function login(Request $request){
        $validator = Validator::make($request->all(), [
        'email' =>    'required',
        'password' => 'required',
      ]);
       // validate all requests and it sends output to your 
          login.blade.php

       if(!$validator->passes()){
          return response()->json([
             'status'=>0, 
             'error'=>$validator->errors()->toArray()
          ]);
        }

       $user_cred = $request->only('email', 'password');
        if (Auth::attempt($user_cred)) {

             //if user is logged in and the role is user
            if(Auth()->user()->role=='user'){  
               return response()->json([ [1] ]);
            }  

        }else{
             //if user isn't logged in
                return response()->json([ [2] ]);
        }
        return redirect("/");
     }
  }
ステップ4:あなたのルートを変更:Web.PHP
あなたのコントローラをあなたのウェブに加えてください.PHP事件としてRoute::post('/login'[App\Http\Controllers\LoginController::class, 'login'])->name('/login');こんにちはFriends、この記事では、ブラウザを再読み込みせずにLaravelとAjaxでログインフォームを作成しました.私はあなたがそれをお楽しみください.
Fluidbmで2022年にあなたのLaravelモデルを速く設計する方法
Glide暗号化ファイルのロード