Cara Membuat Verifikasi Akun Di Laravel 8 Dengan Twilio Verify

Admin・ 11 Februari 2021

37 min read ・ 2814 views

OTP - Laravel - Untuk menangkal akun palsu yang mendaftar di sistem yang kita buat, diperlukan suatu fitur yang dapat memberikan jaminan bahwa data yang diinputkan oleh user tersebut memang benar-benar valid. Salah satu fitur tersebut yaitu dengan verifikasi akun atau account verify dengan menggunakan nomor telephone dari user.

Di artikel ini, kita akan sama-sama belajar bagaimana cara membuat account verification atau verifikasi akun di laravel 8 dengan twilio verify. Di percobaan ini, kita akan mulai dari 0 yaitu dengan mulai install project laravel baru, install laravel ui dan sampai selesai.

Sebelum mulai, jangan lupa untuk register akun twilio terlebih dahulu disini. Ikuti alur register sampai selesai. Jika sudah selesai register akun twilio, kita akan mulai percobaan membuat account verify atau verifikasi akun di laravel dengan twilio verify:

1. Langkah pertama kita awali dengan install project laravel baru. Buka terminal dan masuk ke direktori dimana Anda ingin install project laravel tersebut dan jalankan command dengan perintah composer create-project laravel/laravel otp-laravel atau seperti gambar di atas. Dengan command tersebut, akan membuatkan project laravel baru dengan nama otp-laravel.

2. Kemudian masuk ke dalam direktori project yang telah dibuat dengan cd otp-laravel.

3. Install package twilio PHP sdk dengan command composer require twilio/sdk.

4. Sebelum lanjut lagi, mari kita buat terlebih dahulu servicenya. Klik disini untuk membuat service yang akan digunakan dalam percobaan ini. Klik Create Service Now dan masukkan nama service.

5. Update file .env. Buka file .env dan tambahkan record baru seperti di bawah ini.

TWILIO_SID=ACf69bd19f874fd955e158939fxxxxxxxx
TWILIO_AUTH_TOKEN=15e551627356707394eaxxxxxxxxx0d
TWILIO_VERIFY_SID=VA5fe84a552065c41217a8xxxxxxxxb   

TWILIO_SID dan TWILIO_AUTH bisa didapat dari halaman dashboard twilio atau bisa klik disini.

Di halaman dashboard twilio akan nampak tampilan seperti gambar di atas. Copy code ACCOUNT SID ke file .env tepatnya di baris TWILIO_SID. dan AUTH TOKEN copy dan paste di baris TWILIO_AUTH_TOKEN. 

Sedangkan di baris TWILIO_VERIFY_ID bisa didapatkan dari halaman service, nanti akan ada tampilan seperti gambar di atas. Copy ID seperti yang di berikan tanda garis bawah warna biru seperti gambar di atas, kemudian paste di file .env tepatnya di baris TWILIO_VERIFY_ID.

Jangan lupa juga untuk membuat database baru untuk percobaan membuat verifikasi akun dengan laravel dan twilio verify. Kemudian inputkan nama database tersebut di file .env.

6. Install laravel ui dengan command composer require laravel/ui. dilanjutkan langkah selanjutnya yaitu generate login atau registration scaffolding dengan php artisan ui bootstrap --auth. Kemudian jalankan command npm install && npm run dev.

7. update file user migration yang ada di direktori database/migrations/[timestamp]_create_users_table.php. Di method up, update menjadi seperti di bawah ini.

public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('phone')->unique();
            $table->boolean('isVerified')->default(false);
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

8. Setelah update file user migration, sekarang update juga untuk User Model di direktori App/Models/User.php pada bagian protected $fillable menjadi seperti di bawah ini.

protected $fillable = [
        'name',
        'phone',
        'password',
        'isVerified',
    ];

9. Jalankan command php artisan migrate untuk memigrasi tabel ke database.

10. Update file RegisterController.php.

Hapus record

 use App\Providers\RouteServiceProvider;

dan

protected $redirectTo = RouteServiceProvider::HOME;

