このドキュメントでは、Simple Easy Social Login (SESLP) プラグインで 各ソーシャルログインプロバイダー(Google、Facebook、LinkedIn、Naver、Kakao、LINE)を 設定する方法を説明します。
すべてのサインインは OAuth 2.0 / OpenID Connect (OIDC) に基づいています。
各プロバイダーのコンソールでアプリ(クライアント)を作成し、 Client ID / Client Secret を SESLP に入力する必要があります。
https://{your-domain}/?social_login={provider}
例:
https://example.com/?social_login=googlehttps://example.com/?social_login=facebookhttps://example.com/?social_login=linkedinhttps://example.com/?social_login=naverhttps://example.com/?social_login=kakaohttps://example.com/?social_login=lineほとんどのプロバイダーは HTTPS を必須としており、http:// のリダイレクトは拒否されます。
コンソールに登録した Redirect URI は、SESLP が送信する値と 100% 一致している必要があります (プロトコル、サブドメイン、パス、末尾スラッシュ、クエリ文字列を含む)。
一部のプロバイダーでは、ユーザーがメールアドレスの共有を拒否できます。 SESLP は安定したプロバイダー ID を使ってアカウントを紐付けることができます。
/wp-content/SESLP-debug.log/wp-content/debug.log (WP_DEBUG_LOG = true)/wp-content/SESLP-debug.log(SESLP デバッグログ)/wp-content/debug.log(WP_DEBUG_LOG = true)[YYYY-MM-DD HH:MM:SS Z] [LEVEL] Message {"key":"value",...}
Z: UTC または WordPress のローカル時刻(例: KST)— SESLP 設定で選択可能r********@g****.com)
1) OAuth 開始
[DEBUG] State created {"provider":"google","state":"906****23","ttl":"10min"}
意味: CSRF 保護用の state トークンが作成されました。ttl は 10 分間有効です。
2) Callback triggered
[DEBUG] Auth route triggered {"provider":"google","has_code":1}
意味: コールバックに到達しました。has_code:1 → OAuth の code を受信しています。
3) State 検証
成功:
[DEBUG] State validated {"provider":"google","state":"906****23"}
失敗:
[WARNING] State validation failed: not found/expired {"provider":"google","state":"906****23"}
4) トークン交換
[DEBUG] Token response (google) {"has_access_token":1}
意味: トークンを取得しました。
失敗:
[ERROR] Token request failed (google) {"error":"..."}
5) ユーザー情報リクエスト
[ERROR] Userinfo request failed (google)
[WARNING] Invalid userinfo (google)
6) ユーザー紐付け
[DEBUG] Linker: signing in user {"user_id":45,"provider":"google","created":0}
[INFO] Login success (google) {"user_id":45,"email":"r********@g****.com"}
7) リダイレクト
[DEBUG] Redirect decision {"mode":"profile","user_id":45,"url":"https://example.com/wp-admin/profile.php"}
| ログメッセージ(要約) | 考えられる原因 | 対応方法 |
|---|---|---|
| State validation failed | タイムアウト、タブ切り替え、重複リクエスト | すぐに再試行する、プライベートモードを使う |
| Token request failed | Client ID / Secret / Redirect の誤り、リクエストのブロック | 開発者コンソール、ファイアウォール、サーバー時刻を確認する |
| Userinfo invalid | スコープ不足、またはメールアドレスが非公開 | email, profile スコープを追加し、ユーザーの同意を得る |
| User create failed | アカウント競合、または WordPress 側の制限 | 既存ユーザーやマルチサイトのルールを確認する |
| Redirect missing | コード内で早期 return が発生している | コールバック後に Redirect クラスが実行されることを確認する |
以下の各プロバイダーを展開し、該当プロバイダー用に準備したガイド内容を貼り付けてください。
openid email profilehttps://{domain}/?social_login=google(1) HTTPS 推奨 / 必須(ローカル環境では信頼できる証明書を使用)
(2) Redirect URI はコンソールに登録した値と100% 完全一致している必要があります。例: https://example.com/?social_login=google
(3) テストモードでは テストユーザーのみログイン可能(最大100人)
(4) アプリのホームページ / プライバシーポリシー / 利用規約 URL を使用する場合、アプリドメイン(Authorized domains)登録および所有権確認が必要になる場合があります
(1) Google Cloud Console にアクセス
https://console.cloud.google.com/apis/credentials
(2) 上部でプロジェクトを選択 → 必要に応じて新規プロジェクト作成
(3) サイドバー: API とサービス → OAuth 同意画面
(4) ユーザータイプ選択: 通常は External
(5) アプリ情報入力: アプリ名、サポートメール、(任意)ロゴ
(6) アプリドメインセクション
(7) スコープ設定
openid, email, profile(8) テストユーザー追加(テストモードでログイン可能なメール)
(9) 保存
注意: 基本スコープ(openid email profile)のみ使用する場合、多くの場合審査なしで公開可能です。
(1) サイドバー: API とサービス → 認証情報
(2) 上部: + 認証情報を作成 → OAuth クライアント ID
(3) アプリケーションの種類: Web application
(4) 分かりやすい名前を入力(例: SESLP – Front)
(5) 承認済みのリダイレクト URI追加
https://{domain}/?social_login=google(6) 作成をクリックし、表示されたClient ID / Client Secretをコピー
(任意) JavaScript のオリジンは、このプラグイン(認可コードフロー)では通常不要です。
(1) WP 管理画面 → SESLP Settings → Google タブ
(2) Client ID / Client Secret を貼り付け → 保存
(3) フロントエンドのGoogle ログインボタンでテスト
(1) OAuth 同意画面 → 公開ステータスを確認
(2) 本番に切り替えるには:
(3) 本番化後は、すべての Google アカウントでログイン可能
(1) redirect_uri_mismatch
→ コンソールに登録した URI と実際のリクエスト URI が少しでも異なると発生(プロトコル / サブドメイン / スラッシュ / クエリ含む)。完全一致させてください。
(2) access_denied / disallowed_useragent
→ ブラウザ / アプリ内制限。通常のブラウザで再試行
(3) invalid_client / unauthorized_client
→ Client ID / Secret の誤り、またはアプリ状態(削除 / 無効)。再発行または確認
(4) メールが取得できない
→ email スコープの有無、同意画面、アカウント設定を確認。メール取得の目的を明確に説明してください。
ログ確認:
wp-content/SESLP-debug.log(プラグインデバッグ ON)wp-content/debug.log(WP_DEBUG, WP_DEBUG_LOG = true)https://{domain}/?social_login=googlehttps://{domain}/?social_login=facebookpublic_profile, emailopenid を使用しません。(1) Meta for Developers にアクセス → ログイン
https://developers.facebook.com/
(2) Create App をクリック → 一般タイプ(例: Consumer)を選択 → アプリ作成
(3) 左側メニューの Products から Facebook Login を追加
(4) Settings に移動 → 以下を確認:
https://{domain}/?social_login=facebook を追加(1) App Domains: example.com(ポリシー / 利用規約 / ホームページのドメイン)
(2) プライバシーポリシーURL: 公開されたページ
(3) 利用規約URL: 公開されたページ
(4) ユーザーデータ削除: ガイドURLまたは削除エンドポイントを提供
(5) カテゴリ / アプリアイコン: 設定後 保存
(1) 標準ログインに必要な基本権限は public_profile、オプションのメールは email
(2) 多くの場合、email は審査なしで使用可能ですが、地域やアカウントによって例外があります
(3) ページや広告などの高度な権限は App Review および Business Verification が必要です
画面上部または設定画面で App Mode: Development → Live に変更
(1) WP管理画面 → SESLP Settings → Facebook
(2) App ID / App Secret を入力 → 保存
(3) フロントエンドの Facebookログインボタン でテスト
(1) Can't Load URL / redirect_uri エラー
→ Valid OAuth Redirect URIs に登録されたURIが完全一致しているか確認(プロトコル、サブドメイン、スラッシュ、クエリ含む)
(2) email null
→ ユーザーがFacebookにメールを登録していない、または非公開設定。IDベースのアカウント連携ロジックを用意し、同意画面でメール利用目的を明確に説明
(3) 権限関連エラー
→ 要求スコープが基本範囲を超える場合、App Review / Business Verification が必要
(4) Liveに切り替えできない
→ ポリシー / 利用規約 / データ削除URLが未設定または非公開。公開URLを設定する必要があります
https://{domain}/?social_login=linkedinopenid, profile, emailr_liteprofile, r_emailaddress)を廃止中(1) LinkedIn Developers Console にアクセス
→ https://www.linkedin.com/developers/apps
(2) LinkedInアカウントでログイン
(3) Create app をクリック
(4) 必須項目を入力:
MySite LinkedIn Login(5) Create app をクリック
デフォルトで開発モード → openid, profile, email ログインを公開せずにテスト可能
(1) Products タブへ移動
(2) Sign In with LinkedIn using OpenID Connect を探す
(3) Add product をクリック → 即時承認
(4) OIDC設定は Auth タブに表示
必要なOIDCスコープ
openid → IDトークンprofile → 名前・写真・見出しemail → メールアドレス(1) Auth → OAuth 2.0 settings へ移動
(2) Redirect URLs に追加:
→ https://{domain}/?social_login=linkedin
(3) 完全一致必須(プロトコル・サブドメイン・スラッシュ・クエリ)
(4) 必要に応じて複数登録:
https://localhost:3000/?social_login=linkedinhttps://staging.example.com/?social_login=linkedinhttps://example.com/?social_login=linkedin(5) Save
(1) Auth タブで確認:
(2) WordPress管理画面 → SESLP Settings → LinkedIn
(3) 貼り付け → 保存
(4) フロントエンドの LinkedInログインボタン でテスト
セキュリティ:
| スコープ | 説明 | 備考 |
|---|---|---|
openid |
OIDC標準のIDトークンを返す | 必須 |
profile |
名前・写真・見出しなど | 必須 |
email |
メールアドレス | 必須 |
従来スコープ(r_liteprofile, r_emailaddress)
(1) redirect_uri_mismatch
→ URIのわずかな違いでもエラー → 100%一致を確認
(2) invalid_client
→ ID/Secret誤りまたはアプリ無効 → 再確認または再生成
(3) email NULL
→ ユーザー拒否またはスコープ不足 → 同意画面で説明
(4) insufficient_scope
→ スコープ未承認 → OIDC有効化を確認
(5) OIDC未有効
→ Productsに OIDC が追加されていない
ログ:
/wp-content/SESLP-debug.log/wp-content/debug.logopenid profile email(従来スコープなし)注意:
https://{domain}/?social_login=navername)、メール(email)(1) Naver Developer Center にアクセス
→ https://developers.naver.com/apps/
(2) Naver アカウントでログイン
(3) Application → アプリケーション登録 をクリック
(4) 必須項目を入力:
MySite Naver LoginNaver Login(ネイバーログイン / 네아로) を選択https://example.comhttps://example.com/?social_login=naver(5) 利用規約に同意 → 登録
注意:
(1) My Applications に移動
(2) アプリをクリック → Client ID と Client Secret をコピー
(1) WP管理画面 → SESLP Settings → Naver
(2) Client ID / Client Secret を貼り付け
(3) リダイレクトURI が完全一致していることを確認: https://{domain}/?social_login=naver
(4) 保存 → フロントエンドのNaverログインボタンでテスト
| データ | スコープ | 備考 |
|---|---|---|
| 名前 | name |
デフォルト |
| メール | email |
デフォルト |
| 性別、生年月日 | 別途 | 審査が必要 |
email = null → IDベースの連携ロジックを使用(1) リダイレクトURI不一致
→ わずかな違いでもエラー → 100%一致を確認
(2) HTTP エラー
→ 必ず HTTPS を使用
(3) サブドメインエラー
→ 各サブドメインを個別に登録
(4) email NULL
→ ユーザー拒否または非公開 → IDベース処理を準備
(5) 審査が必要
→ 基本ログイン: 審査不要
→ 追加データ: 審査必要
ログ:
/wp-content/SESLP-debug.log/wp-content/debug.log注意:
name, email)は 審査なしで利用可能 です。https://{domain}/?social_login=kakaoprofile_nickname、profile_image、account_emailaccount_email は本人確認またはビジネス認証後にのみ利用可能(1) Kakao Developers にアクセス
→ https://developers.kakao.com/
(2) ログイン → My Applications → 新しいアプリの追加
(3) 以下を入力:
(4) 保存
(1) Product Settings > Kakao Login
(2) Enable Kakao Login を ON
(3) リダイレクトURIの登録
https://{domain}/?social_login=kakao(4) ドメインはPlatformサイトドメインと一致する必要があります
(1) 同意項目
(2) 追加および設定:
| スコープ | 説明 | 同意タイプ | 備考 |
|---|---|---|---|
profile_nickname |
ニックネーム | 必須 / 任意 | 基本 |
profile_image |
プロフィール画像 | 必須 / 任意 | 基本 |
account_email |
メール | 任意 | 認証が必要 |
(3) 各項目の利用目的を明確に記載
(4) 保存
注意: 機密スコープは認証(審査)が必要
(1) App Settings > Platform
(2) Webプラットフォーム登録
(3) サイトドメイン: https://{domain}
(4) 保存 → リダイレクトURIのドメインと一致する必要あり
(1) Product Settings > Security
(2) Use Client Secret → ON
(3) Secret生成 → 値をコピー
(4) Activation Status → Active
(5) 保存
重要: 生成後は必ず有効化が必要
(1) App Keys
(2) REST API Key をコピー → Client IDとして使用
(1) WP管理画面 → SESLP Settings → Kakao
(2) Client ID = REST API Key
Client Secret = 生成した Secret
(3) 保存
(4) Kakaoログインボタンでテスト
(1) redirect_uri_mismatch → 完全一致(100%)が必要
(2) invalid_client → Secret未有効化または入力ミス
(3) email empty → ユーザー拒否または未認証
(4) ドメイン不一致 → Platform と Redirect URI の差異
(5) HTTP禁止 → HTTPSのみ対応
ログ:
/wp-content/SESLP-debug.log/wp-content/debug.loghttps://{domain}/?social_login=lineopenid, profile, email(1) LINE Developers Console にアクセス
→ https://developers.line.biz/console/
(2) LINE ビジネスアカウントでログイン(個人アカウント不可)
(3) Create a new provider をクリック → 名前入力 → Create
(4) 作成した Provider の下で → Channels タブ
(5) Create a LINE Login channel を選択
(6) 設定内容:
LINE LoginSouth Korea, Japan)(7) 利用規約に同意 → Create
(1) 左メニューの OpenID Connect へ移動
(2) Email address permission の横にある Apply をクリック
(3) 申請内容を入力:
(4) email スコープは承認後にのみ利用可能
→ 承認には通常 1〜3 営業日かかります
(1) 左メニューの LINE Login へ移動
(2) Callback URL を入力:
→ https://{domain}/?social_login=line
(3) 完全一致が必要:
https://(HTTP 不可)(4) Save をクリック
(5) Channel の状態を Published に変更
(1) Channel 上部または Basic settings
(2) Channel ID → SESLP の Client ID
Channel Secret → SESLP の Client Secret
(1) WP管理画面 → SESLP Settings → LINE
(2) Client ID ← Channel ID
Client Secret ← Channel Secret
(3) Save
(4) フロントエンドの LINE ログインボタン でテスト
(1) redirect_uri_mismatch → わずかな違いでもエラー → 100% 一致を確認
(2) invalid_client → Secret の入力ミス、または Published ではない
(3) email NULL → メール権限が未承認、またはユーザーが拒否
(4) HTTP 不可 → HTTPS 必須(localhost の HTTPS は可)
(5) Development mode の制限 → テストアカウントのみログイン可能
ログ:
/wp-content/SESLP-debug.log/wp-content/debug.log注意: SESLP は以下を完全サポートします