Laravelでソーシャルログイン 簡易バージョン　～GitHub編～

前回、自作で認証画面を作成しました。

今回はその拡張機能としてソーシャル（SNS）ログインができるようにします。

まずはGitHubのアカウントでログインができるようにします。

画面フローとしては以下のようになります。

通常のソーシャルログインではDBにアカウント情報を入れる作業をします。

しかし、今回は簡易版としてGitHubのアカウント情報を出力するだけにします。

 

手順

【1】GitHubのアカウント作成

【2】GitHub認証アプリの作成

【3】ライブラリ（Laravel Socialite）のインストール＆設定

【4】ルーティングの設定

【5】コントローラの設定

【6】動作確認

 

【1】GitHubのアカウント作成

GitHubでソーシャルログインの機能を実装するにはGitHubが用意している認証アプリを利用します。

そのためにはGitHubでアカウントを作成しないといけません。

まずはGitHubのサイトにアクセスしてアカウントを作成します。

GitHub

 

【2】GitHub認証アプリの作成

GitHubの認証アプリを作成して「クライアントID」と「クライアントシークレット」を取得します。

１）ログインをして「settings」

２）左サイドメニューにある「Developer settings」の「GitHub Apps」をクリック

３）入力する項目がいくつかありますが、重要なのは「User authorization callback URL」という項目です。
　　認証後のページを指定します。

　　ここでは以下のように設定します。

　　http://{ホスト}/user/github/callback

　　にしました。各自の環境にあわせてください。

　　当然ですが、ここの記述は後のルーティングの設定とコントローラに関係します。

　　

４）最後に「save」で保存すると次の画面で「クライアントID」と「クライアントシークレット」が表示されます。

５）config/services.phpに「クライアントID」と「クライアントシークレット」を登録します。

：
'github' => [
  'client_id' => '｛クライアントID｝',
  'client_secret' => '｛クライアントシークレット｝',
  'redirect' => '｛認証後のURL｝',
],

 

【3】ライブラリ（Laravel Socialite）のインストール＆設定

composerでソーシャルログインのライブラリをいれます。

composer require laravel/socialite ~2.0.0

次にconfig/app.phpのファイルでプロバイダーとファサードを登録します。

Laravelでライブラリを入れるときにやる作業です。

Laravelのライブラリ追加方法

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

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

 

【4】ルーティングの設定

//GitHubログイン（ボタンのリンク先）
Route::get('user/github','Auth\AuthController@redirectToProvider');

//認証後の戻りURL
Route::get('user/github/callback','Auth\AuthController@handleProviderCallback');

 

【5】コントローラの設定

まずはGitHubの認証ログインのボタンを押した先の画面を表示させます。

：
  public function redirectToProvider()
  {
  return Socialite::driver('github')->redirect();
  }
：

次に認証後の画面の表示する処理を書きます。

とりあえずGitHubのアカウント情報をdd()で一覧表示させます。

：
  public function handleProviderCallback()
  {
  $user = Socialite::driver('github')->user();
  dd($user);
  }

 

【6】動作確認

ログイン画面にGitHub専用のソーシャルボタンを設置しました。

クリックするとGitHubの認証画面にリダイレクトします。

ログイン成功すると認証後の画面（user/github/callback）にリダイレクトされます。

認証後の画面ではdd（）でGitHubのアカウント情報を一覧表示。

以下のような画面になればOKです。

ソーシャルログインの簡易版については以上です。

 

-チュートリアル