WordPress との統合

このガイドでは、OIDC プラグインを使用して Logto と WordPress を統合する手順を紹介します。しかし、まずは統合が完了した後のユーザーエクスペリエンスを見てみましょう。

Logto 統合によるサインインプロセス#

1. ユーザーは WordPress サイトのログインページ（デフォルトでは [SITE URL]/wp-login.php）にアクセスし、OIDC ボタンでサインインします。
2. ユーザーがボタンをクリックすると、カスタマイズされたサインインエクスペリエンスで Logto のサインインページにリダイレクトされます。
3. ユーザーはサインイン方法を選択し、Logto がユーザーを認証します。
4. 認証が完了すると、Logto はユーザーを再び WordPress サイトにリダイレクトします。
5. WordPress は新しいユーザーアカウントを作成するか、既存のユーザーアカウントにサインインし、前のページにリダイレクトします。

これで、Logto と WordPress の統合の最終結果を見たので、実際に手を動かして統合プロセスに進みましょう。

前提条件#

始める前に、以下のものを用意してください。

1. WordPress サイト：完全に動作する WordPress サイトが必要です。プラグインの管理と設定を構成するための管理者権限があることを確認してください。
2. Logto インスタンス：Logto コンソールにアクセスして新しい Logto インスタンスを作成するか、インストールガイドに従って独自のインスタンスをホストしてください。

統合手順#

ステップ 1: Logto アプリケーションの作成#

1. Logto コンソールにアクセスします。
2. 「Applications」タブに移動し、「Create application」をクリックします。
3. 「Create app without framework」をクリックします。
4. アプリケーションタイプとして「Traditional Web」を選択します。
5. アプリケーションに名前を付け、「Create application」をクリックします。

ステップ 2: プラグインのインストール#

1. WordPress サイトにログインします。
2. 「Plugins」タブに移動し、「Add New」をクリックします。
3. 「OpenID Connect Generic」で検索し、daggerhart 制作のプラグインをインストールします。
4. プラグインを有効化します。

ステップ 3: プラグインの設定#

1. 「Settings」 > 「OpenID Connect Generic」に移動して、プラグインの設定を開きます。
2. 次のフィールドを記入します：
   • Client ID: あなたの Logto アプリケーションのアプリ ID。
   • Client Secret: あなたの Logto アプリケーションのアプリシークレット。
   • OpenID Scope: email profile openid offline_access を入力します。
   • Login Endpoint URL: あなたの Logto アプリケーションの認証エンドポイント URL。https://[tenant-id].logto.app/oidc/authで、Logto アプリケーションのページで「show endpoint details」をクリックすることで URL を取得できます。
   • Userinfo Endpoint URL: あなたの Logto アプリケーションのユーザー情報エンドポイント URL。https://[tenant-id].logto.app/oidc/me。
   • Token Validation Endpoint URL: あなたの Logto アプリケーションのトークン検証エンドポイント URL。https://[tenant-id].logto.app/oidc/token。
   • End Session Endpoint URL: あなたの Logto アプリケーションのセッション終了エンドポイント URL。https://[tenant-id].logto.app/oidc/session/end。
   • Identity Key: ID トークン内でユーザーのアイデンティティを含む一意のキーで、設定によって email または sub にすることができます。
   • Nickname Key: ユーザーのニックネームを含む ID トークン内のキーで、sub に設定し後で変更することができます。

ステップ 4: アプリケーションの設定#

1. プラグインの設定で「Notes」セクションまでスクロールし、「Redirect URI」の値をコピーします。
2. Logto コンソールで、あなたのアプリケーションの設定に移動します。
3. コピーした「Redirect URI」値を「Redirect URIs」フィールドに追加します。

ステップ 5: 統合のテスト#

1. WordPress サイトからログアウトします。
2. WordPress のログインページにアクセスし、「Sign in with Logto」ボタンをクリックします。
3. Logto のサインインページにリダイレクトされます。
4. あなたの Logto アカウントでサインインします。
5. 再び WordPress サイトにリダイレクトされ、自動的にログインします。

最後のステップ#

おめでとうございます！Logto と WordPress の統合が成功しました。

統合をさらにカスタマイズするには、プラグインの設定ページで既存ユーザーのリンクやログインボタンのカスタマイズ、SSO モードの使用などの追加機能を探索してみてください。