Laravel SocialiteでGitHub経由のソーシャルログインを実装した際の記録と解説です。
この記事のゴール
Laravel10とSocialiteをインストールしてから、
ログイン機能を実装して動作確認まで行います。
公式ドキュメントに忠実に最低限の実装だけを進めます。
公式ドキュメントの説明で実装できるのは、
- OAuthプロバイダーの認証ページへのリダイレクト
- ローカルのコールバック側のユーザー登録と自動ログイン
の２つだけです。
リダイレクト前の、ソーシャルログインへの誘導リンクや
ログイン後のダッシュボードなどは自前で実装する必要があります。
前提条件
- Ubuntu上で作業しています
- PHP8.1以降インストール済
- Composerインストール済
- GitHubアカウントを持っている
- DBはSQLiteを使います
環境構築（Laravel10 + Socialite）
Laravel10の新規プロジェクト「webapp-socialite」を作成します。
composer create-project laravel/laravel:^10 webapp-socialite
プロジェクトフォルダに入ってSocialiteをインストールします。
cd webapp-socialite/
composer require laravel/socialite
GitHubへのOAuthアプリ登録
OAuthを利用する際には、GitHubやGoogle、FacebookなどのOAuthプロバイダーへのアプリ登録が必用です。
現時点(2024/02/11)でSocialiteで利用可能なのは、Facebook, Twitter, LinkedIn, Google, GitHub, GitLab, Bitbucket, Slackです。
「Socialite Providers」を使うと、他のプロバイダーを利用することができます。
今回は、Laravel公式ドキュメントの設定例で記載されているGitHubを利用していきます。
GitHubへのOAuthアプリ登録については別記事にしたので
こちらの記事を参照してください。
.env編集
プロジェクトトップにある「.env」を編集・保存します。
APP_URL=http://localhost:8000
に変更します。ポート番号は環境に合わせて変更してください。
DB_CONNECTION=sqlite
に変更して、他のDB項目をすべて削除します。
また、前段のアプリ登録時に取得したGitHubのclient_idとclient_secretを、
- GITHUB_CLIENT_ID
- GITHUB_CLIENT_SECRET
として追記します。
config/services.php編集
次に、「config/services.php」に追記・保存します。
'github' => [
'client_id' => env('GITHUB_CLIENT_ID'),
'client_secret' => env('GITHUB_CLIENT_SECRET'),
'redirect' => env('APP_URL') . '/oauth/github/callback',
],
マイグレーション
公式ドキュメントには一切記載が無いですが、
次のカラムが必用になります。
- github_id
- github_token
- github_refresh_token
今回は、これらを既存のusersテーブルに追加します。
「database/migrations/*_create_users_table.php」に追記します。
$table->string('github_id')->nullable();
$table->string('github_token')->nullable();
$table->string('github_refresh_token')->nullable();
「password」カラムをnullableにする記事を見かけますが、
既存のログイン機構を使う上で「password」カラムをnullableにすべきではありません。
それはセキュリティホールを作ることと同義です。
何らかの手段でvalidation()をすり抜けられてしまうと終わりです。
セキュリティ上の防壁は何重にも張っておくべきです。
マイグレーションを実行します。
php artisan migrate
「Would you like to create it?」と訊かれるので、
[←]キーで「Yes」を選択して[Enter]キーで確定します。
モデル編集
「app/Modesl/User.php」の$fillableに追記します。
'github_id',
'github_token',
'github_refresh_token',
ルーティング
「routes/web.php」に追記します。
<?php
use Illuminate\Support\Facades\Route;
use Laravel\Socialite\Facades\Socialite;
use App\Models\User;
use Illuminate\support\Facades\Auth;
use Illuminate\Support\Str;
Route::get('/', function () {
return view('welcome');
});
Route::get('/oauth/github/redirect', function () {
return Socialite::driver('github')->redirect();
});
Route::get('/oauth/github/callback', function () {
$githubUser = Socialite::driver('github')->user();
$user = User::updateOrCreate([
'github_id' => $githubUser->id,
], [
'name' => $githubUser->name,
'email' => $githubUser->email,
'password' => Str::random(40),
'github_token' => $githubUser->token,
'github_refresh_token' => $githubUser->refreshToken,
]);
Auth::login($user);
return redirect('/dashboard');
});※（2024/02/20一部修正）：
'password' => fake()->regexify('[A-Za-z0-9_\-\+\@\!]{8,16}'),の箇所を
'password' => Str::random(40),に修正しました。
fake() はテスト用のメソッドであり、本番環境用に実装するものではないためです。
この実装のために
use Illuminate\Support\Str;を追記しています。
WEBサービス起動
LaravelのWEBサービスを起動します。
php artisan serve
ブラウザ確認
WEBブラウザで
http://127.0.0.1:8000/にアクセスします。
LaravelのWelcomeページが表示されました。
http://127.0.0.1:8000/oauth/github/redirectにアクセスします。
GitHubのOAuth認証画面にリダイレクトされます。
「Authorize …」ボタンをクリックします。
GitHub側で認証成功後、ローカルアプリ側へリダイレクトされます。
URLを見てみるとこのようになっています。
http://localhost:8000/oauth/github/callback?code=7906db2a62a63adc47fb&state=VFIF50W6heyul5Ea7S8HGCmSIKcO06CcMmge2I0Iコールバック側でユーザー登録とログインが完了すると、
ダッシュボードへ転送されますが、
ダッシュボードは実装していないので「404 NOT FOUND」となります。
DBレコードを確認すると、ユーザーが登録されています。
GitHubの登録アプリのページ側を見てみると、
ユーザーが１件登録されています。
「Revoke all user tokens」ボタンを押すと、認証した全ユーザーのトークンを取り消すことができます。
一応、初回の認証は問題なく通りました。
２度目の認証をしてみます。
再度、WEBブラウザで
http://127.0.0.1:8000/oauth/github/redirectにアクセスします。
今回は認証の確認画面が表示されず、ダッシュボードへ転送されました。
DBレコードを確認すると、passwordとgithub_tokenが更新されています。
今回はここまでです。お疲れさまでした。
続きはこちらです。
参考サイト
▼(Official) Laravel Socialite
▼(GitHub) OAuth アプリを使用した REST API の認証
▼(GitHub) OAuth アプリの承認
▼(Qiita) Laravel API SNSログイン機能を実装する
▼(Qiita) Laravel+Socialiteで簡単ソーシャルログイン実装! (テスト付き)
コメント