このドキュメントでは、Simple Easy Social Login (SESLP) プラグインで 各ソーシャルログインプロバイダー(Google、Facebook、LinkedIn、Naver、Kakao、LINE)を 設定する方法を説明します。

すべてのサインインは OAuth 2.0 / OpenID Connect (OIDC) に基づいています。
各プロバイダーのコンソールでアプリ(クライアント)を作成し、 Client ID / Client Secret を SESLP に入力する必要があります。


🔧 共通設定ガイド

1) Redirect URI のルール:

https://{your-domain}/?social_login={provider}

例:

2) HTTPS が必要です。

ほとんどのプロバイダーは HTTPS を必須としており、http:// のリダイレクトは拒否されます。

3) 完全一致

コンソールに登録した Redirect URI は、SESLP が送信する値と 100% 一致している必要があります (プロトコル、サブドメイン、パス、末尾スラッシュ、クエリ文字列を含む)。

4) メールアドレスが取得できない場合があります

一部のプロバイダーでは、ユーザーがメールアドレスの共有を拒否できます。 SESLP は安定したプロバイダー ID を使ってアカウントを紐付けることができます。

5) ログの確認場所

🐞 デバッグログとトラブルシューティング

SESLP デバッグログの読み方

ログファイルの場所

  • /wp-content/SESLP-debug.log(SESLP デバッグログ)
  • /wp-content/debug.logWP_DEBUG_LOG = true

ログ形式

[YYYY-MM-DD HH:MM:SS Z] [LEVEL] Message {"key":"value",...}
  • Z: UTC または WordPress のローカル時刻(例: KST)— SESLP 設定で選択可能
  • プライバシー: メールアドレス / トークン / シークレットは自動的にマスクされます (例: r********@g****.com

OAuth フローのログ(一般例)

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 クラスが実行されることを確認する

バグレポートに含めると役立つ情報

  • 関連するログ行(マスク済み)
  • 使用したプロバイダー(Google / Naver など)
  • リダイレクトモード / カスタム URL
  • デバッグログの有効状態
  • WordPress 環境(シングルサイト、マルチサイト、キャッシュプラグイン)

🌍 プロバイダーガイド

以下の各プロバイダーを展開し、該当プロバイダー用に準備したガイド内容を貼り付けてください。


Google
  • 推奨スコープ: openid email profile
  • Redirect URI ルール: https://{domain}/?social_login=google

1) 事前準備(必須チェックリスト)

(1) HTTPS 推奨 / 必須(ローカル環境では信頼できる証明書を使用)

(2) Redirect URI はコンソールに登録した値と100% 完全一致している必要があります。例: https://example.com/?social_login=google

(3) テストモードでは テストユーザーのみログイン可能(最大100人)

(4) アプリのホームページ / プライバシーポリシー / 利用規約 URL を使用する場合、アプリドメイン(Authorized domains)登録および所有権確認が必要になる場合があります

2) プロジェクト / 同意画面の設定

(1) Google Cloud Console にアクセス
https://console.cloud.google.com/apis/credentials

(2) 上部でプロジェクトを選択 → 必要に応じて新規プロジェクト作成

(3) サイドバー: API とサービス → OAuth 同意画面

(4) ユーザータイプ選択: 通常は External

(5) アプリ情報入力: アプリ名、サポートメール、(任意)ロゴ

(6) アプリドメインセクション

  • ホームページ、プライバシーポリシー、利用規約 URL を入力
  • ルートドメイン(例: example.com)Authorized domainsに追加 → 保存
  • 必要に応じて Search Console でドメイン所有権確認を実施

(7) スコープ設定

  • 推奨: openid, email, profile
  • 機密 / 制限スコープは公開前に審査が必要な場合があります

(8) テストユーザー追加(テストモードでログイン可能なメール)

(9) 保存

注意: 基本スコープ(openid email profile)のみ使用する場合、多くの場合審査なしで公開可能です。

3) OAuth クライアント作成(Web アプリ)

(1) サイドバー: API とサービス → 認証情報

(2) 上部: + 認証情報を作成 → OAuth クライアント ID

(3) アプリケーションの種類: Web application

(4) 分かりやすい名前を入力(例: SESLP – Front

(5) 承認済みのリダイレクト URI追加

  • https://{domain}/?social_login=google

(6) 作成をクリックし、表示されたClient ID / Client Secretをコピー

(任意) JavaScript のオリジンは、このプラグイン(認可コードフロー)では通常不要です。

4) WordPress(プラグイン)設定

(1) WP 管理画面 → SESLP Settings → Google タブ

