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

2020.10.20

ECオープンプラットフォームEC-CUBE

※この記事は上級者向きの記事です。
※この記事のカスタマイズはECCUBE4.0.2で実装確認したものです。

EC-CUBE4とWordpressが同ドメイン内、同サーバのとき、
Wordpress側でECCUBEのログイン状態をチェックしたい、
ここではECCUBE側でAPIにしてWordpressから呼び出す方法をご紹介。

POINTカスタマイズになるのでバックアップを取りながら進めましょう。

ECCUBE側にAPIを作成する
WordPress側からAPIを呼び出す
javascriptでHTMLを切り替える

ECCUBE側にAPIを作成する

ECCUBE側でAPIを設置します。
Controllerであればどこでもオッケーですが、私は以下のControllerへ設置しました。
本来であればカスタマイズなのでapp側へ設置したほうがよいかもしれませんが・・・
そのあたりはECCUBEの利用によって判断してください。

/src/Eccube/Controller/Mypage/MypageController.php

PHP

    /**
     * 外部からのログインチェック.
     *
     * @Route("/mypage/api_login", name="api_login", methods={"POST"})
     */
    public function apiLogin(Request $request)
    {
        if (!$request->isXmlHttpRequest()) {
            throw new BadRequestHttpException();
        }

        log_info('ログインチェック処理開始',[]);

        // ログインチェック
        if ($this->isGranted('ROLE_USER')) {
            $done = true;
        }else{
            $done = false;
        }

        log_info('ログインチェック処理完了',[]);

        return $this->json(['done' => $done ]);
    }

これでログイン状態をチェックして
ログインいる場合はtrue、ログインしていない場合はfalseを返します。
まるっとコピーで使えます。

WordPress側からAPIを呼び出す

WordPressではjavascriptからAPIを呼び出します。

このサンプルでは、ログイン時は”login_block”、
ログインしていない時は”nologin_block”を表示する仕様です。

今回、私はjavascriptを新しく作って
Wordoressのヘッダーで読み込む形を取りましたが
既存のjavascriptへ追記でもオッケーです。

javascript

    var path = '/ECCUBE'; // ECCUBE設置パス
    $('.login_block').hide();  // login_blockを非表示
    $('.nologin_block').hide();  // nologin_blockを非表示
    $.ajax({
        url: path+"/mypage/api_login", // apiパス
        type: 'post',
        dataType: 'json',
    }).done(function(data) {
        if (data.done) {
            // ログイン時の処理を記載
            $('.login_block').show();  // login_blockを表示
        }else{
            // 未ログイン時の処理を記載
            $('.nologin_block').show();  // nologin_blockを表示
        }
    }).fail(function(data) {
            // エラー発生：未ログイン時の処理を記載
            $('.nologin_block').show();  // nologin_blockを表示
    });

ECCUBE設置パスやAPIパス、
ログインのブロック名などはあなたの環境にあわせて置き換えてください。

また、上記サンプルではAPIエラー時はログインしていない状態と同じにします。
必要に合わせて処理を書き換えてください。

javascriptでHTMLを切り替える

切り替える処理としては上で紹介した通りですが、
たとえばHTMLはこんな感じです。
ログイン時に”login_block”を表示、
未ログイン時に”nologin_block”を表示するサンプルです。

HTML

<div class="login_block">
  <a href="/mypage">マイページへ</a>
  <a href="/logout">ログアウト</a>
</div>

<div class="nologin_block">
  <a href="/entry">会員登録へ</a>
  <a href="/login">ログイン</a>
</div>

Wordpress側でECCUBEのログイン状態を取得する方法のまとめ