エーデルハーツ

Custom WordPress Support & Development

Read in English

Edel Auth for Supabase 導入ガイド

プラグインの導入と確認

インストールと有効化

  1. WordPress管理画面のメニューから「プラグイン」→「新規プラグインを追加」をクリックします。
  2. 右上の検索ボックスに「edel auth」と入力して検索します。
  3. 「Edel Auth for Supabase」が表示されたら、「今すぐインストール」をクリックし、続けて「有効化」をクリックします。

プラグインのインストールと有効化

設定画面の確認

  1. 管理画面の「設定」→「Edel Auth(Supabase)」をクリックして、設定画面を開きます。
  2. 設定画面には「Supabase プロジェクトURL」や「APIキー」の入力欄があります。これらを取得するために、まずはSupabase側での準備が必要です。

Supabase側の設定

プロジェクトの作成

Supabaseのアカウントをお持ちでない場合は、Supabase公式サイトから登録を行ってください。

  1. Supabaseのダッシュボードにアクセスし、画面右上の「+ New project」ボタンをクリックします。
  2. プロジェクト作成画面で以下の項目を入力・選択します。
    • Organization: 登録時に作成された組織を選択します（初期値のままでOKです）。
    • Name: プロジェクト名を入力します（例: My WordPress Site など、自由な名前でOKです）。
    • Database Password: データベース用の強力なパスワードを入力するか、「Generate a password」で生成します。
    • Region: サーバーの場所を選択します。日本の場合は「Northeast Asia (Tokyo)」がおすすめです。
  3. 入力が完了したら、右下の「Create new project」ボタンをクリックします。
    • プロジェクトの構築には数分かかる場合があります。

Supabaseプロジェクト作成画面

認証設定

作成したプロジェクトのダッシュボードで、左サイドメニューの「Authentication」をクリックし、「Sign In / Providers」を開きます。

メールアドレス + パスワード

Supabaseでは標準で有効になっていますが、念のため設定を確認します。

  1. Auth Providers 一覧から Email をクリックして展開します。
  2. Enable Email provider を ON（緑色）にします。これが有効でないとログインできません。
  3. Secure email change を ON（推奨）にします。
    • これをONにすると、メールアドレス変更時に「古いアドレス」と「新しいアドレス」の両方で承認が必要になり、乗っ取りを防げます。
  4. Secure password change は OFF（初期値）のままでOKです。
  5. Prevent use of leaked passwords は OFF（初期値）にします（Proプラン以上の機能のため）。
  6. 確認できたら、右下の「Save」を押します。

メールアドレス利用設定

メール認証コード / マジックリンク (Passwordless)

この機能は「メールアドレス」の仕組みを使用するため、個別のON/OFFスイッチはありません。 ただし、新規ユーザーの登録許可や匿名ログインの無効化をこの画面で行う必要があります。

  1. 左サイドメニューの Authentication → Sign In / Providers をクリックします。
  2. User Signups というセクションを設定します。
    • Allow new users to sign up: ON（必須）にします。
      これがOFFの場合、管理者が招待したユーザー以外は新規登録できなくなります。
    • Allow anonymous sign-ins: OFF（推奨）にします。
      このプラグインはWordPressユーザーとの連携に「メールアドレス」を使用するため、メールアドレスを持たない匿名ログインはサポートしていません。ONのままだとエラーの原因になる可能性があります。
    • Confirm email: ON（推奨）にします。
      マジックリンクやOTPを使ってログインすると、メールアドレスの所有確認も同時に完了する仕組みになっています。
  3. 設定を変更した場合は、右下の「Save changes」を押して保存します。

Google認証 (OAuth)