(2) Client ID / Client Secret を貼り付け → 保存

(3) フロントエンドのGoogle ログインボタンでテスト

5) テストから本番への切り替え

(1) OAuth 同意画面 → 公開ステータスを確認

(2) 本番に切り替えるには:

  • アプリ情報(ロゴ / ドメイン / ポリシー / 利用規約)を確認
  • 不要なスコープを削除し、必要なもののみ残す
  • 機密スコープ使用時は審査を申請

(3) 本番化後は、すべての Google アカウントでログイン可能

6) よくあるエラーと対処方法

(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.logWP_DEBUG, WP_DEBUG_LOG = true

7) 最終チェックリスト

  • OAuth 同意画面: アプリ情報 / ドメイン / ポリシー / 利用規約 / スコープ / テストユーザー設定
  • 認証情報: Web Application クライアント作成
  • Redirect URI 登録: https://{domain}/?social_login=google
  • SESLP: Client ID / Secret 保存およびログインテスト
  • 本番公開時にステータス変更(必要に応じて審査申請)

Facebook
  • リダイレクトURI: https://{domain}/?social_login=facebook
  • 要求される権限(推奨): public_profile, email
  • Facebookは openid を使用しません。

1) アプリの作成とプロダクトの追加

(1) Meta for Developers にアクセス → ログイン
https://developers.facebook.com/

(2) Create App をクリック → 一般タイプ(例: Consumer)を選択 → アプリ作成

(3) 左側メニューの Products から Facebook Login を追加

(4) Settings に移動 → 以下を確認:

  • Client OAuth Login: ON
  • Web OAuth Login: ON
  • Valid OAuth Redirect URIs:
  • https://{domain}/?social_login=facebook を追加
  • (任意)HTTPSの強制: 通常は推奨

2) 基本設定(App Settings → Basic)

(1) App Domains: example.com(ポリシー / 利用規約 / ホームページのドメイン)

(2) プライバシーポリシーURL: 公開されたページ

(3) 利用規約URL: 公開されたページ

(4) ユーザーデータ削除: ガイドURLまたは削除エンドポイントを提供

(5) カテゴリ / アプリアイコン: 設定後 保存

3) スコープ(権限)とアプリ審査

(1) 標準ログインに必要な基本権限は public_profile、オプションのメールは email

(2) 多くの場合、email は審査なしで使用可能ですが、地域やアカウントによって例外があります

(3) ページや広告などの高度な権限App Review および Business Verification が必要です

4) モード切替(Development → Live)

画面上部または設定画面で App Mode: Development → Live に変更

5) Live切替前チェックリスト

  • プライバシーポリシー / 利用規約 / データ削除URLの準備
  • Valid OAuth Redirect URIs を正確に登録
  • 不要な権限を削除し、必要なもののみ使用
  • (必要に応じて)App Review / Business Verification 完了

6) WordPress 設定(SESLP)

(1) WP管理画面 → SESLP Settings → Facebook

(2) App ID / App Secret を入力 → 保存

(3) フロントエンドの Facebookログインボタン でテスト

7) トラブルシューティング

(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を設定する必要があります


LinkedIn
  • リダイレクトURI: https://{domain}/?social_login=linkedin
  • 必須設定: OpenID Connect(OIDC)を有効化
  • 推奨スコープ: openid, profile, email
  • LinkedIn は従来スコープ(r_liteprofile, r_emailaddress)を廃止中
  • 新規アプリはOIDC標準スコープを使用する必要があります

1) アプリの作成

(1) LinkedIn Developers Console にアクセス

https://www.linkedin.com/developers/apps

(2) LinkedInアカウントでログイン

(3) Create app をクリック

(4) 必須項目を入力:

  • アプリ名: 例: MySite LinkedIn Login
  • LinkedInページ: 選択または「None」
  • アプリロゴ: 100×100以上 PNG/JPG
  • プライバシーポリシーURL / ビジネスメール: 有効かつ公開されているもの

(5) Create app をクリック

デフォルトで開発モードopenid, profile, email ログインを公開せずにテスト可能

2) OpenID Connect(OIDC)の有効化

(1) Products タブへ移動

(2) Sign In with LinkedIn using OpenID Connect を探す

(3) Add product をクリック → 即時承認

(4) OIDC設定は Auth タブに表示

必要なOIDCスコープ

  • openid → IDトークン
  • profile → 名前・写真・見出し
  • email → メールアドレス

3) OAuth 2.0 設定(Authタブ)

(1) Auth → OAuth 2.0 settings へ移動

