ثبت نام و لاگین خودکار در لاراول با اکانت جمیل،گیت هاب و ... با پکیج sociallite

امروزه میشه گفت تمام کاربران حداقل دارای یک اکانت جمیل هستند،اگر مخاطبین سایت شما برنامه نویسان هستند که بی شک یک اکانت گیت هاب هم دارند.این یه فرصت عالیه تا با کمک کتابخانه socialite بیاییم و عملیات ثبت نام و لاگین رو برای کاربر تبدیل به یک دکمه کنیم:)

در این مقاله با من همراه باشید تا این مورد رو روی یک پروژه پیاده سازی کنیم

1-ایجاد یک پروژه جدید لاراولی

ابتدا با وارد کردن دستور زیر در ترمینال خود اقدام به ساخت یه پروژه جدید میکنیم.

composer create-project --prefer-dist laravel/laravel blog

2-نصب پکیج Socialite و کانفیگ

برای نصب پکیج socialite کافیست دستور زیر را در ترمینال وارد کنید:

composer require laravel/socialite

برای حالا باید اون رو به لیست providers ها و aliases های خودمون داخل فایل config/app.php کنیم.

برای این کار وارد فولدر config میشیم و سپس فایل app.php رو باز میکنیم و موارد زیر رو به بخش های مربوطه اضافه میکنیم.

'providers' => [
Laravel\Socialite\SocialiteServiceProvider::class,
]

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

3-ساخت Migration

وارد migration مربوط به users میشویم و فیلد های زیر را وارد میکنیم(شما میتونید فیلد های اضافی دلخواه خودتون رو اضافه کنید،این یه نمونه ساده تستی هست)

public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->string('email')->unique();
        $table->string('password');

        $table->string('avatar')->nullable();
        $table->string('provider', 20)->nullable();
        $table->string('provider_id')->nullable();
        $table->string('access_token')->nullable();

        $table->rememberToken();
        $table->timestamps();
    });
}

و در نهایت اجرای دستور زیر برای اجرای migration و ساخت جدول users

php artisan migrate

4-ویرایش Model User:

ما قصد داریم فیلد هایی که اضافه کردیم رو مقدار دهی کنیم و برای این کار لازمه تا اونها رو به لیست fillable ها اضافه کنیم،وارد مدل user میشویم و fillable ها رو به این شکل تغییر میدیم.

protected $fillable = [
     'name', 'email', 'password',
     'avatar', 'provider_id', 'provider',
     'access_token'
];

یا اینکه میتونید از guarded استفاده کنید و تنها فیلد id رو محدود کنید و به بقیه فیلد ها دسترسی بدهید.

protected $guarded = ['id'];

5-اضافه کردن سرویس ها

خب حالا قصد داریم تا سرویس های جمیل و گیت هاب رو اضافه کنیم به پروژه خودمون.

ابتدا وارد پوشه config میشویم و بعد فایل services.php رو باز میکنیم و قطعه کد زیر که مربوط به سرویس گوگل و گیت هاب هست رو اضافه میکنیم.

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect' => 'http://linuxtools.ir/login/google/callback',
],
'github' => [
    'client_id' => env('GITHUB_CLIENT_ID'),
    'client_secret' => env('GITHUB_CLIENT_SECRET'),
    'redirect' => 'http://linuxtools.ir/login/github/callback',
],

دو مورد client_id و client_secret رو باید از سرویس مدنظر بگیریم که در ادامه میگیریم و مقدار دهی میکنیم و redirect آدرس مسیری هست که زمانی که فرایند احراز هویت انجام شد کاربر به کجا فرستاده بشه.

شما میتونید از سرویس های facebook و twitter هم استفاده کنید مشابه همین موارد،اما توی این مقاله ما قصد این کار رو نداریم اما اشاره ای بهش میکنیم تا اگر قصد استفاده از این سرویس ها رو هم داشتید خیلی ساده پیاده سازی کنید.

دریافت اطلاعات مورد نیاز از گوگل و گیت هاب

در ادامه ما نیاز به یک client-id و یک client_secret داریم که لازم هست از سرویس های مربوطه(گوگل و گیت هاب) اونها رو تهیه کنیم.ابتدا میریم به سراغ دریافت اونها از گوگل.

1-ابتدا فیلترشکن خودتون رو روشن کنین چون متاسفانه سرویس های گوگل برای ما در دسترس نیست.

2-وارد این آدرس بشید و مطابق تصویر زیر وارد قسمت Credentials بشید.

3-سپس روی مورد دوم OAuth client ID بزنید(مطابق شکل زیر)

4-در این قسمت Name یک نام برای اپلیکیشن قرار میدهیم و آدرس Authoraized redirect URls رو مشابه با آدرسی قرار میدهیم که در فایل services.php برای سرویس مدنظر قرار دادیم تا زمانی که احرازهویت انجام شد به اون آدرس هدایت بشه،و در نهایت در قسمت Authorized Javascript origins آدرس صفحه اصلی وبسایت خودمون رو قرار میدیم(مطابق شکل زیر)

در نهایت client_id و client_secret برای ما به نمایش در میان و ما باید وارد فایل .env پروژه خودمون بشیم و با تعریف کردن 2مقدار جدید،اونها رو با اطلاعات دریافتی مقدار دهی کنیم.مشابه کد زیر:

GOOGLE_CLIENT_ID="cliend_id"
GOOGLE_CLIENT_SECRET="secret_id"

خب کار ما با سرویس گوگل تمام هست،حالا میریم به سراغ گیت هاب:

1-ابتدا وارد این آدرس میشویم

2-و از قسمت OAuth Apps روی دکمه New OAuth Apps میزنیم(مشابه تصویر زیر)