Googleアカウントを使ってログイン・登録できるように設定します。これには Google Cloud Platform (GCP) 側での設定も必要になります。

  1. Providers 一覧から Google をクリックして展開します。
  2. Enable Sign in with Google を ON にします。
  3. 最下部にある Callback URL (for OAuth) の横にあるコピーボタンを押して、URLをコピーしておきます（後ほど Google Cloud Platform 側で使います）。
  4. 別タブで Google Cloud Console にアクセスし、プロジェクトを作成（または選択）します。
  5. 左メニューの「APIとサービス」→「OAuth同意画面」を開きます。初回設定ウィザードが表示されるので、以下のように進めます。
    • アプリ情報:
      (1) 「アプリ名」（サイト名など）を入力します。
      (2) 「ユーザー サポートメール」を選択します。
      (3) 「次へ」をクリックします。
    • 対象:
      (1) ユーザーの種類を選択します。一般公開するサイトであれば「外部 (External)」を選択します。
      (2) 「次へ」をクリックします。
    • 連絡先情報:
      (1) 「メールアドレス」欄に、Googleからの通知を受け取るメールアドレスを入力します。
      (2)「次へ」をクリックします。
    • 終了:
      (1) 「Google API サービス: ユーザーデータに関するポリシーに同意します」にチェックを入れます。
      (2) 「同意して続行」をクリックします。
  6. ウィザードが完了すると「Google Auth Platform」の概要画面（またはクライアント画面）が表示されます。「OAuth クライアントを作成」ボタンをクリックします。
  7. クライアントIDの作成画面になります。以下のように設定します。
    • アプリケーションの種類: 「ウェブ アプリケーション」を選択します。
    • 名前: 管理しやすい名前（「Supabase Login」など）を入力します（そのままでもOKです）。
    • 承認済みのリダイレクト URI: 「URI を追加」をクリックし、先ほどSupabaseでコピーした Callback URL を貼り付けます。
    • 「作成」をクリックします。 承認済みリダイレクトURLIを貼り付け OAuthクライアントを作成しました
  8. 「OAuth クライアントを作成しました」 というダイアログが表示されます。
    • クライアント ID: 画面のコピーボタンでコピーし、Supabaseの Client IDs 欄に貼り付けます。
    • ※シークレットは次の手順で確認するため、ここでは「OK」をクリックしてダイアログを閉じます。

  9. クライアント シークレットを確認・コピーします

    • 画面右上にある (i) マーク（詳細情報アイコン）をクリックします。
    • 右側にパネルが表示され、その中に クライアント シークレット があります。
    • コピーボタンを押してコピーし、Supabaseの Client Secret 欄に貼り付けます。 クライアントシークレットをコピー
  10. 【重要】アプリを公開する（テストモードの解除）
    • 左メニューの「ブランド (Branding)」または「対象 (Audience)」をクリックします。
    • 画面内にある「アプリを公開 (Publish App)」ボタンをクリックし、確認画面で「確認」を押して本番環境へ移行します（※これを忘れると、登録したテストユーザー以外ログインできなくなります。）
  11. 再度 Supabase の画面に戻り、その他の設定を確認して保存します。
    • Skip nonce checks: OFF（初期値）のままにします。
    • Allow users without an email: OFF（初期値）のままにします（WordPressとの連携にはメールアドレスが必須のため）。
    • 右下の「Save」を押して保存します。

【重要】リダイレクトURLの設定 Googleログインを使用する場合、Supabase側にあなたのWordPressサイトのURLを許可リストとして追加する必要があります。 リダイレクトURLを設定

  1. 左サイドメニューの Authentication → URL Configuration を開きます。
  2. Redirect URLs の欄に、あなたのWordPressサイトのURL（例: https://example.com）を追加し、「Add URL」をクリックして保存してください。

APIキーの取得とプラグインへの設定

SupabaseとWordPressをつなぐための「URL」と「キー」を取得し、プラグインに入力します。

APIキーとURLの取得 (Supabase側)