(2) Redirect URLs に追加:

https://{domain}/?social_login=linkedin

(3) 完全一致必須(プロトコル・サブドメイン・スラッシュ・クエリ)

(4) 必要に応じて複数登録:

  • ローカル: https://localhost:3000/?social_login=linkedin
  • ステージング: https://staging.example.com/?social_login=linkedin
  • 本番: https://example.com/?social_login=linkedin

(5) Save

4) Client ID / Client Secret の取得

(1) Auth タブで確認:

  • Client ID
  • Client Secret

(2) WordPress管理画面 → SESLP Settings → LinkedIn

(3) 貼り付け → 保存

(4) フロントエンドの LinkedInログインボタン でテスト

セキュリティ:

  • Client Secret を公開しない
  • 漏洩した場合は Regenerate secret を使用

5) スコープ説明

スコープ 説明 備考
openid OIDC標準のIDトークンを返す 必須
profile 名前・写真・見出しなど 必須
email メールアドレス 必須

従来スコープ(r_liteprofile, r_emailaddress

  • 2024年以降廃止
  • 新規アプリでは使用不可

6) トラブルシューティング

(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.log

7) 最終チェックリスト

  • アプリ作成済み
  • OpenID Connect プロダクト追加
  • Redirect URI 正確登録
  • Client ID / Secret を SESLP に保存
  • スコープ: openid profile email(従来スコープなし)
  • HTTPS環境でテスト完了

注意:

  • SESLP は OIDCフロー を完全サポート
  • 従来の OAuth 2.0 は 非対応
  • 新規連携では必ず OpenID Connect を使用してください

Naver
  • リダイレクトURI: https://{domain}/?social_login=naver
  • 推奨スコープ: 基本プロフィール(name)、メール(email
  • Naver は Naver Login(ネイバーログイン / 네아로) API を使用し、HTTPS 必須

1) アプリケーション登録

(1) Naver Developer Center にアクセス

https://developers.naver.com/apps/

(2) Naver アカウントでログイン

(3) Application → アプリケーション登録 をクリック

(4) 必須項目を入力:

  • アプリケーション名: 例: MySite Naver Login
  • API 使用: Naver Login(ネイバーログイン / 네아로) を選択
  • 環境追加 → Web
  • サービスURL: https://example.com
  • コールバックURL: https://example.com/?social_login=naver

(5) 利用規約に同意 → 登録

注意:

  • HTTPS 必須 → HTTP は使用不可
  • サブドメインは個別に登録が必要

2) Client ID / Client Secret の取得

(1) My Applications に移動

(2) アプリをクリック → Client IDClient Secret をコピー

3) WordPress(プラグイン)設定

(1) WP管理画面 → SESLP Settings → Naver

(2) Client ID / Client Secret を貼り付け

(3) リダイレクトURI が完全一致していることを確認: https://{domain}/?social_login=naver

(4) 保存 → フロントエンドのNaverログインボタンでテスト

4) 権限およびデータ提供

データ スコープ 備考
名前 name デフォルト
メール email デフォルト
性別、生年月日 別途 審査が必要
  • ユーザーは同意画面で 許可 / 拒否 が可能
  • メール拒否の場合 → email = nullIDベースの連携ロジックを使用
  • 機密データは Naver アプリ審査 が必要

5) トラブルシューティング

(1) リダイレクトURI不一致

→ わずかな違いでもエラー → 100%一致を確認

(2) HTTP エラー

→ 必ず HTTPS を使用

(3) サブドメインエラー

→ 各サブドメインを個別に登録

(4) email NULL

→ ユーザー拒否または非公開 → IDベース処理を準備

(5) 審査が必要

→ 基本ログイン: 審査不要
→ 追加データ: 審査必要

ログ:

  • /wp-content/SESLP-debug.log
  • /wp-content/debug.log

6) 最終チェックリスト

  • Naver Developer Center にアプリ登録
  • コールバックURLを正確に登録
  • HTTPS を使用
  • サブドメイン個別登録(必要な場合)
  • Client ID / Secret を SESLP に保存
  • メール同意 / 拒否の動作確認
  • フロントエンドログインテスト完了

注意:

  • SESLP は Naver Login(ネイバーログイン / 네아로) を完全サポートします。
  • 基本ログイン(name, email)は 審査なしで利用可能 です。

Kakao
  • リダイレクトURI: https://{domain}/?social_login=kakao
  • 推奨スコープ: profile_nicknameprofile_imageaccount_email
  • account_email本人確認またはビジネス認証後にのみ利用可能
  • HTTPS 必須Client Secret の有効化が必須

