Module Beginner 20 Maret 2018

Tutorial Login Laravel Dengan Socialite

Belajar Login Laravel (Facebook, Twitter, Google, Github, Linkedin)

Halo semua, kali ini ketemu lagi dengan gue untuk ngebahasa login laravel dengan socialite. Nah sebelumnya kita sama-sama perlu ketahui dulu. Apa itu socialite?

Socialite adalah library laravel yang berfungsi dalam membantu proses OAuth login dengan social media yang tersedia seperti, Facebook, Twitter, Github, Linkedin, Google, dan Bitbucket. Oke sekarang kita buat file baru ya, mari kita mulai. Bagi yang udah tau cara buat project laravel, ya silahkan buat, bagi yang belum langsungkesiniaja Pertama buat database dulu, terserah lah namanya apa. Kedua setting database lo di .ENV namanya apa sama user dan password. Pergi ke databases -> migration -> create_users_table dan edit si migration kaya gini

Schema::create('users', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->string('email')->nullable();
$table->string('password', 60)->nullable();
$table->string('provider');
$table->string('provider_id');
$table->rememberToken();
$table->timestamps();
});

Kita menambahkan provider untuk menyimpan data dia login atau register dari mana, dan id nya berapa. Sekarang jangan lupa langsung migrate aja karena kita lagi belajar.

php artisan migrate

Oke kalo udah langsung mulai dengan ngedownload library nya terlebih dahulu.

composer require laravel/socialite

Oke pada kali ini gue bakalan ngajarin loginnya lewatfacebook, twitter sama googleaja ya karena ini yang paling sering, sisanya sama kok. Kalo udah sekarang nyalain Auth dari Laravel. Masukkan code dibawah

php artisan make:auth

Pergi ke App\Controllers\Auth dan cek apakah ada AuthController.php disana? kalo ada tinggal masukkin kode dibawah, kalo engga ada ya buat baru aja dulu. Setelah itu paste kode dibawah

<?php

namespace App\Http\Controllers\Auth;

use App\User;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;

class AuthController extends Controller
{

public function redirectToProvider($provider)
{
return Socialite::driver($provider)->redirect();
}

/**
* Obtain the user information from provider.  Check if the user already exists in our
* database by looking up their provider_id in the database.
* If the user exists, log them in. Otherwise, create a new user then log them in. After that
* redirect them to the authenticated users homepage.
*
* @return Response
*/
public function handleProviderCallback($provider)
{
$user = Socialite::driver($provider)->user();
$authUser = $this->findOrCreateUser($user, $provider);
Auth::login($authUser, true);
return redirect('/');
}

/**
* If a user has registered before using social auth, return the user
* else, create a new user object.
* @param  $user Socialite user object
* @param $provider Social auth provider
* @return  User
*/
public function findOrCreateUser($user, $provider)
{
$authUser = User::where('provider_id', $user->id)->first();
if ($authUser) {
return $authUser;
}
else{
$data = User::create([
'name'     => $user->name,
'email'    => !empty($user->email)? $user->email : '' ,
'provider' => $provider,
'provider_id' => $user->id
]);
return $data;
}
}
}

Sekarang pergi ke routes- > web.php dan tambahkan kode dibawah yang tidak ada.

