Belajar Laravel Bagian 21 – Membuat Fitur Login dengan Socialite

Sebelumnya, kita telah mempelajari cara membuat fitur login menggunakan email dan password yang tersimpan di database. Dalam artikel ini, kita akan melanjutkan belajar Laravel tentang bagaimana membuat fitur login dengan akun Google menggunakan Laravel Socialite.

Sebelum masuk ke pembahasan cara membuat fitur loginnya, terlebih dahulu kita akan membahas tentang apa itu Laravel Socialite agar Anda lebih memahami artikel yang kami buat. Simak informasi berikut ini.

Apa itu Laravel Socialite?

Laravel socialite adalah sebuah package bawaan dari Laravel yang dapat membantu untuk membuat fitur login dengan menggunakan akun sosial media seperti Google, Github, Facebook, dan lainnya.

Pengembangan fitur login dengan menggunakan Laravel socialite dapat memfasilitasi proses autentikasi pengguna melalui protokol OAuth, yang memungkinkan pengguna untuk masuk ke aplikasi menggunakan akun dari berbagai penyedia layanan sosial media.

Dengan fitur ini, proses login menjadi jauh lebih mudah dan praktis bagi pengguna karena mereka tidak perlu lagi mengisi formulir pendaftaran secara manual, cukup dengan satu klik melalui akun sosial media mereka.

Kelebihan Laravel Socialite

Berikut adalah beberapa kelebihan Socialite yang dapat Anda gunakan sebagai fitur authentication login di aplikasi Laravel Anda.

Integrasi otomatis dan mudah: Anda tidak perlu lagi menulis kode API otentikasi dari nol. Socialite menyediakan antarmuka yang bersih dan siap pakai untuk login via pihak ketiga.
Meningkatkan user experience: Pengguna dapat login dengan satu klik melalui akun Google atau media sosial lainnya, tanpa harus membuat akun manual atau mengisi formulir panjang.
Menghemat waktu developing: Dengan sedikit konfigurasi, Socialite mempercepat proses pengembangan fitur login modern yang aman dan efisien.
Aman karena dikelola oleh Laravel: Karena merupakan bagian dari ekosistem Laravel, Socialite mendapatkan pembaruan rutin dan dukungan komunitas yang kuat.
Mendukung banyak provider otentikasi: Tidak hanya Google, Anda juga dapat menambahkan login via Facebook, Twitter, GitHub, LinkedIn, Bitbucket, dan lainnya hanya dengan beberapa baris konfigurasi.

Membuat Fitur Login dengan google di Laravel

Pada seri belajar Laravel ini, kami akan menjelaskan cara membuat fitur login di Laravel menggunakan Socialite dengan akun Google. Kami memilih opsi ini karena login dengan Google adalah metode yang paling umum dan banyak digunakan saat ini. Berikut langkah-langkahnya:

Step 1. Membuat Oauth di google

Untuk membuat fitur login dengan menggunakan akun Google, kita perlu mendapatkan client id, google client secret dan juga google redirect url.

Langkah pertama, untuk mendapatkan oauth client bisa dilakukan melalui halaman Google Cloud Console pada menu credentials.

Pada halaman credentials, Anda bisa klik Create credentials kemudian memilih Oauth client ID.

