Laravelログインシステムをモバイルログインに変更する方法について話しましょう-Laravel-php.cn

Laravelログインシステムをモバイルログインに変更する方法について話しましょう

PHPz

リリース： 2023-04-14 15:58:23

オリジナル

792 人が閲覧しました

Laravel は、多くの実用的で使いやすい機能を提供する非常に人気のある PHP フレームワークです。その 1 つは、ユーザーが Web サイトに登録してログインできるようにする認証システムです。この記事では、Laravelのログインシステムをモバイルログインに変更する方法について説明します。

コーディングを始める前に、Laravel がインストールされ、設定されていることを確認してください。そうでない場合は、Laravel の公式ドキュメントで詳細なガイダンスを見つけることができます。

最初のステップは、ユーザーの携帯電話番号とパスワードを保存する新しいデータベーステーブルを作成することです。これは、Laravel 移行を使用して行うことができます。ターミナルウィンドウを開いて次のコマンドを入力します:

php 職人 make:migration create_phone_auth_table

これにより、新しいデータベーステーブルを定義できる新しい移行ファイルが作成されます。。 Laravel でデータテーブルを作成する方法は次のとおりです。

public function up()
{
    Schema::create('phone_auth', function (Blueprint $table) {
        $table->increments('id');
        $table->string('phone_number')->unique();
        $table->string('password');
        $table->timestamps();
    });
}

ログイン後にコピー

この例では、「id」、「phone_number」、「password」、および「」を含む「phone_auth」という名前の新しいテーブルを作成します。タイムスタンプ」列。電話番号が重複しないように、「phone_number」列を一意になるように定義していることに注意してください。

次に、モバイルログインを処理するための新しいコントローラーを作成する必要があります。ターミナルウィンドウを開いて次のコマンドを入力します:

php 職人 make:controller PhoneLoginController

次に、「app/Http/Controllers/PhoneLoginController.php」ファイルを開きます。次のコードがファイルの最後に追加されます。

public function showLoginForm()
{
    return view('auth.phone-login');
}

public function login(Request $request)
{
    $this->validate($request, [
        'phone_number' => 'required',
        'password' => 'required',
    ]);

    $phone_number = $request->input('phone_number');
    $password = $request->input('password');

    if (Auth::attempt(['phone_number' => $phone_number, 'password' => $password])) {
        return redirect()->intended('/');
    }

    return redirect()->back()->withInput()->withErrors(['message' => 'Phone number or password is incorrect.']);
}

ログイン後にコピー

このコードでは、「showLoginForm」と「login」という 2 つのメソッドを定義します。「showLoginForm」は、2 つのテキストボックスと、ユーザーが携帯電話番号とパスワードを入力するための送信ボタンを含むフォームを含むビューを返します。「login」メソッドはユーザーの入力データを検証し、Auth クラスを使用してユーザーのログインを試みます。ログインが成功すると、ユーザーはホームページにリダイレクトされます。そうしないと、ユーザーにエラーメッセージが表示されます。

次に、新しいビューファイル「auth.phone-login」を作成する必要があります。「Laravel/resources/views/auth」フォルダーに新しいファイルを作成し、「phone-login.blade.php」という名前を付けます。 Laravel では Blade エンジンを使用してビューをレンダリングし、強力なテンプレート機能を提供していることに注意してください。次の HTML とフォームコードをこのファイルに追加します。

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{ __('Phone Login') }}</div>

                    <div class="card-body">
                        <form method="POST" action="{{ route(&#39;phone.login&#39;) }}">
                            @csrf

                            <div class="form-group row">
                                <label for="phone_number" class="col-md-4 col-form-label text-md-right">{{ __('Phone Number') }}</label>

                                <div class="col-md-6">
                                    <input id="phone_number" type="text" class="form-control{{ $errors->has('phone_number') ? ' is-invalid' : '' }}" name="phone_number" value="{{ old('phone_number') }}" required autofocus>

                                    @if ($errors->has('phone_number'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('phone_number') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

                                <div class="col-md-6">
                                    <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>

                                    @if ($errors->has('password'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('password') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row mb-0">
                                <div class="col-md-6 offset-md-4">
                                    <button type="submit" class="btn btn-primary">
                                        {{ __('Login') }}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

ログイン後にコピー

このビューには、2 つのテキストボックスと、ユーザーが携帯電話番号とパスワードを入力するための送信ボタンを備えたフォームが含まれます。フォームの送信アドレスが「phone.login」ルートを指すように、form タグで「route」ディレクティブを使用していることに注意してください (Route ディレクティブは、URL や HTML フォーム入力の自動生成など、いくつかの便利な機能を提供します)。

さて、最後のステップは、新しいルートを「Web」ルートファイルに追加することです。 Routes/web.php ファイルを開き、次のコードをファイルの末尾に追加します。

Route::get('phone-login', 'PhoneLoginController@showLoginForm');
Route::post('phone-login', 'PhoneLoginController@login')->name('phone.login');

ログイン後にコピー

これにより、2 つの新しいルート、「phone-login」および「phone-login」POST ルートが追加されます。最初のルートは、ユーザーが携帯電話番号とパスワードを入力するためのフォームをレンダリングするために使用されます。 2 番目のルートはフォームの送信を処理し、ユーザーの入力データを検証します。

おめでとうございます。これで、Laravel ログインシステムがモバイルログインに正常に変更されました。これは単なる単純な実装であり、ニーズに応じて変更および拡張できることに注意してください。より良いユーザーエクスペリエンスを提供するために、電子メールや確認コードなどのフィールドをさらに追加できます。

以上がLaravelログインシステムをモバイルログインに変更する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。