Route::get('/', function () {
return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');
Route::get('auth/{provider}', 'Auth\AuthController@redirectToProvider');
Route::get('auth/{provider}/callback', 'Auth\AuthController@handleProviderCallback');

{provider}akan diisi dengan facebook/twitter/google pada code dibawah nanti. Sekarang pergi ke views -> auth -> login.blade.php dan edit aja kaya gini

@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-sm-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

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

@if ($errors->has('email'))
<span class="invalid-feedback">
<strong>{{ $errors->first('email') }}</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">
<strong>{{ $errors->first('password') }}</strong>
</span>
@endif
</div>
</div>

<div class="form-group row">
<div class="col-md-6 offset-md-4">
<div class="checkbox">
<label>
<input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> {{ __('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>

<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
</div>
</div>

<div class="form-group row">
<div class="col-md-6 offset-md-4">
<a href="{{ url('/auth/google') }}" class="btn btn-github"><i class="fa fa-github"></i> Google</a>
<a href="{{ url('/auth/twitter') }}" class="btn btn-twitter"><i class="fa fa-twitter"></i> Twitter</a>
<a href="{{ url('/auth/facebook') }}" class="btn btn-facebook"><i class="fa fa-facebook"></i> Facebook</a>
</div>
</div>
</form>
<div class="form-group row mb-0">
<div class="col-md-8 col-md-offset-4">

</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection

Silahkan buka folderconfig -> services.phpdan tambahkan kode dibawah ini.

<?php

return [

/*
|--------------------------------------------------------------------------
| Third Party Services
|--------------------------------------------------------------------------
|
| This file is for storing the credentials for third party services such
| as Stripe, Mailgun, SparkPost and others. This file provides a sane
| default location for this type of information, allowing packages
| to have a conventional place to find your various credentials.
|
*/

'mailgun' => [
'domain' => env('MAILGUN_DOMAIN'),
'secret' => env('MAILGUN_SECRET'),
],

'ses' => [
'key' => env('SES_KEY'),
'secret' => env('SES_SECRET'),
'region' => 'us-east-1',
],

'sparkpost' => [
'secret' => env('SPARKPOST_SECRET'),
],

'stripe' => [
'model' => App\User::class,
'key' => env('STRIPE_KEY'),
'secret' => env('STRIPE_SECRET'),
],

/* Social Media */
'facebook' => [
'client_id'     => env('FB_ID'),
'client_secret' => env('FB_SECRET'),
'redirect'      => env('FB_URL'),
],

'twitter' => [
'client_id'     => env('TWITTER_ID'),
'client_secret' => env('TWITTER_SECRET'),
'redirect'      => env('TWITTER_URL'),
],

'google' => [
'client_id'     => env('GOOGLE_ID'),
'client_secret' => env('GOOGLE_SECRET'),
'redirect'      => env('GOOGLE_URL'),
],

];

Kalo udah sekarang edit file .ENV kamu, tambahkan kode dibawah ini

TWITTER_ID=
TWITTER_SECRET=
TWITTER_URL=

FB_ID=
FB_SECRET=
FB_URL=

GOOGLE_ID=
GOOGLE_SECRET=
GOOGLE_URL=

Oke gue jelasin sedikit dulu, jadi kita akan ngebuat aplikasi OAuth dengan ketiga social media tersebut, kita perlu daftar di masing-masing social media untuk dapetin key tersebut, dan caranya adalah dengan memasukkan ID, SECRET KEY, dan URL CALLBACK dari aplikasi yang kita buat di socmed tersebut. Oke mungkin ID sama SECRET KEY kalian paham, tapi mungkin aja ada yang nanya URL CALLBACK itu apasih?

URL CALLBACK adalah URL yang dikunjungi ketika si sosial media nangkep request dari website yang elu buat. Biasanya si URL Callback ini akan nyesuain sama secret key sama id yang udah dibuat. oke pertama Facebook dulu, yuk sama-sama cabut keDeveloper Facebookdan buat aplikasi baru.

Oke silahkan buat aplikasi baru. nanti akan ada popup nama tampilan dan email kalian, isi aja dengan nama tampilan belajar-login-socialite

Kalo gue namanya Nyoba login, sekarang pilih masuk produk masuk facebook untuk make API Login Facebook. Klik siapkan.

Kalo muncul gini di skip aja dulu, langsung pindah kebawah

Klik pengaturan -> dasar (Settings -> general kalo lo berbahasa inggris, entah kenapa pengaturan gue b.indo).

ID aplikasi adalah FB_ID di .env kita dan Kunci Rahasia Aplikasi adalah FB_SECRET di .env kita. Copy masing-masing dan tambahkan ke .env

FB_ID=250525818839772
FB_SECRET=d878cc9ba3c60360a742cc33672c3315
FB_URL=https://localhost:8000/auth/facebook/callback

Jangan lupa harus https:// ya karena facebook maksa kita buat https

Sekarang pergi ke produk login by facebook, dan ke settings.

Nah di URI pengalihan OAuth valid tambahin tuh https://localhost:8000/auth/facebook/callback kenapa gitu? karena facebook maksa minta https:// Sekarang jalanin laravelnya dan akses ke localhost:8000/login

Bagi yang pake firefox atau google chrome pasti ditanya kaya gini, tenang aja, ini tetep an kok, ini kan di server sendiri. Kenapa punya guesocialite.c2.com? karena gue pake serverHomestead, atau yang biasa pakeLARAGONpasti sering ngubah nama projectnya jadinamaproject.devini akan gue jelaskan di tutorial yang akan datang. Cukup klik advanced dan add exception aja, tidak ada alasan untuk tidak masuk, kan servernya di localhost, ngapain takut datanya kecuri? hehehe.

Pilih home dan liat hasilnya.

Facebook berhasil? Sekarang tinggal tahap selanjutnya, TWITTER ! Masuk sini untuk lari ke apps twitter

Ini tampilannya, sekarang kita CREATE NEW APP.

nah sok diikutin aja coba. Disini bedanya adalah twitter gabutuh HTTPS. Intinya twitter ga maksa kita buat pake HTTPS.

Yup we’re finished for create the app.

Pergi kekeys and access tokens, dan kamu bisa melihat Consumer Key yang akan digunakan sebagai TWITTER_ID dan Consumer Secret sebagai TWITTER_SECRET Sekarang ganti Consumer Key dan Consumer Secret kamu di .env

TWITTER_ID=consumer key twitter
TWITTER_SECRET=consumer secret twitter
TWITTER_URL=http://localhost:8000/auth/twitter/callback

Twitter gabutuh HTTPS kok jadi http aja gapapa. Sekarang coba deh login lewat twitter.

Oke twitter kelar. Twitter paling gampang loh FYI ahahaha.

INFO TERBARU:

Terhitung Maret 2019, Google menutup API Google+ (https://developers.google.com/+/api-shutdown) yang membuat kita harus sign in Google dengan metode Javascript di web (https://developers.google.com/identity/sign-in/web/). Sehingga Login Socialite sudah tidak dapat menggunakan Google lagi dan tutorial login dengan Google telah saya hapus. Saya akan menuliskan cara login dengan Google Sign In Websites (Javascript & Laravel) di tutorial selanjutnya (setelah senggang hehehe) !

— Depok, 8 Maret 2019 Untuk github, linkedin, bitbucket silahkan nyoba sendiri aja ya wkwkwk prosesnya sama kok! Oke segitu aja ya yang bisa gue jelasin, kalo ada yang error bisa komen dimari siapa tau gue bisa bantu. M Hudya Ramadhana (@mhudyaramadhana) * Instagram photos and videos219 Followers, 267 Following, 7 Posts - See Instagram photos and videos from M Hudya Ramadhana (@mhudyaramadhana)instagram.com Kiddy.xyz (@kiddy_xyz) | TwitterThe latest Tweets from Kiddy.xyz (@kiddy_xyz). Punya mimpi suatu hari ingin terkenal karena punya karya seperti Mark…twitter.com

Artikel ini merupakan konten legacy dari blog Medium (Tahun 2017). Beberapa konsep atau sintaks mungkin sudah mengalami perubahan pada versi terbaru.