Kemudian pada method validator, update menjadi seperti di bawah ini.

 protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'phone' => ['required', 'numeric', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

update juga pada method create menjadi seperti di bawah ini,

protected function create(array $data)
    {
        $token = getenv("TWILIO_AUTH_TOKEN");
        $twilio_sid = getenv("TWILIO_SID");
        $twilio_verify_sid = getenv("TWILIO_VERIFY_SID");
        $twilio = new Client($twilio_sid, $token);
        $twilio->verify->v2->services($twilio_verify_sid)
            ->verifications
            ->create($data['phone'], "sms");
        User::create([
            'name' => $data['name'],
            'phone' => $data['phone'],
            'password' => Hash::make($data['password']),
        ]);
    }

Kemudian tambahkan method verify di RegisterController.php seperti di bawah ini.

protected function verify(Request $request)
    {
        $data = $request->validate([
            'verification_code' => ['required', 'numeric'],
            'phone' => ['required', 'string'],
        ]);
        /* Get credentials from .env */
        $token = getenv("TWILIO_AUTH_TOKEN");
        $twilio_sid = getenv("TWILIO_SID");
        $twilio_verify_sid = getenv("TWILIO_VERIFY_SID");
        $twilio = new Client($twilio_sid, $token);
        $verification = $twilio->verify->v2->services($twilio_verify_sid)
            ->verificationChecks
            ->create($data['verification_code'], array('to' => $data['phone']));
        if ($verification->valid) {
            $user = tap(User::where('phone', $data['phone']))->update(['isVerified' => true]);
            /* Authenticate user */
            Auth::login($user->first());
            return redirect()->route('home')->with(['message' => 'Phone number verified']);
        }
        return back()->with(['phone' => $data['phone'], 'error' => 'Invalid verification code entered!']);
    }

Sehingga secara keseluruhan, kode di file App/Http/Controller/Auth/RegisterController.php menjadi seperti di bawah ini.

<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Twilio\Rest\Client;
use App\Models\User;
use Illuminate\Foundation\Auth\RegistersUsers;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
class RegisterController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Register Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles the registration of new users as well as their
    | validation and creation. By default this controller uses a trait to
    | provide this functionality without requiring any additional code.
    |
    */
    use RegistersUsers;
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest');
    }
    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'phone' => ['required', 'numeric', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }
    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return \App\Models\User
     */
    protected function create(array $data)
    {
        $token = getenv("TWILIO_AUTH_TOKEN");
        $twilio_sid = getenv("TWILIO_SID");
        $twilio_verify_sid = getenv("TWILIO_VERIFY_SID");
        $twilio = new Client($twilio_sid, $token);
        $twilio->verify->v2->services($twilio_verify_sid)
            ->verifications
            ->create($data['phone'], "sms");
        User::create([
            'name' => $data['name'],
            'phone' => $data['phone'],
            'password' => Hash::make($data['password']),
        ]);
    }
    protected function verify(Request $request)
    {
        $data = $request->validate([
            'verification_code' => ['required', 'numeric'],
            'phone' => ['required', 'string'],
        ]);
        /* Get credentials from .env */
        $token = getenv("TWILIO_AUTH_TOKEN");
        $twilio_sid = getenv("TWILIO_SID");
        $twilio_verify_sid = getenv("TWILIO_VERIFY_SID");
        $twilio = new Client($twilio_sid, $token);
        $verification = $twilio->verify->v2->services($twilio_verify_sid)
            ->verificationChecks
            ->create($data['verification_code'], array('to' => $data['phone']));
        if ($verification->valid) {
            $user = tap(User::where('phone', $data['phone']))->update(['isVerified' => true]);
            /* Authenticate user */
            Auth::login($user->first());
            return redirect()->route('home')->with(['message' => 'Phone number verified']);
        }
        return back()->with(['phone' => $data['phone'], 'error' => 'Invalid verification code entered!']);
    }
}

11. Update file vendor/laravel/ui/auth-backend/RegistersUsers.php. Pada method register, update kode menjadi seperti di bawah ini.

public function register(Request $request)
    {
        $this->validator($request->all())->validate();
        event(new Registered($user = $this->create($request->all())));
        if ($response = $this->registered($request, $user)) {
            return $response;
        }
        return $request->wantsJson()
                    ? new JsonResponse([], 201)
                    : redirect()->route('verify')->with(['phone' => $request->phone]);
    }

Tambahkan juga

use Illuminate\Http\Request;

Sehingga secara keseluruhan, kode di file vendor/laravel/ui/auth-backend/RegistersUsers.php menjadi seperti di bawah ini.

<?php
namespace Illuminate\Foundation\Auth;
use Illuminate\Auth\Events\Registered;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
trait RegistersUsers
{
    use RedirectsUsers;
    /**
     * Show the application registration form.
     *
     * @return \Illuminate\View\View
     */
    public function showRegistrationForm()
    {
        return view('auth.register');
    }
    /**
     * Handle a registration request for the application.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\RedirectResponse|\Illuminate\Http\JsonResponse
     */
    public function register(Request $request)
    {
        $this->validator($request->all())->validate();
        event(new Registered($user = $this->create($request->all())));
        if ($response = $this->registered($request, $user)) {
            return $response;
        }
        return $request->wantsJson()
                    ? new JsonResponse([], 201)
                    : redirect()->route('verify')->with(['phone' => $request->phone]);
    }
    /**
     * Get the guard to be used during registration.
     *
     * @return \Illuminate\Contracts\Auth\StatefulGuard
     */
    protected function guard()
    {
        return Auth::guard();
    }
    /**
     * The user has been registered.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  mixed  $user
     * @return mixed
     */
    protected function registered(Request $request, $user)
    {
        //
    }
} 