1) アプリケーションの作成

(1) Kakao Developers にアクセス

https://developers.kakao.com/

(2) ログイン → My Applications → 新しいアプリの追加

(3) 以下を入力:

  • アプリ名、会社名
  • カテゴリ
  • 運用ポリシーに同意

(4) 保存

2) Kakao Login の有効化

(1) Product Settings > Kakao Login

(2) Enable Kakao LoginON

(3) リダイレクトURIの登録

  • https://{domain}/?social_login=kakao
  • 保存

(4) ドメインはPlatformサイトドメインと一致する必要があります

3) 同意項目(スコープ)

(1) 同意項目

(2) 追加および設定:

スコープ 説明 同意タイプ 備考
profile_nickname ニックネーム 必須 / 任意 基本
profile_image プロフィール画像 必須 / 任意 基本
account_email メール 任意 認証が必要

(3) 各項目の利用目的を明確に記載

(4) 保存

注意: 機密スコープは認証(審査)が必要

4) Webプラットフォームの登録

(1) App Settings > Platform

(2) Webプラットフォーム登録

(3) サイトドメイン: https://{domain}

(4) 保存 → リダイレクトURIのドメインと一致する必要あり

5) セキュリティ – Client Secret の生成と有効化

(1) Product Settings > Security

(2) Use Client SecretON

(3) Secret生成 → 値をコピー

(4) Activation StatusActive

(5) 保存

重要: 生成後は必ず有効化が必要

6) REST API Key(Client ID)の取得

(1) App Keys

(2) REST API Key をコピー → Client IDとして使用

7) WordPress 設定

(1) WP管理画面 → SESLP Settings → Kakao

(2) Client ID = REST API Key
Client Secret = 生成した Secret

(3) 保存

(4) Kakaoログインボタンでテスト

8) トラブルシューティング

(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.log

9) 最終チェックリスト

  • Kakao Login 有効化済み
  • リダイレクトURI登録済み
  • Webプラットフォームドメイン登録済み
  • 同意項目設定済み
  • Client Secret 生成+有効化済み
  • REST API Key / Secret を SESLP に保存
  • HTTPS環境でテスト完了

LINE
  • リダイレクトURI: https://{domain}/?social_login=line
  • 必須: OpenID Connect を有効化し、メールアドレス権限を申請・承認取得すること
  • 推奨スコープ: openid, profile, email
  • HTTPS 必須メール権限には承認が必要

1) Provider と Channel の作成

(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) 設定内容:

  • Channel type: LINE Login
  • Provider: 作成した Provider を選択
  • Region: 対象国(例: South Korea, Japan
  • Name / description / icon: 同意画面に表示されます

(7) 利用規約に同意 → Create

2) OpenID Connect の有効化とメール権限申請

(1) 左メニューの OpenID Connect へ移動

(2) Email address permission の横にある Apply をクリック

(3) 申請内容を入力:

  • プライバシーポリシー URL(公開アクセス可能であること)
  • プライバシーポリシーのスクリーンショットをアップロード
  • 送信

(4) email スコープは承認後にのみ利用可能
→ 承認には通常 1〜3 営業日かかります

3) Callback URL の登録と Channel の公開

(1) 左メニューの LINE Login へ移動

(2) Callback URL を入力:

https://{domain}/?social_login=line

(3) 完全一致が必要:

  • プロトコル: https://HTTP 不可
  • ドメイン、パス、クエリ文字列が 100% 一致している必要があります

(4) Save をクリック

(5) Channel の状態を Published に変更

  • Development mode: テスト専用
  • Published: 本番サービス

4) Channel ID / Secret の取得

(1) Channel 上部または Basic settings

(2) Channel ID → SESLP の Client ID
Channel Secret → SESLP の Client Secret

5) WordPress 設定

(1) WP管理画面 → SESLP Settings → LINE

(2) Client ID ← Channel ID
Client Secret ← Channel Secret

(3) Save

(4) フロントエンドの LINE ログインボタン でテスト

6) トラブルシューティング

(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

7) 最終チェックリスト

  • Provider + LINE Login channel をビジネスアカウントで作成
  • メール権限の申請と承認完了
  • Callback URL を正確に登録
  • HTTPS を使用し、Published 状態に変更
  • Channel ID / Secret を SESLP に保存
  • フロントエンドのログインテスト完了

注意: SESLP は以下を完全サポートします

  • LINE Login v2.1 + OpenID Connect
  • メール取得には事前承認が必要