12
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@reirev2913(Rei Rev)

[OAuth] Laravel 12 WorkOS Authkit Starter Kitがマジですごい

12
Posted at

WorkOS Authkit Starter Kit

先週(2025/2/24)、Laravel 12がリリースされました。Release Notesを確認すると、New Application Starter Kitsという気になるセクションが...

以下、Copilotによる翻訳と共に原文を示します。

In addition, we are introducing a WorkOS AuthKit-powered variant of each starter kit, offering social authentication, passkeys, and SSO support. WorkOS offers free authentication for applications up to 1 million monthly active users.

さらに、各スターターキットにWorkOS AuthKitを搭載したバリアントを導入し、ソーシャル認証、パスキー、およびSSOサポートを提供します。WorkOSは、月間100万のアクティブユーザーまでのアプリケーションに対して無料の認証を提供します。

With the introduction of our new application starter kits, Laravel Breeze and Laravel Jetstream will no longer receive additional updates.

新しいアプリケーションスターターキットの導入に伴い、Laravel BreezeおよびLaravel Jetstreamは今後追加の更新を受け取らなくなります。

僕なりに簡潔にまとめると、これからは"WorkOS AuthKit"をソーシャル認証に使うべし、とのことのようです。

とはいえ"WorkOS AuthKit"ってなんなのさ、という感じですので早速試してみましょう。

この記事では、まずStep by StepでWorkOS Authkitを動かせるようにしたのち、簡単に詳細を説明していきます。

Starter Kitインストール後のアプリケーションはReiRev/laravel-12-workosのリポジトリにあります。

WorkOS Authkit Starter Kitのアプリケーション作成

laravel/installerをアップデートしておきます。

composer global update laravel/installer

お好みのディレクトリで、Laravelのアプリケーションをインストールします。今回は、laravel-12-workosという名前にしてみました。設定は以下にしておきます。Which authentication provider do you prefer? で、WorkOSを選んでおきましょう。

$ laravel new laravel-12-workos

 ┌ Which starter kit would you like to install? ────────────────┐
 │ Vue                                                          │
 └──────────────────────────────────────────────────────────────┘

 ┌ Which authentication provider do you prefer? ────────────────┐
 │ WorkOS (Requires WorkOS account)                             │
 └──────────────────────────────────────────────────────────────┘

 ┌ Which testing framework do you prefer? ──────────────────────┐
 │ Pest                                                         │
 └──────────────────────────────────────────────────────────────┘

Frontendのフレームワークはなんでもいいですが、今回は僕が好きなVueにしています。Reactを選んでも、基本的な動作は同じはずです。

ちなみにLaravel 12では、デフォルトでSQLiteがデータベースとして使用されるようになったようですね。

アプリケーションのディレクトリに入っておきます。

cd laravel-12-workos

Step by Stepで挙動を確認する。

ひとまず何も設定を変更せずに、アプリケーションを立ち上げてみます。

php artisan serve

npm run dev

localhost:8000にアクセスすると以下のような画面が見えます。Laravel 11と比較してシンプルでかっこいいです。

localhost:8000

右上の"Log in"を押すと、以下のエラーが出るはずです。

image.png

client_idが定義されていないよ、と言われていますね。OAuthではクライアント(ここではLaravelのアプリケーション)の事前設定が必要なのでした。本記事ではOAuthの詳細までは立ち入りませんが、詳しく知りたい方にはOAuth徹底入門 セキュアな認可システムを適用するための原則と実践がおすすめです。

クライアントの設定

クライアントの設定は.envファイルに設定します。.envファイルを覗くと、以下のように記載されています。

.env
WORKOS_CLIENT_ID=
WORKOS_API_KEY=
WORKOS_REDIRECT_URL="http://localhost:8000/authenticate"

WorkOSの機能を使うには、アカウント作成が必要です。workos.comでアカウントを作成し、Overviewの"Setup User Management"を選択します。

image.png

その後、細かい設定を行なっていきますが、特にこだわりがなければcontinueを押していけば大丈夫です。"3. Integrate your application"で、WORKOS_CLIENT_IDとWORKOS_API_KEYが表示されるので、これを.envに書き込んでおきます。これらの値は、後から"API Keys"で確認することができます。

image.png

.env
WORKOS_CLIENT_ID=YOUR_CLIENT_ID
WORKOS_API_KEY=YOUR_API_KEY
WORKOS_REDIRECT_URL="http://localhost:8000/authenticate"

次に、"4. Add default redirect endpoint URI"に、.envに記載されていたhttp://localhost:8000/authenticateを記入します。もちろん本番環境では、${APP_URL}/authenticateとしておきます。

image.png

最後に"Activate user mangement"をして設定完了です。

image.png

これで基本設定は完了です。再び"Log in"を押してみると、以下のようにソーシャルアカウントを使ってログインできるページが出るはずです。

image.png

今回はGitHubアカウントでSign Inしてみました。すると、"Verify your email address"という件名のタイトルのメールが"welcome@workos.dev"から飛んできますので、そこに記された数字をブラウザ側に入力することで登録が完了します。

image.png

