Bagaimana cara membuat Register atau Login ke sebuah website pada Laravel menggunakan media sosial seperti akun Facebook, Google, Twitter, Github atau yang lainnya, shingga memudahkan pengunjung web atau calon member melakukan registrasi atau login pada sebuah website atau aplikasi berbasis web. pada kesempatan ini akan dibahas bagaimana cara membuat registrasi atau loggin menggunakan Facebook dan google.
PENDAHULUAN
Register atau Login ke sebuah website tertentu kini semakin mudah dengan adanya Social Media seperti Facebook, Google seperti yang dimiliki oleh arsipti.com. Framework Laravel dengan vendor atau plugin yang bernama Socialite sangat membantu Web Master (pengembang aplikasi berbasis Web) dalam membuat fitur Register atau Login menggunakan Media Sosial. sehingga informasi umum yang dimiliki oleh calon member dapat disimpan dalam database antara lain uid, email dan avatar.
Karena ini merupakan artikel lanjutan agar tidak terjadi pembahasan yang berulang, di asumsikan framework laravel sudah pernah dibuat sampai regitrasi dan login shingga hanya perlu menambahkan socialite saja.
PEMBAHASAN
Dalam membuat Socialite Register atau Login ada beberapa hal yang harus dipersiapkan seperti pada kasus dan contoh pada artikel kali ini adalah memiliki App Facebook dan App Google, jika belum tau cara membuatnya silahkan baca Artikel "Bagaimana Cara Membuat App pada Facebook yang Terintegrasi dengan Laravel" dan "Bagimana Cara Membuat App pada Google yang Terintegrasi dengan Laravel".
Jika sudah paham silahkan baca ke langkah-langkah berikutnya
A. Mempersiapkan Socialite pada Framework Laravel
Socialite nantinya akan berguna untuk mengolah masukan dari media sosial yang digunakan untuk register atau login dari sisi client.
Buka Command Prompt atau Terminal dan masuk ke direktori Framework Laravel ketikkan perintah di bawah ini :Ingat...! Pastikan ada koneksi Internet
composer require laravel/socialiteSetelah selesai menambahkan Socialite yang perlu dilakukan adalah mendaftarkan socialite dengan cara memperbaharui Provider pada config/app.php seperti sintak di bawah ini
'providers' => [
/*
* Laravel Framework Service Providers...
*/
//Baris Provider yang lain
Laravel\Socialite\SocialiteServiceProvider::class,
],di dalam file yang sama yaitu config/app.php lakukan tambahkan aliases seperti sintak di bawah ini
/*
|--------------------------------------------------------------------------
| Class Aliases
|--------------------------------------------------------------------------
|
| This array of class aliases will be registered when this application
| is started. However, feel free to register as many as you wish as
| the aliases are "lazy" loaded so they don't hinder performance.
|
*/
'aliases' => [
//Baris Facades class yang lain
'Socialite' => Laravel\Socialite\Facades\Socialite::class,
]'simpan setelah selesai melakukan perubahan pada Provider dan Aliases
Langkah berikutnya tambahkan code pada file .env yang ada pada direktori utama
FACEBOOK_APP_ID=isi-dengan-nomor-APP-id-facebook-yang-sudah-dibuat
FACEBOOK_APP_SECRET=isi-dengan-kode-rahasia-yang-sudah-dibuat-di-facebook
FACEBOOK_REDIRECT=http://localhost:8000/social/login/facebook
GOOGLE_APP_ID=isi-dengan-nomor-APP-id-google-yang-sudah-dibuat
GOOGLE_APP_SECRET=isi-dengan-kode-rahasia-yang-sudah-dibuat-di-google
GOOGLE_REDIRECT=http://localhost:8000/social/login/googlecatatan : jika menggunakan shared hosting silahkan ganti http://localhost:8000/social/login/google dengan http://nama-domain-anda.com/social/login/google begitu juga facebook.
Sekarang lanjutkan melakukan penambahan sintak pada config/services.php seperti berikut ini:
<?php
return [
/*
|--------------------------------------------------------------------------
| Third Party Services
|--------------------------------------------------------------------------
|
| This file is for storing the credentials for third party services such
| as Stripe, Mailgun, Mandrill, 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.
|
*/
//baris servis yang lain
'facebook' => [
'client_id' => env('FACEBOOK_APP_ID'),
'client_secret' => env('FACEBOOK_APP_SECRET'),
'redirect' => env('FACEBOOK_REDIRECT'),
],
'google' => [
'client_id' => env('GOOGLE_APP_ID'),
'client_secret' => env('GOOGLE_APP_SECRET'),
'redirect' => env('GOOGLE_REDIRECT'),
]
];B. Migrasi Basisdata (Database Migration)
Ada 2 metode yang perlu diperhatikan dalam menambah kolom pada tabel Users yaitu :1. Apabila tabel Users belum pernah dimigrasi, maka yang dilakukan cukup menambahkan dan menyesuaikan sintak berikut pada direktori database/migrations/..._create_users_table.php
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->string('email')->unique();
//tambahan
$table->string('social_id');
$table->string('social_provider');
$table->string('avatar');
//akhir tambahan
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
}2. Apabila tabel Users sudah pernah dimigrasi dan sudah terbuat pada database, untuk menambah kolom/field pada tabel Users yang perlu dilakukan adalah membuat tabel migrasi baru, kembali ke Command Prompt dan ketik sintak berikut:
php artisan make:migrate tambah_field_pada_tabel_Usersperhatikan pada folder database\migrations akan terbuat sebuah file PHP baru dengan nama ..._tambah_field_pada_tabel_Users.php, buka file tersebut dan tambahkan field seperti sintak berikut :
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('tabel_posts', function (Blueprint $table) {
//
$table->string('social_id');
$table->string('social_provider');
$table->string('avatar');
});
}Kembali ke Command Prompt dan lakukan migrasi dengan perintah berikut :
php artisan migrateperiksa database dan perhatikan pada tabel Users seharunya sudah ada field yang ditambahkan setelah di migrasi
C.Memperbaharui Routes
Buka file routes.php dari folder app\Http\routes.php tambahkan dan sesuaikan sehingga tampak seperti sintak berikut:<?php
/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the controller to call when that URI is requested.
|
*/
/*
Route::get('/', function () {
return view('welcome');
});
*/
//Route yang lain : seperti home atau index
//login dengan Socialite
Route::get('social/login/redirect/{provider}', ['uses' => 'Auth\AuthController@redirectToProvider', 'as' => 'social.login']);
Route::get('social/login/{provider}', 'Auth\AuthController@handleProviderCallback');D.Menambahkan Sintak pada AuthController
Edit file AuthController.php yang ada pada folder app\Http\Controllers\Auth\AuthController.php sehingga tampak seperti sintak berikut:<?php
namespace App\Http\Controllers\Auth;
use App\User;
use Validator;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\ThrottlesLogins;
use Illuminate\Foundation\Auth\AuthenticatesAndRegistersUsers;
//tambahan untuk sosial login
use Auth;
use Socialite;
class AuthController extends Controller
{
/*
|--------------------------------------------------------------------------
| Registration & Login Controller
|--------------------------------------------------------------------------
|
| This controller handles the registration of new users, as well as the
| authentication of existing users. By default, this controller uses
| a simple trait to add these behaviors. Why don't you explore it?
|
*/
//Baris kode yang sudah ada
/**
* Redirect the user to the Facebook authentication page.
*
* @return Response
*/
public function redirectToProvider($provider)
{
return Socialite::driver($provider)->redirect();
}
/**
* Obtain the user information from Facebook.
*
* @return Response
*/
public function handleProviderCallback($provider)
{
try {
$user = Socialite::driver($provider)->User();
} catch (Exception $e) {
return redirect('/social/login/facebook');
}
$authUser = $this->findOrCreateUser($user,$provider);
Auth::login($authUser, true);
return redirect()->route('home');
}
/**
* Return user if exists; create and return if doesn't
*
* @param $provider
* @return User
*/
private function findOrCreateUser($provideruser,$providername)
{
$authUser = User::where('email', $provideruser->getEmail())->first();
if ($authUser){
return $authUser;
}
return User::create([
'name' => $provideruser->name,
'email' => $provideruser->getEmail(),
'social_id' => $provideruser->getId(),
'social_provider' => $providername,
'avatar' => $provideruser->getAvatar()
]);
}
}E. Menambahkan Sintak pada Model User
Edit Model User.php pada direktori app\User.php agar data yang dikirim dari sosial media dapat disimpan pada database yaitu tabel User/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name', 'email','social_id','social_provider','avatar','password',
];F.Membuat Layout dan Penampil Data dari Database MySql (Blading)
1. Menambahkan Kode HTML pada Login Blade
Buka folder resources\views\auth\login.blade.php kemudian tambahkan kode berikut.<a href="{{ route('social.login', ['facebook']) }}" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-facebook"></i> Login dengan Facebook</a>
<a href="{{ route('social.login', ['google']) }}" class="btn btn-block btn-social btn-google btn-flat"><i class="fa fa-google-plus"></i> Login dengan Google+</a>Catatan :
posisi kode HTML di atas silahkan disesuaikan agar terlihat bagus, namun pada intinya bertujuan untuk direct saat melakukan login dari Facebook atau Google
2. Menambahkan Kode pada View
kode ini digunakan untuk mengakses data user yang sudah melakukan register atau login, silahkan ditempatkan penggalan kode berikut sesuai dengan kebutuhan :
<img src="{{ Auth::user()->avatar }}" height="22" class="user-image" alt="User Image"> {{ Auth::user()->name }}G.Uji Coba
Setelah semua file dibuat sekarang tinggal melakukan uji coba untuk memastikan proyek sederhana yang dibuat dapat berfungsi dengan baik dengan cara kembali ke command prompt dan ketik :
php artisan serveJika memilih Google maka akan tampil sebuah form untuk meminta informasi data umum dari calon member, infomrasi ini hanya tampil saat pertama kali melakukan register atau login.
Dan hasil setelah diizinkan, secara otomatis member sudah melakukan register atau login, berikut contoh login:
PENUTUP
A.Kesimpulan
Perkembangan media sosial yang sudah menjamur dan penggunanya pun hampir diseluruh lapisan masyarakat, maka sangat perlu memanfaatkan media sosial ini untuk register dan login, oleh karena itu hanya dengan beberapa langkah webmaster pemula sudah dapat membuat register dan login dengan media sosial yaitu Facebook dan Google.
B.Saran
Pada tahap awal pengenalan framework Laravel ini, sangat diharapkan peran dan bantuan para pembaca dan penggemar framework Laravel untuk memberikan informasi atau catatan jika ada yang perlu ditambahkan, sehingga di kemudian hari tulisan ini dapat berguna bagi masyarakat luas para calon webmaster muda di Indonesia.
0 Response to "Laravel Register, Login Menggunakan Socialite (Facebook dan Google Plus) "
Posting Komentar