في هذا المقال نكمل سلسلة إضافة إمكانية تسجيل الدخول للموقع بإستخدام مواقع التواصل الإجتماعي، فبعد أن تم شرح كيفية تسجيل الدخول بواسطة google و linkedin سيتم في هذا المقال شرح كيفية القيام بذلك بإستخدام github

كما هو الحال في قوقل ولينكد إن، فإنه أيضا في جت هب يجب الحصول على app_id, secret_id.

إعدادات جت هب

زيارة الرابط https://github.com/settings/developers وستظهر لدينا الشاشة التالية

في القائمة الجانبية نختار 0Auth Apps ونضغط على Register a new application

نقوم بتعبئة البيانات مثل إسم التطبيق، رابط التطبيق، و Authorization callback URL

بعد الضغط على Register application تظهر لنا شاشة تحتوي على Client ID وبالضغط على Generate a new client secret نحصل على secret id

بالإمكان إختيار شعار للتطبيق. غالبا ما يتم وضع شعار الموقع الذي نعمل علية.

إعدادات لارافيل

إضافة github driver في ملف service.php

'github' => [
    'client_id'     => env('GITHUB_CLIENT_ID'),
    'client_secret' => env('GITHUB_CLIENT_SECRET'),
    'redirect'      => env('GITHUB_REDIRECT')
],

في ملف .env نضع قيمة client_id,client_secret_, redirect

GITHUB_CLIENT_ID=9388b4ffb1fcecccb59c
GITHUB_CLIENT_SECRET=7903b2dc7b3d99d4b5e28700b5fd8c94cc447b80
GITHUB_REDIRECT=http://127.0.0.1:8000/callback/github

إضافة providers, aliases في ملف config/app.php

'providers' => [
    /*
     * Package Service Providers...
     */
    Laravel\Socialite\SocialiteServiceProvider::class,
]

'aliases' => [
    ...
    'Socialite' => Laravel\Socialite\Facades\Socialite::class,
]

تعديل ملف users migration وذلك لإضافة حقلي social_id, social_type

php artisan make:migration addSocialToUsers 

public function up()
{
    Schema::table('users', function ($table) {
        $table->string('social_id')->nullable();
        $table->string('social_type')->nullable();
    });
}

تنفيذ migration

php artisan:migrate

التعديل على User Model 

protected $fillable = [
        'name',
        'email',
        'password',
        'social_id',
        'social_type'
    ];
 
    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
        'two_factor_recovery_codes',
        'two_factor_secret',
    ];
 
    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
 
    /**
     * The accessors to append to the model's array form.
     *
     * @var array
     */
    protected $appends = [
        'profile_photo_url',
    ];

إضافة route في ملف web.php

Route::get('auth/github', [SocialGithubController::class, 'redirectToGithub']);
Route::get('callback/github', [SocialGithubController::class, 'handleCallback']);

إنشاء SocialGithubController ووضع الدوال redirectToGithub و handleCallback

php artisan make:controller SocialGithubController

class SocialGithubController extends Controller
{
    public function redirectToGithub()
    {
        return Socialite::driver('github')->redirect();
    }

    public function handleCallback()
    {
        try {
            $user = Socialite::driver('github')->user();
            $finduser = User::where('social_id', $user->id)->first();
            if($finduser){
                Auth::login($finduser);
                return redirect('/home');
            }else{
                $newUser = User::create([
                    'name' => $user->name,
                    'email' => $user->email,
                    'social_id'=> $user->id,
                    'social_type'=> 'github',
                    'password' => encrypt('github123456')
                ]);
                Auth::login($newUser);
                return redirect('/home');
            }
        } catch (Exception $e) {
            dd($e->getMessage());
        }
    }
}

إضافة زر login with github إلى صفحة login

<a href="{{ url('auth/github') }}">
  <strong>Github Login</strong>
</a> 

بعد الضغط على زر تسجيل الدخول تظهر لنا هذه الشاشة حيث يتم تطلب صلاحيات الوصول، وبالضغط على Authorize يتم تسجيل دخول المستخدم بشكل سليم.