【Laravel6】 Socialite에서 GitHub 계정을 사용한 인증 시스템 구현 방법

Socialite란?

Socialite 은 복잡한 SNS 인증을 고기능으로 사용하기 쉬운 인터페이스로서 간편하게 짜넣을 수 있는 패키지입니다.
이번에는 Socialite를 사용하여 GitHub의 OAuth 인증을 구현하지만 GitHub 이외에도 Facebook, Twitter, Google, LinkedIn, GitLab, Bitbucket 등에 대응하고 있습니다.

구현의 흐름

GitHub에서 OAuth 인증 준비

웹 앱 측에서 OAuth 인증 준비

OAuth 인증 구현

1. GitHub에서 OAuth 인증 준비

시작하기 전에 GitHub에서 OAuth 애플리케이션을 생성합니다.
GitHub에 로그인하고,
[Settings] → [Developer Settings] → [OAuth Apps] → [New OAuth App]로 화면 전환합니다.

다음 세 가지 항목을 입력합니다.
· Application Name(웹 애플리케이션 이름)
・Homepage URL(홈페이지의 URL)
· Authorization callback URL (GitHub에서 인증이 완료된 후 반환 URL)


입력 후 [Register application]을 누르면 다음 값이 발행됩니다.

・Client ID
・Client Secret

2. 웹 앱 측에서 OAuth 인증 준비

2-1 Laravel의 Auth 인증을 도입한다.

$ php artisan make:auth 

명령 실행 후 오류가 발생하면 이 기사을 참조하십시오.

2-2 Laravel Socialite를 도입한다.

$ composer require laravel/socialite

2-3 config/app.php 에 서비스 프로바이더를 추가한다.

socialite를 서비스 프로바이더에 추가하는 것으로, Laravel 기동시에 socialite도 동시에 초기 처리로서 기동합니다.

app.php

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

2-3 config/app.php 에 별칭을 추가합니다.

app.php

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

2-4 .env 에 인증 정보 등을 추가한다.

웹 애플리케이션과 GitHub 간의 협력을 위해 다음을 추가합니다.

GITHUB_CLIENT_ID=(1.GitHub上でOAuth認証の準備で生成された値)
GITHUB_CLIENT_SECRET=(1.GitHub上でOAuth認証の準備で生成された値)
GITHUB_URL=(1.GitHub上でOAuth認証の準備で指定した戻り先のURL)

3.OAuth 인증 구현

지금까지 GitHub의 OAuth 인증을 도입하기 위한 준비가 완료되었으므로, 실태에 OAuth 인증의 구현을 실시해 갑니다.

3-1 ルーティング 를 정의한다.

먼저 GitHub 인증을 통해 로그인할 때의 라우팅을 web.php 파일에 정의합니다.

web.php

// GitHubの認証ページに遷移するためのルーティング
Route::get('login/github', 'Auth\LoginController@redirectToProvider');

// GitHubの認証後に戻るためのルーティング
Route::get('/login/callback/github', 'Auth\LoginController@handleProviderCallback');

3-2 コントローラー 내부에 처리를 구현한다.

다음으로 3-1에서 정의한 컨트롤러 내에서 인증에 필요한 처리를 구현합시다.

Auth\LoginController.php

/**
 * GitHubの認証ページヘユーザーを転送するためのルート
 *
 * @return \Symfony\Component\HttpFoundation\RedirectResponse
 */
 public function redirectToProvider() {
   return Socialite::driver("github")->redirect();
 }

/**
 * GitHubの認証後に戻るルート
 *
 * @return \Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
 */
 public function handleProviderCallback() {
   try {
     $user = Socialite::with("github")->user();
   } catch (Exception $e) {
     return redirect('/welcome'); // エラーならウェルカムページに転送
   }

   // nameかnickNameをuserNameにする
   if ($user->getName()) {
     $userName = $user->getName();
   } else {
     $userName = $user->getNickName();
   }

   // mailアドレスおよび名前を保存
   $authUser = User::firstOrCreate([
     'email' => $user->getEmail(),
     'name' => $userName
   ]);
   auth()->login($authUser); // ログイン
   return redirect()->to('/home'); // homeページに転送
 }

3-3 usersテーブル 를 수정한다.

GitHub 인증을 통해 계정을 등록하면 users 테이블의 password 열이 null이므로 기본값으로는 ​​오류가 발생합니다. 따라서 null을 허용하도록 수정합니다.

create_users_table.php

public function up()
  {
    Schema::create('users', function (Blueprint $table) {
      ...
      $table->string('password')->nullable(); // nullable()を追加
      ...
    });
  }

3-4 View에 リンク를 추가합니다.

마지막으로 GitHub 인증으로 전환하기 위해 모든 View에 링크를 추가합니다.
이번에는 환영 페이지에 링크를 추가했습니다.

welcome.blade.php

<div class="links">
  <a href="<?php echo url("/login/github"); ?>" >Github</a>
</div>

마지막으로

이상으로 GitHub 경유의 인증 기능을 구현할 수 있었습니다.
생각했던 것보다 쉽게 ​​구현할 수 있었다고 생각했지만, Socialite의 덕분이네요. 감사합니다.