Supabaseの新しい管理画面では、URLとキーの表示場所が分かれています。また、本プラグインでは「Legacy」タブにあるキーを使用します。

  1. Project URL（URL）の取得:

    • Supabaseダッシュボードの左下にある Project Settings（歯車アイコン）をクリックします。
    • 左サイドメニューの Configuration という項目の中にある Data API をクリックします。
    • API URL（https://...supabase.co）をコピーし、WordPress側の Supabase プロジェクトURL に貼り付けます。
  2. API Keys（キー）の取得:
    • 左サイドメニューの Project Settings という項目の中にある API Keys をクリックします。
    • 画面中央にあるタブ 「Legacy anon, service_role API keys」 をクリックして切り替えます。 APIキーの取得場所
    • anon public の欄にあるキー（ey... で始まる文字列）をコピーし、WordPress側の Supabase Anon Key に貼り付けます。
    • service_role secret の欄にある Reveal ボタンを押してキーを表示させ、コピーします。これをWordPress側の Supabase Service Role Key に貼り付けます。
      ・ 注意: service_role キーは、Googleユーザーの判定やユーザー削除同期に使用される重要な管理者キーです。他人に教えないでください。

プラグインへの設定 (WordPress側)

上記の操作で、以下の3箇所への入力が完了しているか確認してください。

  1. WordPress管理画面に戻り、「設定」-「Edel Auth(Supabase)」を開きます。
  2. Supabase API接続設定 セクションを確認します。
    • Supabase プロジェクトURL: https://... から始まるURL
    • Supabase Anon Key: ey... から始まる長い文字列
    • Supabase Service Role Key: ey... から始まる長い文字列 設定画面での設定内容
  3. 画面下の「変更を保存」をクリックします。

これで接続設定は完了です。

デザイン・機能設定

API接続ができたら、ログインフォームの見た目や挙動を設定します。

利用する認証方式

サイトでユーザーに提供したいログイン方法にチェックを入れます。

  1. メールアドレス ＋ パスワード: 最も一般的なログイン方法です。
  2. Google認証 (OAuth): Googleアカウントでのログインボタンを表示します。
  3. メール認証コード / マジックリンク: パスワードレスでログインできるボタンを表示します。

その他の設定

  1. メインカラー: ログインボタンやリンクの色を、サイトのデザインに合わせて変更できます。
  2. ウェルカムメール: 新規登録時にWordPressから自動送信されるメールの内容を編集できます。
  3. メンテナンス設定 (Keep Alive): Supabaseの無料プランを使用している場合、長期間アクセスがないとプロジェクトが停止することがあります。これを有効にすると、1日1回自動的にアクセスして停止を防ぎます。

ショートコードの配置

設定が完了したら、固定ページを作成し、以下のショートコードを貼り付けてログインページを作成してください。

  1. ログインフォーム: ［eafs_login］

    • 説明: メールアドレスやGoogleアカウントでログインするためのフォームを表示します。
    • アクセス: ログアウト時のみ機能します。ログイン済みのユーザーがアクセスすると「既にログインしています」というメッセージが表示されます。

  2. 新規登録フォーム: ［eafs_register］

    • 説明: 新しいユーザーアカウントを作成するためのフォームを表示します。
    • アクセス: ログアウト時のみ機能します。ログイン済みの場合はメッセージが表示されます。

  3. パスワードリセット申請: ［eafs_forgot_password］

    • 説明: パスワードを忘れたユーザーが、再設定メールをリクエストするためのフォームです。
    • アクセス: ログアウト時のみ機能します。

  4. パスワード再設定: ［eafs_update_password］

    • 説明: 新しいパスワードを入力して設定するためのフォームです。
    • アクセス: リセットメール内のリンクから遷移してきたユーザー（自動ログイン状態）、またはログイン中のユーザーが使用します。セッションがない状態で直接アクセスしても機能しません。
  5. ログアウトボタン: ［eafs_logout］
    • 説明: クリックするとSupabaseとWordPressの両方からログアウトします。
    • アクセス: ログイン中のユーザーにのみ表示されます。ログアウト状態では何も表示されません。

これらのショートコードを配置したページのURLを、プラグイン設定画面の「リダイレクト設定」に入力しておくと、画面遷移がスムーズになります。

リダイレクト設定 (URLパス)

