コンテンツへスキップ

WordPress.com Connect

このテキストはAIを使用して翻訳されました。英語の原文を表示するには、こちらをクリックしてください。

WordPress.com Connect は、「WordPress.com でログイン」機能に特化した、効率的な認証ソリューションです。数百万人の WordPress.com ユーザーが既存の WordPress.com 資格情報を使用してアプリケーションに安全かつ簡単に認証できる方法を提供します。

「WordPress.com で接続」ボタンを示す画像。

WordPress.com Connect は、ユーザー認証と本人確認に特化した OAuth2 の実装です。WordPress.com サイトへの完全な API アクセスやコンテンツ管理については、OAuth2 認証のドキュメントをご覧ください。

WordPress.com Connect を使用すると、WordPress.com ユーザーは新しいアカウントを作成することなく、すばやくサービスにログインできます。ユーザーが接続すると、アプリケーションはユーザーの基本的なプロフィール情報(名前、メールアドレス、アバター)を受け取ります。ユーザーは WordPress.com のデータとプライバシーの管理を引き続き維持できます。

WordPress.com Connect の主な特徴

  • ユーザーフレンドリー:数百万人の WordPress.com ユーザーにとって馴染みのあるインターフェース
  • 本人確認に特化:コンテンツ管理ではなく、ユーザー認証のために設計
  • 限定されたスコープ/me/ エンドポイント経由の基本的なプロフィール情報へのアクセスに限定
  • 簡素化されたフロー:「WordPress.com でログイン」ボタンに最適化

メリット

数百万人のユーザー – WordPress.com は数百万人のユーザーで構成されており、日々成長しています。WordPress.com Connect を追加することで、WordPress.com ユーザーが新しいサービスを簡単に探索できる大きなファミリーの一員になれます。

既存のサインインシステムとの互換性 – WordPress.com Connect は単独で使用することも、既存の登録システムの補完的なサインインオプションとして使用することもできます。ユーザーが接続すると、そのプロフィール情報にアクセスでき、自分のアプリで活用できます。

信頼された関係 – ユーザーが WordPress.com で毎日使用しているのと同じ認証情報でサインインできるようにします。これにより、別のサービスのために新しいログイン情報を覚えたり管理したりする手間がなくなります。

さまざまなプログラミング言語での WordPress.com Connect の実践的な実装例については、wpcom-connect-examples リポジトリをご覧ください。このリポジトリには、さまざまな言語やフレームワークで「WordPress.com でログイン」機能を実装する方法を示すサンプルコードが含まれています。

OAuth2 実装の詳細

WordPress.com Connect は、標準の認可エンドポイントではなく、OAuth2 認証エンドポイント/oauth2/authenticate)を使用します。この専用エンドポイントは本人確認に最適化されており、トークンのスコープを基本的なプロフィールアクセスに自動的に制限します。

技術的なフロー

  1. ユーザー認可/oauth2/authenticate にリダイレクトします(/oauth2/authorize ではありません)
  2. コード交換/oauth2/token で認可コードを交換します(完全な OAuth2 と同じ)
  3. 制限付きアクセス:取得したトークンは /me/ エンドポイントへのアクセスのみを提供します
  4. プロフィールデータ/rest/v1.1/me からユーザーの身元情報を取得します

/oauth2/authenticate エンドポイントの詳細な技術情報については、OAuth2 ドキュメントの認証エンドポイントセクションをご覧ください。

前提条件

WordPress.com Connect を実装する前に、アプリケーションを登録する必要があります:

  1. WordPress.com アプリケーションを作成します:developer.wordpress.com/apps
  2. アプリケーションを設定します:ウェブサイトと同じタイトルを使用してください(ログインフォームに表示されます)
  3. 認証情報を取得します:CLIENT_IDCLIENT_SECRET が発行されます
  4. リダイレクト URI を設定します:認証後にユーザーが戻る先を設定してください

実装例(PHP)

WordPress.com Connect を使用してユーザー認証とプロフィール取得を実装する方法を示す完全な例を紹介します。

設定のセットアップ

まず、アプリケーションの認証情報を設定します。以下の値を WordPress.com アプリケーションから取得した値に置き換えてください:

<?php
// config.php - WordPress.com Connect Configuration
define('CLIENT_ID', 'your_client_id');
define('CLIENT_SECRET', 'your_client_secret');
define('REDIRECT_URI', 'https://yourapp.com/auth-callback');

// WordPress.com OAuth2 endpoints (no changes needed)
define('AUTHENTICATE_URL', 'https://public-api.wordpress.com/oauth2/authenticate');
define('TOKEN_URL', 'https://public-api.wordpress.com/oauth2/token');
define('USER_INFO_URL', 'https://public-api.wordpress.com/rest/v1.1/me');

session_start(); // Required for state parameter security
?>

完全な例:その他の言語での実装については、wpcom-connect-examples リポジトリをご覧ください。

ステップ1:認可 URL の作成

ユーザーを WordPress.com の認証画面にリダイレクトする「WordPress.com で接続」ボタンを生成します。これは(標準の認可エンドポイントではなく)認証エンドポイントを使用します。

セキュリティに関する注意state パラメータは CSRF 攻撃を防止するためのもので、ユーザーが戻ってきた際に必ず検証する必要があります。

<?php
require_once 'config.php';

// Generate secure state parameter for CSRF protection
if (!isset($_SESSION['wpcc_state'])) {
    $_SESSION['wpcc_state'] = bin2hex(random_bytes(16)); // More secure than md5(mt_rand())
}

// Build authentication URL using /oauth2/authenticate endpoint
$auth_url = AUTHENTICATE_URL . '?' . http_build_query([
    'response_type' => 'code',
    'client_id'     => CLIENT_ID,
    'redirect_uri'  => REDIRECT_URI,
    'state'         => $_SESSION['wpcc_state'],
    'scope'         => 'auth' // Limited scope for profile access only
]);

// Display the Connect button
echo '<a href="' . htmlspecialchars($auth_url) . '">';
echo '<img src="https://s0.wp.com/i/wpcc-button.png?m=1391188133i" width="231" alt="Connect with WordPress.com" />';
echo '</a>';
?>

これにより、おなじみの WordPress.com 接続ボタンが生成されます:

WordPress.com で接続ボタンを示す画像。

ステップ 2:認可レスポンスの処理

ユーザーが接続ボタンをクリックすると、WordPress.com の認可画面が表示されます:

WordPress のログインプロンプト。Test Company へのアクセスを承認するようユーザーに求め、閲覧される情報の詳細と、承認または拒否のオプションが表示されています。

承認後、WordPress.com はユーザーを認可コード付きで redirect_uri にリダイレクトします。コールバックハンドラーは state パラメーターを検証し、コードをアクセストークンと交換する必要があります:

<?php
// auth-callback.php - Handle the authorization response
require_once 'config.php';

// Validate authorization response
if (!isset($_GET['code'])) {
    die('Error: No authorization code received. User may have declined access.');
}

if (!isset($_GET['state']) || $_GET['state'] !== $_SESSION['wpcc_state']) {
    die('Error: State mismatch. Possible CSRF attack detected.');
}

// Exchange authorization code for access token
$curl = curl_init(TOKEN_URL);
curl_setopt_array($curl, [
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => [
        'client_id'     => CLIENT_ID,
        'client_secret' => CLIENT_SECRET,
        'code'          => $_GET['code'],
        'grant_type'    => 'authorization_code',
        'redirect_uri'  => REDIRECT_URI
    ],
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_SSL_VERIFYPEER => true
]);

$response = curl_exec($curl);
$http_code = curl_getinfo($curl, CURLINFO_HTTP_CODE);
curl_close($curl);

if ($http_code !== 200) {
    die('Error: Failed to obtain access token.');
}

$token_data = json_decode($response, true);
$access_token = $token_data['access_token'];

// Clean up session state
unset($_SESSION['wpcc_state']);
?>

トークンレスポンスの成功例

{
    "access_token": "your_access_token_here",
    "token_type": "bearer",
    "blog_id": 0,
    "blog_url": "https://public-api.wordpress.com",
    "scope": "auth"
}

scope: "auth" に注目してください。これは、トークンが本人確認のみに限定されたアクセス権を持つことを示しています。

ステップ 3:ユーザープロフィールの取得

アクセストークンを使用して、/me/ エンドポイントからユーザーのプロフィール情報を取得します:

<?php
// Fetch user profile using the access token
function get_user_profile($access_token) {
    $curl = curl_init(USER_INFO_URL);
    curl_setopt_array($curl, [
        CURLOPT_HTTPHEADER => [
            'Authorization: Bearer ' . $access_token
        ],
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_SSL_VERIFYPEER => true // Always verify SSL in production
    ]);

    $response = curl_exec($curl);
    $http_code = curl_getinfo($curl, CURLINFO_HTTP_CODE);
    curl_close($curl);

    if ($http_code !== 200) {
        throw new Exception('Failed to fetch user profile');
    }

    return json_decode($response, true);
}

// Get the user's WordPress.com profile
try {
    $user_profile = get_user_profile($access_token);

    // Store or process user information
    $user_id = $user_profile['ID'];
    $display_name = $user_profile['display_name'];
    $email = $user_profile['email'];
    $avatar_url = $user_profile['avatar_URL'];
    $is_verified = $user_profile['verified'];

} catch (Exception $e) {
    die('Error: ' . $e->getMessage());
}
?>

プロフィールレスポンスの形式

{
  "ID": 12345,
  "display_name": "Bob Smith",
  "username": "bobsmith",
  "email": "bob@example.com",
  "primary_blog": 67890,
  "avatar_URL": "https://gravatar.com/avatar/abc123?s=96",
  "profile_URL": "https://en.gravatar.com/bobsmith",
  "verified": true
}

ステップ4:ユーザー認証を完了する

ユーザープロフィールを取得したら、アプリケーションに統合します。

<?php
// Complete user authentication flow
if ($is_verified) {
    // User has verified their email - safe to trust profile data
    $existing_user = find_user_by_wpcom_id($user_id);

    if ($existing_user) {
        // Log in existing user
        login_user($existing_user);
        redirect_to_dashboard();
    } else {
        // Create new account with WordPress.com profile data
        $new_user = create_user([
            'wpcom_id' => $user_id,
            'username' => $user_profile['username'],
            'email' => $email,
            'display_name' => $display_name,
            'avatar_url' => $avatar_url
        ]);
        login_user($new_user);
        redirect_to_welcome();
    }
} else {
    // Unverified email - handle with caution
    redirect_to_verification_required();
}
?>

重要:プロフィール情報を信頼する前に、必ず verified フラグを確認してください。未認証のアカウントには信頼性の低いデータが含まれている可能性があります。

WordPress.com Connect と完全な OAuth2 の比較

それぞれのアプローチを使用するタイミングについて理解しましょう。

機能WordPress.com Connect完全な OAuth2
目的ユーザー認証と ID 確認完全な API アクセスとコンテンツ管理
エンドポイント/oauth2/authenticate/oauth2/authorize
トークンスコープauth/me/ に限定)カスタムスコープ(postsmedia など)
ユースケース「WordPress.com でログイン」WordPress.com サイト管理
データアクセスベーシックなプロフィールのみブログ投稿、メディア、コメントなど

重要:Connect 認証と完全な API アクセスの両方に同じ WordPress.com アプリケーションを使用しないでください。Connect トークンは /me/ エンドポイントに限定されており、ブログコンテンツや管理機能にはアクセスできません。

最終更新日: 6月 18, 2026