Laravel SocialiteでGoogleログインを実現する

今回はLaravelでGoogleログインの実装を行う一番ベーシックな方法について解説します。

ソーシャルログインは独自のID・パスワード認証よりもセキュリティ的に良いという話もあり、もし自分でサービスを作る方がいらっしゃいましたら、ぜひ導入すると良いと思います。

では、早速手順について解説します。

1-1. Google Cloud Platformにアクセスし、プロジェクトを作成する

Google Cloud Platformにアクセスしてプロジェクトを作成してください。
ここはネット上にもたくさん情報がありつまづきポイントがないかと思うので説明しません。

1-2. Webクライアントを作成する

1. 左側のメニューから「認証情報」をクリック
2. 「認証情報を作成」をクリック
3. 「OAuthクライアントID」をクリック

4. アプリケーションの種類は「ウェブアプリケーション」で良いと思います

5. 名前は何でも良いです。モバイルアプリからAPIでGoogleログインする想定なのでリダイレクトURLも不要です。

6. 承認済みJavaScript生成元と承認済みリダイレクトURLを登録する

僕の場合は承認済みJavaScript生成元に http://localhost をいれて、承認済みリダイレクトURLには http://localhost/auth/redirect をいれました。

このリダイレクトURLは後で使います。

1-3. クライアントID, クライアントシークレットをゲットする

クライアントID, クライアントシークレットが発行されるので、メモしておきます。

2. Laravel Socialiteをインストール＆設定する

2-1. Laravel Socialiteをインストールします

これでインストールできます。

composer require laravel/socialite 

2-2. .envにクライアントID・クライアントシークレットを書く

.envの末尾に追記してください

クライアントIDとクライアントシークレットは、Google Cloud Platformから取得したものをいれてください。コールバックURLは先程設定したリダイレクトURLをいれてください。

GOOGLE_CLIENT_ID=**************
GOOGLE_CLIENT_SECRET=***********
GOOGLE_CALLBACK_URL=http://localhost/login/callback

GOOGLE_CALLBACK_URLはご自身のサーバー情報などに合わせて修正してください

2-3. configでenv情報を参照する

config/service.php でenv情報を参照します。

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Third Party Services
    |--------------------------------------------------------------------------
    |
    | This file is for storing the credentials for third party services such
    | as Mailgun, Postmark, AWS and more. This file provides the de facto
    | location for this type of information, allowing packages to have
    | a conventional file to locate the various service credentials.
    |
    */

    'mailgun' => [
        'domain' => env('MAILGUN_DOMAIN'),
        'secret' => env('MAILGUN_SECRET'),
        'endpoint' => env('MAILGUN_ENDPOINT', 'api.mailgun.net'),
    ],

    'postmark' => [
        'token' => env('POSTMARK_TOKEN'),
    ],

    'ses' => [
        'key' => env('AWS_ACCESS_KEY_ID'),
        'secret' => env('AWS_SECRET_ACCESS_KEY'),
        'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
    ],

    // ここから追記する
    'google' => [
        'client_id' => env('GOOGLE_CLIENT_ID'),
        'client_secret' => env('GOOGLE_CLIENT_SECRET'),
	'redirect' => env('GOOGLE_CALLBACK_URL'),
    ],
];

3. ルーティングを行う

ルーティングはlaravel8の書き方で書いています。

Route::get('/auth/redirect', [GoogleLoginController::class, 'getGoogleAuth']);
Route::get('/login/callback', [GoogleLoginController::class, 'authGoogleCallback']);

まず、 /auth/redirect に遷移すると、googleアカウントを選択する画面が表示され、アカウントを選択したら /login/callback に遷移するという仕組みになっています。

なので、まずはGoogleLoginControllerのgetGoogleAuthを定義します。

4. コントローラで会員登録・ログインロジックを組む

まずはContorllerを作成します

php artisan make:controller GoogleLoginController

先にContorllerの全貌を見せると、↓このような感じです。

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;

class GoogleLoginController extends Controller
{
    public function getGoogleAuth()
    {
        return Socialite::driver('google')
            ->redirect();
    }

    public function authGoogleCallback()
    {
        $googleUser = Socialite::driver('google')->stateless()->user();
        $user = User::firstOrCreate([
            'email' => $googleUser->email
        ], [
            'email_verified_at' => now(),
            'google_id' => $googleUser->getId()
        ]);
        Auth::login($user, true);
        return redirect('/home');
    }
}

getGoogleAuthで書いていることはお決まり毎として割り切って認識しておくのが良いでしょう。getGoogleAuthによって、googleのアカウント選択画面にリダイレクトされ、どのアカウントでログイン・会員登録するかを選ぶことができます。

アカウント選択後は authGoogleCallback が実行されます。
こちらでは、ユーザー情報を取得してメールアドレス、googleIdをDBに保存してログインしています。
ログイン後はトップページにリダイレクトするようにしています。

これでログイン・会員登録の仕組みは以上です！
ご一読いただきありがとうございました！