12. Update file routes/web.php. Di file routes/web.php tambahkan route baru seperti di bawah ini.

Route::get('/verify', function () {
    return view('auth.verify');
})->name('verify');
Route::post('/verify', [App\Http\Controllers\Auth\RegisterController::class,'verify'])->name('verify');

Sehingga secara keseluruhan, file routes/web.php akan seperti di bawah ini.

<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
    return view('welcome');
});
Auth::routes();
Route::get('/verify', function () {
    return view('auth.verify');
})->name('verify');
Route::post('/verify', [App\Http\Controllers\Auth\RegisterController::class,'verify'])->name('verify');
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

13. Pada file resources/views/auth/register.blade.php, update menjadi seperti di bawah ini.

@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">{{ __('Register') }}</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('register') }}">
                        @csrf
                        <div class="form-group row">
                            <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="phone" class="col-md-4 col-form-label text-md-right">{{ __('Phone Number') }}</label>
                            <div class="col-md-6">
                                <input id="phone" type="tel" class="form-control @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone') }}" required autocomplete="phone">
                                @error('phone')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </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 @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                            </div>
                        </div>
                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Register') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

14. Kemudian update juga file verify.blade.php di direktori resources/views/auth/verify.blade.php menjadi seperti di bawah ini.

@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">{{ __('Verify Your Phone Number') }}</div>
                <div class="card-body">
                    @if (session('error'))
                    <div class="alert alert-danger" role="alert">
                        {{session('error')}}
                    </div>
                    @endif
                    Please enter the OTP sent to your number: {{session('phone')}}
                    <form action="{{route('verify')}}" method="post">
                        @csrf
                        <div class="form-group row">
                            <label for="verification_code"
                                class="col-md-4 col-form-label text-md-right">{{ __('Phone Number') }}</label>
                            <div class="col-md-6">
                                <input type="hidden" name="phone" value="{{session('phone')}}">
                                <input id="verification_code" type="tel"
                                    class="form-control @error('verification_code') is-invalid @enderror"
                                    name="verification_code" value="{{ old('verification_code') }}" required>
                                @error('verification_code')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Verify Phone Number') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

15. Uji Coba.

OK kita sudah selesai melakukan konfigurasi twilio verify, membuat database dan menulis kode untuk membuat verifikasi akun di laravel 8 dengan twilio verify. Sekarang waktunya kita untuk mencobanya. Coba jalankan servernya dengan php artisan serve dan masuk ke menu register.

Kemudian coba masukkan data pada form-form yang tersedia. Untuk form phone number, format yang harus diinputkan adalah kode negara diikuti dengan nomor telepon. Seperti gambar di atas, format inputannya seperti +6282 dan seterusnya (tidak bisa diinputkan 6282).

Nah, sekarang waktunya verifikasi. Masukkan kode yang telah diterima via sms ke form yang ada seperti gambar di atas. Kode yang dimasukkan pun juga harus sama persis, jika tidak sama maka kita tidak bisa melanjutkan verifikasi nomor telepon.

Selesai sudah artikel kali ini yang telah membahas bagaimana cara membuat verifikasi akun dengan sms di laravel 8 menggunakan twilio verify. Disini tadi kita telah belajar bersama-sama mulai dari install project laravel baru, membuat service twilio verify, menuliskan kode-kode sampai uji coba verifikasi akun di laravel 8 dengan menggunakan twilio verify.

Dari percobaan yang telah dilakukan, kita dapat menyimpulkan bahwa keberadaan fitur verifikasi akun pada suatu sistem yang harus register seperti e-commerce memang sangatlah penting. Hal ini bertunjuan untuk menghindari user yang daftar asal-asalan. Contoh: di website atau sistem yang harus register tapi tidak ada verifikasi akun, kita bisa asal-asalan memasukkan data yang penting kita bisa login. Sedangkan di website atau sistem yang ada verifikasi akun, kita tidak bisa lagi asal-asalan dalam memasukkan datanya.

Sekian artikel kali ini, jika ada kritik, saran, masukan atau apapun yang mau didiskusikan, silahkan tulis di form komentar di bawah ini.

See you in the next article :-)