บทความนี้จะขอพูดสิ่งที่ปัจจุบันถือได้ว่าเป็นเรื่องพื้นฐานไปแล้วสำหรับเว็บไซต์ที่มีระบบสมาชิกนั่นก็คือการ Login ด้วยบัญชี Social Network ต่าง ๆ ไม่ว่าเป็น Facebook, Google(Gmail), Twitter, Github และอื่น ๆ
ซึ่งหลาย ๆ คนก็รู้ดีว่าภายใต้การใช้งานที่เรียบง่าย ๆ แสนง่ายนั้น มันแฝงไปด้วยขั้นตอนการพัฒนาที่วุ่นวาย หลายขั้นตอนซะเหลือเกิน ไปว่าจะเป็นการเปิด App Account ของแต่ละเจ้า การติดตั้ง SDK จนถึงการเขียน API เพื่อเชื่อมต่อกว่าจะใช้งานได้จริงก็สูญเสียพลังงานไปไม่น้อย
แต่สำหรับใครที่ใช้ Laravel ก็ง่ายขึ้น เพราะเราก็กำลังจะมาใช้งาน Laravel Socialite ซึ่งเป็น Package ที่ตอบโจทย์ในเรื่องการไม่ต้องการติดตั้ง SDK ของ Social ใด ๆ ที่เราจะ Connect อีกต่อไป แค่ติดตั้ง Package ทีเดียวเราก็เชื่อมต่อได้แทบจะทุก Social ที่เรานึกออกเลยแหละ ถ้าไม่เชื่อคลิกเข้ารายการ Social ที่สามารถ Connect ได้ที่ลิงค์นี้ Socialite Providers
เริ่มติดตั้ง
ติดตั้ง Socialite ด้วยคำสั่ง Composer
composer require laravel/socialiteสำหรับ Package นี้เป็น Offcial Package ของ Laravel ก็พร้อมใช้งานแล้วครับ
ตอนนี้เราก็มาเขียน Controller ให้สามารถใช้งาน Socialite ได้ โดยตัวอย่างนี้ผมจะเขียนดัดแปลงให้ Auth/LoginController.php ซึ่งเป็นไฟล์ที่สร้างมาจากคำสั่ง php artisan make:auth สามารถ Login ด้วย Facebook หรือ Social อื่น ๆ ได้ครับ
เพิ่มคำสั่ง use Socialite; ที่ด้านบนของไฟล์ ใน Class LoginController ให้เพิ่ม Method สำหรับ Redirect ไป Facebook และ รับ Callback กลับมาจาก Facebook แล้วบันทึกหรือดึงข้อมูลของ User ตามโค้ดด่างล่างนี้
...
use Socialite; use App\User; use App\SocialAccounts;
class LoginController extends Controller
{
......
/**
* Social Login
*/
public function redirectToProvider($provider = 'facebook')
{
return Socialite::driver($provider)->redirect();
}
public function handleProviderCallback($provider = 'facebook')
{
$providerUser = Socialite::driver($provider)->user();
$user = $this->createOrGetUser($provider, $providerUser);
auth()->login($user);
return redirect()->to('/home');
} public function createOrGetUser($provider, $providerUser) { /** Get Social Account */ $account = SocialAccount::whereProvider($provider) ->whereProviderUserId($providerUser->getId()) ->first(); if ($account) { return $account->user; } else { /** Get user detail */ $userDetail = Socialite::driver($provider)->userFromToken($providerUser->token); /** Create new account */ $account = new SocialAccount([ 'provider_user_id' => $providerUser->getId(), 'provider' => $provider, ]); /** Get email or not */ $email = !empty($providerUser->getEmail()) ? $providerUser->getEmail() : $providerUser->getId() . '@' . $provider . '.com'; /** Get User Auth */ if (auth->check()) { $user = auth()->user(); }else{ $user = User::whereEmail($email)->first(); } if (!$user) { /** Get Avatar */ $image = $provider . "_" . $providerUser->getId() . ".png"; $imagePath = public_path(config('app.media.directory') . "users/avatar/" . $image); file_put_contents($imagePath, file_get_contents($providerUser->getAvatar())); /** Create User */ $user = User::create([ 'email' => $email, 'name' => $providerUser->getName(), 'username' => $providerUser->getId(), 'avatar' => $image, 'password' => bcrypt(rand(1000, 9999)), ]); } /** Attach User & Social Account */ $account->user()->associate($user); $account->save(); return $user; } } }
แล้วไปเพิ่ม Route ใหม่ที่ไฟล์ routes/web.php สำหรับ Redirect และ Callback กับ Facebook หรือ Social อื่น ๆ
Route::prefix('login')->group(function () {
Route::get('/{provider}', 'Auth\[email protected]')->name('login.provider');
Route::get('/{provider}/callback', 'Auth\[email protected]')->name('login.provider.callback');
});
ต่อมาก็สร้างไฟล์ Migration ใหม่ด้วยคำสั่ง
php artisan make:migration create_social_accounts_table
ไฟล์ migration จะถูกสร้างใหม่ที่โฟลเดอร์ database/migrations/
จะเจอที่ไฟล์ใหม่ประมาณนี้ ........ create_social_accounts_table.php ให้เพิ่ม Field ชื่อ provider และ provider_user_id ตามโค้ดด้านล่าง
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateSocialAccountsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('social_accounts', function (Blueprint $table) {
$table->increments('id');
$table->integer('user_id');
$table->string('provider'); $table->string('provider_user_id'); $table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('social_accounts');
}
}
แล้วรันคำสั่ง migrate
php artisan migrate(สำหรับใครที่อยากแสดง Avatar ของ Facebook ให้ไปเพิ่ม Field ชื่อว่า avatar ที่ตาราง User ด้วยนะ)
เอาละสุดท้ายก็ตั้งค่าข้อมูลสำคัญสำหรับเชื่อมต่อกับ Facebook เข้าไปที่ config/services.php ด้านต่างก็เพิ่ม array ตั้งค่าของ facebook ตามนี้
'facebook' => [
'client_id' => env('FACEBOOK_CLIENT_ID', {Your App ID}),
'client_secret' => env('FACEBOOK_CLIENT_SECRET', {Your App Secret}),
'redirect' => env('APP_URL') . 'login/facebook/callback',
],
สำหรับ Cliend ID, Client Secret ใส่ตามที่ขึ้นที่หน้า app ของเราที่สร้างไว้ที่ Facebook Developer ครับ
แต่ถ้าใครยังไม่ได้สร้าง app ใน Facebook Developer ให้เข้าไปที่ Facebook Developers
สร้าง Facebook App
เจอเว็บแบบนี้แล้วคลิกที่ My Apps > Add New App จะพบการ Modal ให้เราตั้งชื่อ App และใส่ Email ติดต่อของเราไป เสร็จแล้วก็กด Create App ID
พอสร้างเสร็จให้คลิกที่เมนู Settings > Basic ให้เราใส่ข้อมูลให้ครบแบบนี้
ต่อมาคือการเพิ่ม Product ของ App ในการที่นี้คือ Facebook Login ให้กดปุ่ม + หลังคำว่า Products + หากล่องที่เขียนว่า Facebook Login แล้วกดปุ่ม Set Up ด้านล่างของกล่อง
คลิกเลือกประเภทเป็น Web
แล้วใส่ URL ของเว็บที่จะใช้ Connect เข้ามา
กด Save และข้าม Step การติดตั้ง SDK ได้ไปเลย เพราะเรากำลังจะใช้ Laravel Socialite มาจัดการตรงนี้ครับ
คลิกที่ Facebook Login > Settings จะเจอหน้าตั้งแค่แบบนี้
สิ่งที่จำเป็นคือการเปิด Client OAuth Login, Web OAuth Login, Use Strict Mode for Redirect URIs, Enforce HTTPS และใส่ Valid OAuth Redirect URIs เป็น URL ที่เราจะให้ Facebook Callback กลับไปที่เว็บเราครับ
https://{your_domain}/login/facebook/callbackเอ๊าะ!! เมื่อใช้งานจริงที่โปรดักชั่นให้เปิด Status เป็น ON แบบรูปด้านบนด้วยครับ
ประยุกต์ใช้
การใช้งานก็แค่สร้างปุ่ม Login with Facebook แบบไหนก็ได้ขึ้นมาที่ View แล้วใส่ลิ้งค์เป็น Route ที่ใช้ Redirect ไป Facebook ที่เซ็ตไว้คือ /login/facebook
พอคลิกที่ปุ่มก็จะ Redirect ไปที่หน้าขอใช้ App ของ Facebook แบบนี้ครับ
พอเราคลิก Continue as ... Facebook ก็จะ Callback กลับมาที่เว็บเราตาม URL ที่เราเซ็ตไว้คือ /login/facebook/callback ซึ่งเราแล้วเขียนให้เก็บชื่อ อีเมล และ Avatar เอาไว้ และ Redirect ต่อไปที่หน้า /home แบบนี้ครับ
ภารกิจ Login with Facebook เรียบร้อยแล้ว และอย่างที่บอกเราสามารถ Connect กับ Social อื่น ๆ ได้อีกด้วย หวังว่าจะประยุกต์กันอย่างราบรื่นนะครับ
Mos Pongsatorn
Panachai Meetun
