개요

Docker와 PHP를 공부하기 위해 만든 Laravel 프로젝트에 Google 로그인 기능을 추가해 보았습니다.

절차

GCP 설정

Laravel 측 설정

GCP 설정

GoogleCloudPlatform (GCP) 등록

Google 인증을 구현하려면 먼저 GoogleCloudPlatform(GCP) 등록이 필요합니다.
Google 계정이 있으면 쉽게 할 수 있습니다.

GCP:
htps : // 이런. cぉd. 오, ぇ. 이 m / 껄껄 g-s r d? hl = 그럼

프로젝트 만들기

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 | ○○○○○     | [email protected] | 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을 통한 인증을 지원합니다.

참고