概要

DockerやPHPの勉強にと作成したLaravelプロジェクトにGoogleログイン機能をつけてみました。

手順

GCPの設定
Laravel側の設定

GCPの設定

GoogleCloudPlatform(GCP)の登録

Google認証を実装するには、まずGoogleCloudPlatform(GCP)の登録が必要です。
Googleアカウントがあれば簡単に出来ます。

GCP:
https://console.cloud.google.com/getting-started?hl=ja

プロジェクトの作成

GCPのホームから作成ができます。
2019.07現在では、「Google Cloud Platform」というロゴマークの右横にプロジェクト名が表示されてます。選択するとモーダルが開き「新しいプロジェクト」作成の導線が現れます。

「プロジェクト名」には、とりあえずLaravelプロジェクトと同一の名前を、
今回は個人のテスト用なので「場所」はそのまま「組織なし」を選択し作成します。

認証情報の設定

作成したプロジェクトから「APIとサービス＞認証情報＞OAuth同意画面」に移動します。
ここにもLaravelプロジェクトと同一の名前を入れました。
＊Google認証をするときに一番上に出てくる「●●●●●」に移動の●部分に入ります。

作成をクリックすると、APIとサービスのページに戻りモーダルが開くので
そこで「認証情報を作成＞OAuthクライアントID」を選択します。

下記の画面が表示されるので
「ウェブアプリケーション」にチェック、「名前」、「承認済みのリダイレクトURI」を埋めて作成します。

「名前」は任意で、
「承認済みのリダイレクトURI」はLaravel側で使うのでそれを考慮に入れてください。
とりあえず今回は"http://localhost/auth/callback/google/" にしました。

(重要)
作成したあと、「クライアントID」と「クライアントシークレット」が表示されます。後ほど使用するのでメモっておいてください。

これでGCPの設定は終わりです。

Laravel側の設定

Laravelでの実装ですが、
今回は簡易的に行うため、Laravelのデフォルトで作られるusersテーブルをそのまま使います。

このあと必要になるパッケージを先にインストール
$ composer require laravel/socialite

laravelデフォルトで用意されている認証機能作成のコマンド
$ php artisan make:auth

テーブル作成
$ php artisan migrate

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table

さらに後ほど必要になるコントローラを作っておきます
$ php artisan make:controller OAuthLoginController

(dbコンテナにてテーブルが作られていることを確認しておく)
mysql> show tables;
+--------------------------+
| Tables_in_laravel-cloud9 |
+--------------------------+
| migrations               |
| password_resets          |
| users                    |
+--------------------------+
3 rows in set (0.00 sec)

必要な設定を追加していきます

src/.env

先ほどGCPの設定の時に作成したものを使用します
GOOGLE_CLIENT_ID=クライアントID
GOOGLE_CLIENT_SECRET=クライアントシークレット
GOOGLE_CALLBACK_URL=リダイレクトURL

src/config/app.php

// サービスプロバイダの登録
'providers' => [

        /*
         * Laravel Framework Service Providers...
         */
        Illuminate\Auth\AuthServiceProvider::class,
        Illuminate\Broadcasting\BroadcastServiceProvider::class,
        /* 省略 */
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class,

        Laravel\Socialite\SocialiteServiceProvider::class,//(追加)
    ],

/* 省略 */
 'aliases' => [

        'App' => Illuminate\Support\Facades\App::class,
        'Arr' => Illuminate\Support\Arr::class,
        /* 省略 */
        'Validator' => Illuminate\Support\Facades\Validator::class,
        'View' => Illuminate\Support\Facades\View::class,

        'Socialite' => Laravel\Socialite\Facades\Socialite::class,//(追加)
    ],

src/config/services.php