3-در این بخش در قسمت Application Name یک نام برای اپلیکیشن خود در نطر میگیریم(این نام نمایشی برای کاربر هست) و در قسمت HomePage URL آدرس صفحه اصلی وبسایت خودمون رو قرار میدیم و در نهایت در قسمت Authorization callback URL آدرس صفحه رو مشابه با آدرسی قرار میدهیم که در فایل services.php برای سرویس مدنظر قرار دادیم تا زمانی که احرازهویت انجام شد به اون آدرس هدایت بشه.

4-در این بخش client_idبرای شما نمایش داده شده و برای نمایش و ساخت یک secret هم کافیه روی دکمه Generate a new client Secret میزنیم(مشابه تصویر زیر)

5-حالا وارد فایل .env پروژه خودمون میشیم و 2تا متغییر جدید مشابه کد زیر تعریف میکنیم و مقادیر اون رو برابر قرار میدیم با مقادیری که از گیت هاب دریافت کردیم:

و ما باید وارد فایل .env پروژه خودمون بشیم و با تعریف کردن 2مقدار جدید،اونها رو با اطلاعات دریافتی مقدار دهی کنیم.مشابه کد زیر:

GITHUB_CLIENT_ID=&quotcliend_id&quot
GITHUB_CLIENT_SECRET=&quotsecret_id&quot

خب کار با ما سرویس ها تموم هست و میشه گفت 70درصد کار رو با موفقیت انجام دادیم:)

6-ساخت روت ها

حالا نیاز هست تا وارد فایل پوشه routes بشیم و سپس درون فایل Web.php روت های زیر رو اضافه کنیم(شما میتونید اونها رو شخصی سازی کنید)

Route::get('auth/social', 'Auth\LoginController@show')->name('social.login');
Route::get('oauth/{driver}', 'Auth\LoginController@redirectToProvider')->name('social.oauth');
Route::get('oauth/{driver}/callback', 'Auth\LoginController@handleProviderCallback')->name('social.callback');

7-ساخت کنترلر

ابتدا با استفاده از دستور زیر یک کنترلر ایجاد میکنیم

php artisan make:controller LoginController

و حالا به کنترلی که ایجاد کردیم و متد های زیر براش ایجاد میکنیم.

class LoginController extends Controller
{

  public function __construct()
  {
      $this->middleware('guest');
    }
   protected $providers = [
     'github','google'
];

public function show()
    {
        return view('auth.login');
    }
public function redirectToProvider($driver){
          if( ! $this->isProviderAllowed($driver) ) {
                return $this->sendFailedResponse(&quot{$driver} is not currently supported&quot);
        }
     try {
        return Socialite::driver($driver)->redirect();
        } catch (Exception $e) {
          // You should show something simple fail message
            return $this->sendFailedResponse($e->getMessage());
     }
  }  
public function handleProviderCallback( $driver )
  {
   try {
            $user = Socialite::driver($driver)->user();
        } catch (Exception $e) {
            return $this->sendFailedResponse($e->getMessage());
        }
    // check for email in returned user
     return empty( $user->email )
            ? $this->sendFailedResponse(&quotNo email id returned from {$driver} provider.&quot)
            : $this->loginOrCreateAccount($user, $driver);
  }
  protected function sendSuccessResponse()
 {
       return redirect()->intended('home');
    }
protected function sendFailedResponse($msg = null)
    {
        return redirect()->route('social.login')
            ->withErrors(['msg' => $msg ?: 'Unable to login, try with another provider to login.']);
    }
    protected function loginOrCreateAccount($providerUser, $driver)
    {
        // check for already has account
        $user = User::where('email', $providerUser->getEmail())->first();
        // if user already found
        if( $user ) {
            // update the avatar and provider that might have changed
          $user->update([
                'avatar' => $providerUser->avatar,
                'provider' => $driver,
              'provider_id' => $providerUser->id,
              'access_token' => $providerUser->token
           ]);
        } else {
         // create a new user
            $user = User::create([
                'name' => $providerUser->getName(),
                'email' => $providerUser->getEmail(),
                'avatar' => $providerUser->getAvatar(),
               'provider' => $driver,
                'provider_id' => $providerUser->getId(),
                'access_token' => $providerUser->token,
                // user can use reset password to create a password
                'password' => ''&quot
            ]);
        }
       Auth::login($user, true);
      return $this->sendSuccessResponse();
    }
   private function isProviderAllowed($driver)
   {
       return in_array($driver, $this->providers) && config()->has(&quotservices.{$driver}&quot);
  }
}

خب دیگه کار حدودا تموم هست:) حالا وقتشه تا وارد صفحات Blade خودمون بشیم و یک دکمه ایجاد کنیم.

8-ساخت دکمه ها در صفحه وورد و ثبت نام(مرحله آخر)

خب وارد Blade مربوط به صفحه ورود و ثبت نام خودمون میشیم و این قطعه کد رو اضافه میکینم که مربوط به دکمه های وورد خودکار جمیل و گیت هاب هست.

<a href=&quot{{ route('social.oauth', 'google') }}&quot class=&quotbtn btn-danger btn-block&quot>
            Login with Google
       </a>
<a href=&quot{{ route('social.oauth', 'github') }}&quot class=&quotbtn btn-default btn-block&quot>
              Login with Github
   </a>

خسته نباشید.الان میتونید پروژه خودتون رو روی سرور ببرید و تست کنید و از این امکان فوق العاده لذت ببرید.

نکته:فقط روی هاست یا سرور تست بفرمایید ممکنه روی لوکال نتیجه مطلوب و موردنظر رو نده:)

ممنونم که با من همراه بودید،سوالی بود داخل کامنت ها بپرسید حتما جواب میدم.