Kemudian Anda bisa memilih application tipe dengan Web Application, serta masukan nama projek Anda. Lalu tambahkan Authorized redirect URIs (contoh: http://127.0.0.1:8000/auth/google) Setelah isian lengkap, click button Create.

Setelah itu, silahkan Anda dapat klik tombol create untuk membuat Oauth client id tersebut dan simpan client id, client secret serta redirect url untuk digunakan pada aplikasi Laravel Anda.

Step 2. Setup Laravel Socialite

Sebelum melakukan setup Laravel Socialite, Pastikan bahwa Anda telah melakukan instalasi socialite terlebih dahulu. Jika belum, Anda bisa menjalankan perintah berikut untuk install laravel socialite.

composer require laravel/socialite

Setelah install laravel socialite berhasil, silahkan setup pada file bootstrap/providers.php lalu tambahkan kode berikut berikut :

Laravel\Socialite\SocialiteServiceProvider::class,

Berikut adalah contoh penambahannya:

memasukan laravel socialite ke file bootstrap/providers.php

Selanjutnya, kita akan melakukan konfigurasi pada file config/services.php untuk menambahkan code serta memanggil credentials yang nantinya kita masukan di file .env.

Setelah itu, kita masuk ke file .env untuk memasukan credentials yang sudah kita dapatkan pada oauth Google tadi.

Step 3. Menambahkan kolom pada table user

Agar data oauth dari Google dapat tersimpan pada database, kita perlu menambahkan kolom baru pada table user dengan cara berikut untuk membuat migration data ke tabel user.

php artisan make:migration google_social_auth_id --table=users

Selanjutnya, kita menambahkan script berikut pada file database/migrations/file google_social_auth_id yang sudah dibuat untuk menambahkan kolom gauth_id dan gauth_type ke dalam table users.

Selanjutnya, kita migrate datanya ke database dengan menggunakan perintah berikut:

php artisan migrate

Sebelumnya menambahkan kolom baru, kita perlu menyesuaikan model usernya pada file app/Models/User.php seperti gambar berikut:

Step 4. Membuat Controller login

Pada step ini, kita akan memuat controller login dengan 3 method.

Pertama, untuk login dengan mengisikan email dan password yang sudah ada didatabase.
Kita perlu mengarahkan pengguna ke penyedia OAuth (dalam hal ini Google).
Menyiapkan route untuk menerima balasan atau callback dari Google setelah proses login berhasil. Untuk membuat controller dengan berikut :

php artisan make:controller LoginController

Setelah membuat controller login, kita perlu membuat function untuk memproses data yang akan digunakan untuk login ke aplikasi kita. Yang pertama, kita buat function login untuk login manual dengan menginputkan email serta password seperti panduan sebelumnya yang sudah dibuat.

Serta jangan lupa untuk menambahkan statement berikut:

use Illuminate\Support\Facades\Auth;
use App\Models\User;
use Laravel\Socialite\Facades\Socialite;

yang kedua, kita membuat function yang mengarahkan pengguna ke penyedia OAuth (dalam hal ini Google).

Yang terakhir, kita buat function untuk menyiapkan route agar menerima balasan atau callback dari Google setelah proses login berhasil.

Controller function route agar menerima balasan atau callback dari Google

Step 5. Membuat view login

Pada step ini, kita akan membuat tampilan view formlogin yang akan dipakai untuk menginputkan email dan password untuk loginnya atau menggunakan login dengan Hoogle. Dan juga kita akan membuat tampilan view setelah loginnya :

Script view Login

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container d-flex justify-content-center align-items-center vh-100">
        <div class="card p-4 shadow" style="width: 400px;">
            <h3 class="text-center">Login</h3>
            <form method="POST" action="{{ route('login') }}">
                @csrf
                <div class="mb-3">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" name="email" class="form-control" id="email" required autofocus>
                    @error('email')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" name="password" class="form-control" id="password" required>
                    @error('password')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary shadow-sm w-50">Login</button>
                    <a href="{{ route('auth') }}" class="btn btn-white w-50 shadow-sm border">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 48 48" style="vertical-align:middle;margin-right:6px;">
                            <path fill="#4285F4" d="M24 9.5c3.54 0 6.7 1.22 9.19 3.22l6.85-6.85C35.44 2.36 29.97 0 24 0 14.61 0 6.27 5.7 2.13 14.01l8.01 6.23C12.36 13.16 17.73 9.5 24 9.5z"/>
                            <path fill="#34A853" d="M46.1 24.5c0-1.64-.15-3.22-.42-4.75H24v9.02h12.44c-.54 2.92-2.17 5.39-4.62 7.06l7.19 5.59C43.73 37.36 46.1 31.44 46.1 24.5z"/>
                            <path fill="#FBBC05" d="M10.14 28.24c-.62-1.86-.98-3.84-.98-5.89s.36-4.03.98-5.89l-8.01-6.23C.73 13.97 0 18.81 0 24c0 5.19.73 10.03 2.13 14.01l8.01-6.23z"/>
                            <path fill="#EA4335" d="M24 48c6.48 0 11.93-2.14 15.91-5.84l-7.19-5.59c-2.01 1.35-4.59 2.15-8.72 2.15-6.27 0-11.64-3.66-13.86-8.74l-8.01 6.23C6.27 42.3 14.61 48 24 48z"/>
                        </svg>
                        Login with Google
                    </a>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

Script view setelah login


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beranda Setelah Login</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-light bg-light mb-4">
        <div class="container-fluid">
            <span class="navbar-brand mb-0 h1">Selamat Datang</span>
        </div>
    </nav>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card shadow-sm">
                    <div class="card-body text-center">
                        {{-- <h4 class="mb-3">Halo, {{ Auth::user()->name ?? 'User' }}!</h4> --}}
                        <p>Anda berhasil login.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Step 6. Membuat route

Di dalam file routes/web.php, tambahkan route untuk menampilkan form login dan untuk memproses login.

Step 7. Pengujian

Langkah terakhir sesi belajar Laravel untuk membuat halaman login dengan Socialite adalah melakukan pengujian. Silahkan dapat menjalankan php artisan serve untuk menjalankan website Anda. Kemudian, silahkan lakukan login dengan Google seperti tampilan form login berikut:

Setelah login, halaman akan di redirect oleh Google seperti berikut:

Tampilan redirect google - Belajar Laravel

Jika berhasil, maka akan masuk ke halaman dashboard atau login seperti gambar berikut.

Cek di database, apakah data email google telah masuk atau belum. Jika berhasil, maka data akan terinput di database seperti gambar berikut.

Data user di database - Belajar Laravel Bagian 21

Anda juga dapat menyesuaikan controller login, sehingga setelah user login dapat diarahkan ke halaman tertentu sesuai dengan kebutuhan website Anda.

Penutup

Laravel Socialite adalah solusi mudah untuk menambahkan fitur login modern dan user-friendly ke dalam aplikasi Laravel Anda. Selain mempercepat developing, Socialite juga memberikan pengalaman login yang lebih nyaman bagi pengguna.

Bagi Anda yang sedang belajar Laravel atau tengah mengembangkan proyek skala profesional, Socialite dapat menjadi alat bantu penting dalam membangun sistem otentikasi yang efisien dan aman.

Pada series belajar laravel bagian 22, kita akan belajar bagaimana cara membuat fitur forgot password di Laravel dengan mudah.

Demikian seri belajar Laravel bagian 21 tentang cara membuat fitur login ke aplikasi Laravel dengan Socialite. Simak terus seri belajar Laravel kami selanjutnya ya. Semoga bermanfaat.