return [

    /*
    |--------------------------------------------------------------------------
    | Third Party Services
    |--------------------------------------------------------------------------
    |
    | This file is for storing the credentials for third party services such
    | as Stripe, Mailgun, SparkPost and others. This file provides a sane
    | default location for this type of information, allowing packages
    | to have a conventional place to find your various credentials.
    |
    */

    /* 省略 */

    'stripe' => [
        'model' => App\User::class,
        'key' => env('STRIPE_KEY'),
        'secret' => env('STRIPE_SECRET'),
        'webhook' => [
            'secret' => env('STRIPE_WEBHOOK_SECRET'),
            'tolerance' => env('STRIPE_WEBHOOK_TOLERANCE', 300),
        ],
    ],

    /* 追加ここから */
    'google' => [
        'client_id' => env('GOOGLE_CLIENT_ID'),
        'client_secret' => env('GOOGLE_CLIENT_SECRET'),
        'redirect' => env('GOOGLE_CALLBACK_URL'),
    ],
    /* 追加ここまで */
];

src/routes/web.php

/* 省略 */
Route::get('/home', 'HomeController@index')->name('home');
/* 省略 */
// Controllerメソッドへのルート定義
Route::get('/auth/{service}', 'OAuthLoginController@getGoogleAuth')->where('service', 'google');
Route::get('/auth/callback/google', 'OAuthLoginController@authGoogleCallback');

src/app/Http/Controllers/OAuthLoginController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use Socialite;
use Auth;

class OAuthLoginController extends Controller
{
    // Googleの認証ページへのリダイレクト処理
    public function getGoogleAuth($provider)
    {
        return Socialite::driver($provider)->redirect();
    }

    // Googleの認証情報からユーザー情報の取得
    public function authGoogleCallback()
    {
        $googleUser = Socialite::driver('google')->user();
        $user = User::firstOrNew(['email' => $googleUser->email]);

        if (!$user->exists) {
            $user['name'] = $googleUser->getNickName() ?? $googleUser->getName() ?? $googleUser->getNick();
            $user['email'] = $googleUser->email; // Gmailアドレス
            $user['password'] = str_random(); // 適当に生成

            $user->save();
        }

        Auth::login($user);
        return redirect()->route('home');
    }
}

最後に、ログイン画面にGoogleログイン用のボタンを用意します。

src/resources/views/auth/login.blade.php

// ログイン画面にGoogleログインボタンを配置
<form method="POST" action="{{ route('login') }}">
/* 省略 */
</form>
<a href="auth/google">Googleログイン</a> // 追加

この状態で「localhost:8080/login」にアクセスすると、
アンカーリンクを表示しているだけなので位置はおかしいですが、
「Googleログイン」ボタンを押すとGoogleのログイン画面にリダイレクトします。

＊「Word Container」の部分が、GCPで認証情報の設定をした際に入力した名前です。

あとはログインしたいユーザーでログインすれば、
DBにGoogleアカウントの情報が入ります。

mysql> select * from users;
+----+--------------+--------------------+-------------------+------------------+----------------+---------------------+---------------------+
| id | name         | email              | email_verified_at | password         | remember_token | created_at          | updated_at          |
+----+--------------+--------------------+-------------------+------------------+----------------+---------------------+---------------------+
|  1 | ○○○○○     | xxxxxxx@gmail.com | NULL              | ZabdYEZPWOKeIpbp | NULL           | 2019-07-02 23:15:15 | 2019-07-02 23:15:15 |
+----+--------------+--------------------+-------------------+------------------+----------------+---------------------+---------------------+

最後に

今回はGoogleログインでしたが、
SocialiteではFacebook、Twitterはじめ他にもサポートしているサービスがいくつかあるようです。
他のサービスでのログインも併用したい場合にはusersテーブルの構成を少し変える必要がありそうです。
(ex. GoogleとFacebookで同じメールアドレスを登録している可能性があるので)

典型的なフォームベースの認証に付け加え、LaravelはLaravel Socialite(=名士)による、OAuthプロバイダによるシンプルで便利な認証方法も提供しています。Socialiteは現在、Facebook、Twitter、LinkedIn、Google、GitHub、GitLab、Bitbucketによる認証をサポートしています。

Laravel5.8プロジェクトにGoogleログイン機能をつける

概要

手順

GCPの設定

GoogleCloudPlatform(GCP)の登録

プロジェクトの作成

認証情報の設定

Laravel側の設定

最後に

参考