Let’s talk about how to change the Laravel login system to mobile login

Laravel is a very popular PHP framework that provides many practical and easy-to-use features. One of them is the authentication system, which allows users to register and log in to the website. In this article, I will discuss how to change the Laravel login system to mobile login.

Before you start coding, make sure you have Laravel installed and configured. If not, you can find detailed guidance in the official Laravel documentation.

The first step is to create a new database table to store the user's mobile phone number and password. You can do this using Laravel migrations. Open a terminal window and enter the following command:

php artisan make:migration create_phone_auth_table

This will create a new migration file in which you can define the new database table . The method of creating a data table in Laravel is as follows:

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

In this example, we create a new table named "phone_auth", which contains "id", "phone_number", "password" and the "timestamps" column. Note that we define the "phone_number" column to be unique to ensure there are no duplicate phone numbers.

Next, we need to create a new controller to handle mobile login. Open a terminal window and enter the following command:

php artisan make:controller PhoneLoginController

Then, open the "app/Http/Controllers/PhoneLoginController.php" file and change The following code is added to the end of the file:

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.']);
}

In this code, we define two methods: "showLoginForm" and "login". "showLoginForm" returns a view that contains a form with two text boxes and a submit button for the user to enter their mobile phone number and password. The "login" method will validate the user's input data and attempt to log in the user using the Auth class. If the login is successful, the user will be redirected to the homepage. Otherwise, the user will receive an error message.

Now we need to create a new view file "auth.phone-login". Create a new file in the "Laravel/resources/views/auth" folder and name it "phone-login.blade.php". Remember, the Blade engine is used in Laravel to render views and give you some powerful templating capabilities. Add the following HTML and form code to this file:

@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

This view will contain a form with two text boxes and a submit button for the user to enter their mobile number and password. Please note that we use the "route" directive in the form tag (the Route directive provides some convenient functions, including automatically generating URLs and HTML form inputs) to point the form's submission address to our "phone.login" route .

Now, the final step is to add our new route to our "web" routes file. Open the routes/web.php file and add the following code to the end of the file:

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

This will add two new routes: the "phone-login" and "phone-login" POST routes. The first route is used to render a form for the user to enter their mobile phone number and password. The second route will handle the submission of the form and validate the user's input data.

Congratulations, now you have successfully changed the Laravel login system to mobile login. Please note that this is just a simple implementation and you can change and extend it according to your needs. You can add more fields, such as email and verification code, to provide a better user experience.

The above is the detailed content of Let’s talk about how to change the Laravel login system to mobile login. For more information, please follow other related articles on the PHP Chinese website!