Laravel socialiteを使ってGitHubで認証できるようにしてみた
はじめに
最近では、多くのウェブサイトでGitHubやGoogleなどのソーシャルアカウントを使ったログイン機能を目にします。こうした機能は、ユーザーが新たにアカウントを作成する手間を省き、スムーズな操作体験を提供するため、非常に便利です。この記事では、Laravelでソーシャルアカウントを使った認証機能を実装する方法を解説します。具体的には、Laravelの便利なライブラリ「Socialite」を使って、GitHubアカウントを利用した認証機能を構築する手順をご紹介します。
前提条件
今回の記事はあらかじめLaravelのユーザー認証機能が実装されていることを前提としております。そのためusersテーブルには以下のフィールドがすでに存在している必要があります。
- email:ユーザーのメールアドレスを保存するカラム
- name:ユーザーの名前を保持するカラム
- password:ユーザーのパスワードをハッシュ化して保存するカラム
Socialiteとは
SocialiteとはLaravelでソーシャルログインを簡単に実装できる便利なパッケージツールです。このパッケージを使うことで、Facebook、Twitter、Google、LinkedIn、GitHub、GitLab、Bitbucketといった主要なサービスの認証機能をスムーズに構築することができます。OAuthプロトコルに基づく認証をサポートしており、複雑な設定を必要としないのが特徴です。
GitHubでOAuthアプリの作成
まずは自分のGitHubアカウントにログインし、右上のプロフィールアイコンをクリックします。次に以下の図の赤枠で囲まれたsettingsを選択します。
左のメニュー欄の一番下にあるDeveloper settingsを選択します。
左のメニューにOAuth Appsをクリックし、続いてNew OAuth Appを選択します。
すると以下の画面が表示されます。
必要事項を入力し、Register applicationボタンをクリックすると登録が完了します。
するとClient IDとClient secretsが確認できます。Client secretsは最初は何もないので、Generate a new clientボタンをクリックして作成してください。Client IDとClient secretsは後で使用するのでコピーして安全に保管してください。
Socialiteのインストールと設定
以下のコマンドを使って、Socialiteをインストールします。
composer require laravel/socialite
インストールが完了したら.envファイルに以下の内容を追加します。
各値は、GitHubで作成したOAuthアプリの情報に置き換えます。
GITHUB_CLIENT_ID=[Client ID]
GITHUB_CLIENT_SECRET=[Client secrets]
GITHUB_REDIRECT_URI=[Authorization callback URL]
次にconfig/services.phpファイルに以下の内容を追加します。
'github' => [
'client_id' => env('GITHUB_CLIENT_ID'),
'client_secret' => env('GITHUB_CLIENT_SECRET'),
'redirect' => env('GITHUB_REDIRECT_URI'),
],
次にルートの設定を行います。以下の内容をroutes/web.phpに追加してください。
use App\Http\Controllers\SocialLoginController;
Route::get('login/github', [ SocialLoginController::class, 'redirectToGithub'])->name('login.github');
Route::get('login/github/callback', [ SocialLoginController::class, 'handleGithubCallback']);
次にcontrollerに処理を記述していきます。Auth/SocialLoginController.phpを作成し以下の内容を追加してください。
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Laravel\Socialite\Facades\Socialite;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
class SocialLoginController extends Controller
{
public function redirectToGithub()
{
return Socialite::driver('github')->redirect();
}
public function handleGithubCallback()
{
try{
$githubUser = Socialite::driver('github')->user();
$user = User::updateOrCreate(
[
'github_id' => $githubUser->id,
],
[
'email' => $githubUser->getEmail(),
'name' => $githubUser->getNickname(),
'password' => Hash::make($githubUser->id),
],
);
Auth::login($user, true);
return redirect()->route('post.index');
} catch (\Exception $e) {
return redirect('/login')->with('error', 'GitHubログインに失敗しました');
}
}
}
GitHubユーザー情報を保存するため、usersテーブルに新しいカラムを追加します。
以下のコマンドを入力してマイグレーションファイルを作ります。
php artisan make:migration ファイル名 --table=users
マイグレーションファイルの中身を以下の内容に編集してください
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::table('users', function (Blueprint $table) {
$table->string('github_id')->nullable()->unique();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('github_id');
});
}
};
編集が完了したら以下のコマンドを実行して、新しいカラムをデータベースに反映させてください。
php artisan migrate
マイグレーションが正常に実行されると、usersテーブルにgithub_idカラムが追加されます。
最後にGitHubでログインできるためのViewを扱っていきます。今回はGitHubのロゴを表示するために、Font Awesomeを使用します。Font Awesomeを使用すると簡単にアイコンを導入することができます。
まずは、以下のコマンドを入力してFont Awesomeに必要なパッケージをインストールします。
npm install @fortawesome/fontawesome-free
次にresources/css/app.cssの先頭に以下のコードを追加します。
@import '@fortawesome/fontawesome-free/css/all.css';
GitHubログインボタンを追加するためにViewに以下の内容を追加します。
<div class="flex items-center justify-end mt-4">
<a href="{{ route('login.github') }}" class="btn btn-github text-white">
<i class="fab fa-github ms-2"></i>
{{ __('Log in with GitHub') }}
</a>
</div>
すると見た目は以下のようになります。
作成したボタンをクリックすると、GitHubのログイン画面に遷移します。GitHubアカウントでログインを許可すると、アプリ内でログインできるようになります。
おわりに
今回はLaravelのsocialiteを使って、GitHubでログインする方法についてまとめました。Socialiteを利用すれば、GitHub以外にもGoogleやFacebookなど、さまざまなサービスで認証処理を簡単に実装できます。この記事を書くことで、自分の考えを整理し、アウトプットの重要性を改めて感じることができました。今後もこうした記事を通じて学びを深めながら、情報を共有していきたいと思います。最後まで読んでいただきありがとうございました。何かの参考になれば幸いです。
参考資料
Discussion