メールサーバーの設定などは何もしていませんが、このようにWorkOSが必要な認証処理を代替してくれるのが素晴らしいですね。

ログインが完了すると、http://localhost:8000/dashboardに遷移します。

image.png

僕のGitHubアカウントと同じユーザー名、プロフィール写真がLaravelから参照できていることがわかります。

データベースを確認する

ここまでで問題なくユーザー登録ができていそうなことは確認できましたが、念のためデータベースの情報がどのようになっているか確認しておきましょう。

登録したユーザーの情報をtinkerで確認します。

laravel-12-workos$ php artisan tinker
Psy Shell v0.12.7 (PHP 8.3.14 — cli) by Justin Hileman
> User::first()
[!] Aliasing 'User' to 'App\Models\User' for this Tinker session.
= App\Models\User {#6008
    id: 1,
    name: "ReiRev ",
    email: "reirev2913@gmail.com",
    email_verified_at: null,
    #workos_id: "user_BRKHHKW4S01JNB2Z7YC5FD63RQ",
    #remember_token: null,
    avatar: "https://workoscdn.com/images/v1/fRf2SCxC4_05QXrhPbwKpm2aQapSVrkBMGjUbnLwldy",
    created_at: "2025-03-02 09:28:52",
    updated_at: "2025-03-02 09:28:52",
  }

ちゃんとユーザー登録ができていそうです。プロフィール画像はavatarというカラムに保存されていることがわかります。

Log out

最後に、Log outがちゃんとできるか確認しておきます。

image.png

Log outを押すとhttps://error.workos.com/user_management/app-homepage-url-not-foundに遷移し以下のようなエラーが出ますので、設定を追加します。

image.png

Redirectsの"Your app homepage"からホームページであるhttp://localhost:8000を指定します。

image.png

これで、ログアウト時にhttp://localhost:8000に戻るようになります。

WorkOSの詳細

ここまで、WorkOSを用いてLaravelで簡単にソーシャル認証が実現できることがわかりました。ここからは、もう少し詳細を深掘りしてみます。

結局WorkOSとはなんなのか？

WorkOSは統合認証プラットフォーム (dentity-as-a-Service, IDaaS)です。すなわち、アプリケーションの認証認可の部分を使いやすいフレームワークとして提供します。

認証認可の方法・プロトコルには昔ながらのパスワード認証の他、主要なものとしてOAuth2.0、それを基盤としたOpenID Connectなど様々なものがありますが、セキュリティに関わるこれらの機能は複雑で管理も手間がかかります。そこで、こうした機能をサービスとして提供し、アプリケーション開発の手間を減らしてくれるのがIDaaSというわけです。

WorkOSと似たサービスとしてAuth0が存在します。

認証のフロー

How Single Sign-On worksのドキュメントが十分にわかりやすいと思いますので、リンクを添付するにとどめたいと思います。

stagingとproductionについて

WorkOSのDashboardからは、stagingとproductionが選択できます。アカウント登録時点では、stagingが選択されていると思います。

image.png

名前から分かる通り、staging環境はテスト用に、production環境はデプロイ用に使用するよう記載されています。機能的にどう違いがあるのか記述を見つけられませんでしたが、そのようにした方が良いのでしょう。

production環境を使用するには、クレジットカードの登録が必要になります。

冒頭のLaravelのRelease Notesに書かれている通り、月間100万のユーザーまでは無料で使用することができます。それを超える場合、2,500 USDの月額料金がかかります。2,500 USDというのはかなりの額ですが、中規模のアプリケーションで月間100万のユーザーを超えることはなかなかないと思うので、個人的にはお得なのではないかと思います。また、WorkOS vs. Auth0では、競合サービスのAuth0に対してWorkOSの方が総合的に低コストであると主張されています。

Laravel側の詳細

GitHubのリポジトリにWorkOS Authkit Starter Kitのコードを移しました。

routes/auth.phpがWorkOSとの連携部分を理解するのに重要な部分です。

Route::get('login', function (AuthKitLoginRequest $request) {
    return $request->redirect();
})->middleware(['guest'])->name('login');

引数の型であるAuthKitLoginRequest等は、laravel/workosパッケージに実装があります。

例えば、AuthKitLoginRequest class以下のようになっています。

OAuthのstateを作成している部分があり、OAuthの仕様と照らし合わせることでどのような実装の詳細を把握することができそうです。

class AuthKitLoginRequest extends FormRequest
{
    /**
     * Redirect the user to WorkOS for authentication.
     */
    public function redirect(): Response
    {
        WorkOS::configure();

        $url = (new UserManagement)->getAuthorizationUrl(
            config('services.workos.redirect_url'),
            ['state' => $state = Str::random(20)],
            'authkit',
        );

        $this->session()->put('state', $state);

        return class_exists(Inertia::class)
            ? Inertia::location($url)
            : redirect($url);
    }
}

まとめ

本記事では、Laravel 12のStarter Kitで新しく導入されたWorkOSの動かし方と簡単な説明を記しました。Starter Kitを用いることで手軽にソーシャルログインが実装できるの素晴らしいと思います。皆さんのご参考になれば幸いです。

12
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?