LaravelでsocialiteでOauth(サイトログイン）連携を作る/Gitlabログインを例に

LaravelでGitlabログイン連携を作る

laravel でSocialiteプラグインを使う。ユーザー登録の代わりにユーザをほかサイトのIDでログインさせるOAuthです。

今回は、「gitlab」ユーザでログイン機能を作る。とくにOmnibus版でセルフ・ホスティングサイトを使う。

全体の流れ。

• laravel プロジェクト作成
• プラグインをインストール
• db 初期化
• gitlab にAppを登録
• laravel でソースを追加
• 新規ユーザ追加処理を追加
• ログインボタンを設置

とても、かんたんですね。php最新版が動作すれば、10分程で、ユーザーログイン機能とOAUTH機能を作れます。お手軽です。

laravel プロジェクト作成

composer create-project laravel/laravel sample-app
cd sample-app
composer install 

パッケージをインストール

composer require laravel/socialite

socialiteでgitlab を使えるように、パッケージインストール

composer require socialiteproviders/gitlab

DBを準備

sed -i 's/DB_/#DB_/' .env
sed -i  '11iDB_CONNECTION=sqlite'  .env
touch database/database.sqlite
php artisan migrate:fresh --seed
cp .env .env.local

breeezeを使う

composer require laravel/breeze --dev
php artisan breeze:install 

APP_URL を artisan serve向けに書き換え

sed 's|=http://localhost|=http://127.0.0.1:8000|' -i .env

コールバックURLが重要になるの。APP_URLを使うのでartisan serve で使えるように書き換え。

gitlab soclialteを作っていく

config/services.php ファイル

<?php   
return [
   // 中略
   'gitlab' => [
      'client_id' => env( 'GITLAB_CLIENT_ID' ),
      'client_secret' => env( 'GITLAB_CLIENT_SECRET' ),
      'redirect' => env('APP_URL').'/auth/gitlab/callback',
      'host'=>env('GITLAB_HOST'),
    ],

上記の config/services.php をコマンド・ラインからコピペで行うコード

sed -i -e "/^];/i \\
   'gitlab' => [\n\
      'client_id' => env( 'GITLAB_CLIENT_ID' ),\n\
      'client_secret' => env( 'GITLAB_CLIENT_SECRET' ),\n\
      'redirect' => env('APP_URL').'/auth/gitlab/callback',\n\
      'host'=>env('GITLAB_HOST'),\n\
    ],\n\
"  config/services.php

Gitlabのサイトで、APP_IDとAPP_SECRETを用意する。

callback url

http://127.0.0.1:8000/auth/gitlab/callback

チェック

read_user

GIT_LABの場合APP_SECRETを作るのは、「ユーザー自分自身」で作ってもいいし、「アプリ全体」で作ってもいい。

.env

APP_URL=http://127.0.0.1:8000
GITLAB_CLIENT_SECRET=244a53xxxxxxxxxxx
GITLAB_CLIENT_ID=5c35dcxxxxxxxxxxxx
GITLAB_HOST=https://gitlab.example.tld/

routes/web.php

oauth専用のroute を定義します。別ファイルに定義するのでinclude定義を書きます。

<?php
// append
require __DIR__.'/socialite-gitlab.php';

上記の処理をコピペで行う

sed '$a require __DIR__."/socialite-gitlab.php";' -i routes/web.php
touch routes/socialite-gitlab.php

routes/socialite-gitlab.php

ログインの動作を作ります。Controllerに作ってもいいけど、可搬性・行数の少なさ・理解のしやすさ、これらを踏まえて、route定義だけに留めました。

<?php
use Illuminate\Support\Facades\Route;
use Laravel\Socialite\Facades\Socialite;
use App\Models\User;
use Illuminate\Support\Facades\Auth;

Route::get('auth/gitlab', function () {
  $driver = Socialite::driver('gitlab');
  return $driver->redirect();
})->name('oauth:gitlab.redirect');
//
Route::get('auth/gitlab/callback', function () {
  //
  $oa_user = Socialite::driver('gitlab')->user();
  $userdata = (object)$oa_user->user;
  // 管理者フラグ
  if ( !$userdata->is_admin ) {
    // laravel アプリの利用者を gitlab admin に限定する。
    abort( 403, 'not admin' );
  }
  // ユーザを作成
  $user = User::updateOrCreate(
    ['email' => $userdata->email],
    [
      'email_verified' => $userdata->confirmed_at,
      'name'           => $userdata->username,
      'password'       => 'dummy_oauth_'.md5(random_bytes(20)),
    ]
  );
  Auth::login( $user );
  return redirect('/dashboard');
});

本当に、この１０行程度でログインが作れるわけです。

ログインフォームをつくくる

<form method="POST" action="{{ route('login') }}">
    @csrf
    <div class="flex items-center justify-end mt-4">
        <a class="btn" href="{{ route('oauth:gitlab.redirect') }}"
           style="background: #FFA500; color: #ffffff; padding: 10px; width: 100%; text-align: center; display: block; border-radius:3px;">
            Login with GitLab
        </a>
    </div>
    ...
</form>

起動

ここまで作ったら起動してログインします。

php artisan serve

laravel とプラグインを使えばかんたん

とくに、gitlabやmattermostのように社内で使っているユーザ管理の仕組みが整っていたら、Laravelを使うと認証連携を手軽に作れて本当に便利ですよ。

ちょっとした問い合わせフォーム、データ集計フォーム。業務用の使い捨てアプリならサクッと作れます。