作成した固定ページのURLパス（ドメイン以下の部分）を、プラグイン設定画面に入力して紐付けます。これにより、ボタンのリンク先や処理完了後の画面遷移が正しく動作するようになります。

  • ログイン後の移動先

    • ログイン成功後に遷移させたいページを指定します。
    • 例: トップページなら / 、会員専用ページなら /my-page など。

  • ログアウト後の移動先

    • ログアウトボタンを押した後に遷移させたいページを指定します。
    • 例: トップページ / や、再ログインを促すためのログインページ /login など。

  • パスワード申請ページURL (Forgot PW)

    • ログインフォームにある「パスワードをお忘れですか？」リンクの飛び先として使用されます。
    • 重要: ショートコード ［eafs_forgot_password］ を設置した固定ページのパス（例: /forgot-password）を正確に入力してください。
  • パスワード再設定ページURL (New PW)
    • ユーザーに届く「パスワード再設定メール」内のリンクをクリックした際の飛び先です。
    • 重要: ショートコード ［eafs_update_password］ を設置した固定ページのパス（例: /reset-password）を正確に入力してください。ここが間違っていると、ユーザーはパスワードの再設定ができません。

開発者向け：フックの使い方

WordPressのフック（アクションおよびフィルター）を使用することで、プラグインの動作をカスタマイズできます。以下は、よく使われる2種類の主要なフックとコードサンプルです。

アクションフック: eafs_after_user_login

このフックは、ユーザーがSupabase経由で正常にログインした直後に実行されます。ユーザーメタの更新や、データの同期に便利です。

  • パラメーター:

    • $user_id (int): WordPressのユーザーID。
    • $supabase_user (array): Supabaseから返されたユーザーデータ。
  • サンプルコード:

フィルターフック: eafs_register_user_data

このフィルターは、Supabaseの新規登録によってWordPressユーザーが作成される直前に、ユーザーデータ（表示名や権限グループなど）を変更することができます。

  • パラメーター:

    • $user_data (array): WordPressのデフォルトユーザーデータ（email, user_loginなど）。
    • $supabase_user (array): Supabaseから返されたユーザーデータ。
  • サンプルコード:

注意事項・トラブルシューティング

管理者アカウントのログインについて

セキュリティ上の理由から、管理者権限（Administrator）を持つユーザーは、本プラグインのログインフォームからはログインできません。 管理者がログインする場合は、従来のWordPressログインページ（/wp-login.php または /wp-admin）を使用してください。

一般ユーザーによる標準ログイン画面へのアクセスについて

一般ユーザーが /wp-login.php などの標準ログイン画面にアクセスし、Supabaseのパスワードを入力してもログインはできません（パスワード情報が同期されていないため）。 ユーザーの混乱を防ぐため、「WPS Hide Login」などのプラグインを併用して標準ログインURLを変更し、一般ユーザーがアクセスできないように設定することを推奨します。

キャッシュプラグインとの併用について

WP Rocket、W3 Total Cache、Autoptimizeなどのキャッシュプラグインを使用している場合、ログインページ（ショートコードを設置したページ）を必ずキャッシュの「除外リスト」に追加してください。 キャッシュが効いていると、セキュリティトークン（Nonce）が古くなり、ログインや登録がエラーになる原因となります。

Google認証でログインできない場合

Googleログインでエラーが出る場合、Google Cloud Platformの設定で「アプリの公開（Publish App）」が完了していない可能性があります。 「テストモード」のままでは、登録されたテストユーザー以外はログインできません。Google Cloud Consoleの「OAuth同意画面」から公開ステータスを確認してください。

Supabase無料プランのプロジェクト停止について

Supabaseの無料プラン（Free Tier）を利用している場合、プロジェクトへのアクセスが1週間以上ないと、プロジェクトが一時停止（Pause）される仕様があります。 本プラグインの「Keep Alive（定期アクセス）」機能を有効にすることで停止を防ぐことができますが、万が一ログインできなくなった場合は、Supabaseのダッシュボードにログインしてプロジェクトを再開（Restore）してください。

Chat