Login Dengan Social Media di Laravel Menggunakan Socialite #6 : Membuat OAuth Dengan Socialite


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com
Login Dengan Social Media di Laravel Menggunakan Socialite #6 : Membuat OAuth Dengan Socialite

Login Dengan Social Media di Laravel Menggunakan Socialite #6 : Membuat OAuth Dengan Socialite - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat OAuth menggunakan Laravel Socialite.

Pada seri tutorial kali ini kita semua akan belajar dengan 2 provider saja yaitu facebook dan GitHub, meskipun begitu untuk implementasinya dengan provider lain saja saja.

Langkah 1 - Membuat Controller SocialAccount

Silahkan teman-teman jalankan perintah dibawah ini untuk membuat Controller Socialite :

php artisan make:controller Auth/SocialiteController

Setelah berhasil, silahkan teman-teman buke filenya di App/Http/Controllers/Auth/SocialiteController.php dan silahkan teman-teman ubah kodenya menjadi seperti berikut ini :

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\SocialAccount;
use App\User;
use Illuminate\Http\Request;
use Laravel\Socialite\Facades\Socialite;

class SocialiteController extends Controller
{
    /**
     * @param $provider
     * @return \Symfony\Component\HttpFoundation\RedirectResponse
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }

    /**
     * @param $provider
     * @return \Illuminate\Http\RedirectResponse
     */
    public function handleProvideCallback($provider)
    {
        try {

            $user = Socialite::driver($provider)->user();

        }catch (Exception $e) {
            return redirect()->back();
        }

        $authUser = $this->findOrCreateUser($user, $provider);

        Auth()->login($authUser, true);

        return redirect()->route('home');

    }

    /**
     * @param $socialUser
     * @param $provider
     * @return mixed
     */
    public function findOrCreateUser($socialUser, $provider)
    {
        $socialAccount = SocialAccount::where('provider_id', $socialUser->getId())
            ->where('provider_name', $provider)
            ->first();

        if ($socialAccount) {

            return $socialAccount->user;

        } else {

            $user = User::where('email', $socialUser->getEmail())->first();

            if (! $user) {
                $user = User::create([
                    'name'  => $socialUser->getName(),
                    'email' => $socialUser->getEmail()
                ]);
            }

            $user->socialAccounts()->create([
                'provider_id'   => $socialUser->getId(),
                'provider_name' => $provider
            ]);

            return $user;

        }
    }
}

Langkah 2 - Menambahkan Route

Setelah kita berhasil membuat Controller beserta fungsi-fungsinya, sekarang kita lanjutkan untuk membuat sebuah route.

Silahkan teman-teman buka file routes/web.php dan silahkan teman-teman tambahkan kode dibawah ini :

/**
 * socialite auth
 */
Route::get('/auth/{provider}', 'Auth\SocialiteController@redirectToProvider');
Route::get('/auth/{provider}/callback', 'Auth\SocialiteController@handleProvideCallback');

Langkah 3 - Menambahkan Button Login Facebook & GitHub

Selanjutnya kita akan menambahkan button Facebook & GitHub di dalam Auth Project kita. Silahkan teman-teman buka file resources/views/auth/login.blade.php dan ubahlah menjadi seperti berikut 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">{{ __('Login') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('login') }}">
                        @csrf

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

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
                                @error('email')
                                    <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="current-password">
                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-6 offset-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>


                                    <label class="form-check-label" for="remember">
                                        {{ __('Remember Me') }}
                                    </label>
                                </div>
                            </div>
                        </div>

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


                                @if (Route::has('password.request'))
                                    <a class="btn btn-link" href="{{ route('password.request') }}">
                                        {{ __('Forgot Your Password?') }}
                                    </a>
                                @endif
                                <hr>
                                <a href="/auth/facebook" class="btn btn-primary">
                                    Login Dengan Facebook
                                </a>

                                <a href="/auth/github" class="btn btn-dark">
                                    Login Dengan GitHub
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

kemudian teman-teman juga buka file resources/views/auth/register.blade.php dan ubahlah menjadi seperti berikut 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="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete=“email">

                                @error('email')
                                    <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>
                                <hr>
                                <a href="/auth/facebook" class="btn btn-primary btn-block">
                                    Register Dengan Facebook
                                </a>
                                <a href="/auth/github" class="btn btn-dark btn-block">
                                    Register Dengan GitHub
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Langkah 4 - Uji Coba Tampilan

Sekarang Silahkan teman-teman jalankan projectnya dengan perintah dibawah ini :

php artisan serve

Jika berhasil teman-teman akan melihat kurang lebih tampilannya seperti berikut ini :



CATATAN ! : disini kita belum bisa menggunakan fungsi Auth dengan Socialite, karena kita belum mendapatkan CLIENT ID dan SECRET ID dari masing-masing provider.

Di artikel selanjutnya kita akan belajar bagaimana cara mendapatkan CLEINT ID dan SECRET ID tersebut dari masing-masing provider seperti Facebook & GitHub.

Terima Kasih


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami