EC-CUBEとWordPressのログイン連携

2024.09.10.火

井上飛鳥

はじめに
- セキュリティに関する注意点
ログインチェック（WordPress）
ログインチェックAPI（EC-CUBE）
PHPでログインチェック（WordPress）
おわりに

はじめに

※本内容は案件対応の際、「UmiHa BLOG」様の記事を参考にしつつ、改変を加え、自分なりに実装を行ったコードを記載しています。貴重な情報を提供していただき、感謝申し上げます。

【ECCUBE4、WordPress連携】WordPress側でECCUBEのログイン状態を取得する方法

今回は、EC-CUBEとWordPressのログイン状態を連携させる方法について紹介します。
WordPressのサイト上で、EC-CUBEでログイン済みかどうかを確認し、ログイン済みの場合は、EC-CUBEから返却された顧客情報を利用してログイン済みの状態を表示させる方法です。

今回の方法では、便宜上jQuery を使用してAjaxリクエストを行い、EC-CUBEのログイン状態を確認します。

また、参考としてPHPを使用してバックエンド側からログイン状態を確認する方法も紹介します。

セキュリティに関する注意点

APIへのアクセスはHTTPSを使用して暗号化された通信を行うようにしてください。また、APIにアクセスする際には、必要に応じてAPIトークンや他の認証方式を導入することで、セキュリティを強化することを推奨します。

ログインチェック（WordPress）

$.ajax({
  url: "/eccube/mypage/login_check",
  type: "POST",
  dataType: "json",
  success: function(response) {
    if (response.customer) {
      console.log(`Logged in as: ${response.customer.name01} ${response.customer.name02}`);
    } else {
      console.log("Not logged in.");
    }
  },
  error: function() {
    console.error("Login check failed.");
  }
});

このコードは、jQueryを使用してEC-CUBEの/eccube/mypage/login_checkエンドポイントに対してAjaxリクエストを送信し、ユーザーがログインしているかどうかを確認し、必要に応じてAPIより返却された顧客情報を表示させます。

ログインチェックAPI（EC-CUBE）

次に、EC-CUBE側でログイン状態を返却するためのスクリプトを紹介します。このコードは、EC-CUBEにログインしているかどうかを確認し、ログインしている場合は顧客情報を返却します。

// eccube/app/Customize/Controller/Mypage/MypageController.php

/**
 * ログインチェック
 *
 * @Route("/mypage/login_check", name="login_check", methods={"POST"})
 */
public function loginCheck(Request $request)
{
    if (!$request->isXmlHttpRequest()) {
        throw new BadRequestHttpException();
    }

    // ユーザーがログインしている場合、顧客情報を返す
    if ($this->isGranted('ROLE_USER')) {
        $user = $this->getUser();
        $customer = [
            'name01' => $user->getName01(),
            'name02' => $user->getName02(),
            'email'  => $user->getEmail(),
        ];
        return $this->json(['customer' => $customer]);
    }

    // ログインしていない場合はnullを返す
    return $this->json(['customer' => null]);
}

PHPでログインチェック（WordPress）

参考として、Ajaxを使用せずに、WordPress側でPHPを使用してEC-CUBEのログイン状態をチェックする方法も紹介します。

// wordpress/wp-content/themes/your-template/functions.php

function verifyECCubeLogin() {
    // EC-CUBEのAPIエンドポイント
    $domain = ECLOGIN_CHECK_HOST;
    $url = $domain . '/eccube/mypage/api_login';

    // クッキーを取得
    $cookie = [];
    foreach ($_COOKIE as $key => $val) {
        if ($key === 'eccube') {
            $cookie[] = $key . '=' . $val . '; Secure; HttpOnly; SameSite=Strict';
        }
    }
    $cookie = implode(' ', $cookie);

    // EC-CUBEのクッキーが見つからない場合はfalseを返す
    if (strpos($cookie, 'eccube=') === false) {
        return false;
    }

    // APIリクエストのヘッダー設定
    $headers = [
        "Accept: application/json, text/javascript, */*; q=0.01",
        "X-Requested-With: XMLHttpRequest",
        "Cookie: " . $cookie,
    ];

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $result = curl_exec($ch);
    $errno = curl_errno($ch);
    curl_close($ch);

    if ($errno !== CURLE_OK) {
        return false;
    }

    $result_obj = json_decode($result);
    return $result_obj->done ? true : false;
}

<?php if(verifyECCubeLogin()):?> ログイン後の処理 <?php endif;?>

上記のようにWordPressのテンプレート上で使用できます。