EC機能 API設定とSwagger UIを利用した動作確認の方法

本チュートリアルでは、ECサイト構築の際に必要になるAPIの設定とSwagger UIを使った注文手順の確認方法を記載します。
本手順ではEC機能 店舗情報の設定と商品登録の方法のチュートリアルの設定が既に行われている前提となります。

APIの作成

まずはEC用のAPIを作成します。
APIのページから[新しいAPIを作成する]をクリックします。 Image (fetched from Gyazo)

Title, Version, Descriptionを入力して[ADD]をクリックします。 今回は下記のように設定しました。

設定項目設定
TitleEC API
Version1
DescriptionEC

Image (fetched from Gyazo)

次にセキュリティの設定します。
先ほど作成したAPIのページから[セキュリティ]をクリックします。 Image (fetched from Gyazo)

セキュリティをDynamic TokenもしくはCookieに設定します。
今回はCookieに設定して進めて行くので、Cookieを選択し[Save]をクリックします。
Image (fetched from Gyazo)

参考:セキュリティ設定についてはAPI Securityを参照ください。

次にCORSの設定します。 先ほど作成したAPIのページから[CORSを設定する]をクリックします。 Image (fetched from Gyazo)

下記のように設定し、[Save]をクリックします。

設定項目設定
CORS_ALLOW_ORIGINS
  • 管理画面URL
  • フロントエンド ドメイン
  • ローカルドメイン(例:http://localhost:3000)
  • CORS_ALLOW_METHODS
  • GET
  • POST
  • Image (fetched from Gyazo)

    エンドポイントの作成

    次にエンドポイントの作成を行います。 APIのページから[Configure Endpoint]をクリックします。 Image (fetched from Gyazo)

    注文に必要なエンドポイントは下記になりますのでそれぞれ作成してください。

    ログイン用エンドポイント

    設定項目設定
    パスlogin
    有効/無効有効
    モデルカテゴリー認証
    モデルLogin
    オペレーションLogin_challenge

    Image (fetched from Gyazo)

    プロフィール情報取得用エンドポイント

    設定項目設定
    パスuser/profile
    有効/無効有効
    モデルカテゴリー認証
    モデルLogin
    オペレーションprofile

    Image (fetched from Gyazo)

    カートへの商品追加用エンドポイント

    設定項目設定
    パスec/cart/add
    有効/無効有効
    モデルカテゴリーEC
    モデルECCart
    オペレーションadd

    Image (fetched from Gyazo)

    商品処理用エンドポイント

    設定項目設定
    パスec/order/purchase
    有効/無効有効
    モデルカテゴリーEC
    モデルECOrder
    オペレーションpurchase

    Image (fetched from Gyazo)

    以上でエンドポイントの作成完了です。今回は下記4つのエンドポイントを作成しました。 Image (fetched from Gyazo)

    APIの動作確認

    エンドポイントの設定ができたら、対象のエンドポイントをSwaggerUIで動作させ、商品の購入ができることを確認していきます。

    ログイン

    今回のケースでは会員として登録済みのメンバーにログインをさせた状態での購入を想定していますので、SwaggerUI画面からログイン処理を行う必要があります。

    注文時に利用する為、メンバー編集の[プロフィール情報]ページでログインに使用するメンバーの住所登録は事前に行っておいてください。

    APIのページから[Swagger UI]をクリックしてSwagger UIのページに遷移します。 Image (fetched from Gyazo)

    loginのエンドポイントをクリックします。
    Image (fetched from Gyazo)

    [Try it out]をクリックします。 Image (fetched from Gyazo)

    Request bodyフィールドが表示されますので、下記のようにログイン情報を記載して、[Execute]をクリックします。

    Request body
    {
      "email": "YOUR_MAIL_ADDRESS@example.com",
      "password": "PASSWORD",
      "login_save": 0
    }
    

    YOUR_MAIL_ADDRESS@example.comPASSWORD にはご自身のメールアドレスとパスワードを入力ください。

    Image (fetched from Gyazo)

    ログインに成功すると、レスポンスコード:200でデータがレスポンスされます。 Image (fetched from Gyazo)

    補足)APIのセキュリティ設定をDynamic Tokenで利用する場合
    リクエストヘッダにトークンを付与する必要があるので、Swagger UIを利用して、APIのセキュリティを確認するで説明しているログインの方法を参照してください。

    カートIDの取得

    ログイン処理が完了したらカートIDを取得します。
    カートIDはログインユーザーの情報に紐づけされているため、profileのエンドポントから取得します。
    user/profileのエンドポイントをクリックします。 Image (fetched from Gyazo)

    [Try it out]をクリックします。 Image (fetched from Gyazo)

    [Execute]をクリックします。 Image (fetched from Gyazo)

    レスポンスコード:200でデータがレスポンスされますので、ec_cart_idの値をメモしておきます。 Image (fetched from Gyazo)

    このケースでは1306がカートIDとなります。

    カートに商品を追加する

    購入したい商品の商品IDを確認し、そのIDを指定して商品をカートに追加します。
    まずは商品設定のページを参考に購入したい商品のIDを確認します。 Image (fetched from Gyazo)

    このケースでは41211が商品IDとなります。

    Swagger UIのページに戻り、/ec/cart/addのエンドポイントをクリックします。 Image (fetched from Gyazo)

    [Try it out]をクリックします。 Image (fetched from Gyazo)

    Request bodyフィールドが表示されますので、下記のようにカートIDと、商品の情報を記載して、[Execute]をクリックします。

    設定が必要なパラメータは下記の通りです。

    • ec_cart_id: 事前に確認したカートID
    • product_id: 購入する商品ID
    • quantity: 購入個数

    今回は下記のように設定しました。

    設定項目設定
    ec_cart_id1306
    product_id41211
    quantity1
    Request body
    {
      "ec_cart_id": 1306,
      "item": {
        "product_id": 41211,
        "quantity": 1
      }
    }
    

    Image (fetched from Gyazo)

    商品の追加が完了すると、レスポンスコード:200でデータがレスポンスされ、messages"新規追加しました。"の表示がされます。 Image (fetched from Gyazo)

    カートの商品を購入する

    商品の購入時、支払方法を指定する必要があるので、支払方法設定のページで、支払い方法のIDを確認します。 Image (fetched from Gyazo) 今回は銀行振込のID58で購入します

    Swagger UIのページに戻り、/ec/order/purchaseのエンドポイントをクリックします。 Image (fetched from Gyazo)

    [Try it out]をクリックします。 Image (fetched from Gyazo)

    Request bodyフィールドが表示されますので、下記のようにカートIDと支払方法のIDを記載して、[Execute]をクリックします。

    設定が必要なパラメータは下記の通りです。

    今回は必須パラメータのみで進めます。他のパラメータは状況に応じて変更をしてください。
    ec_cart_id: 事前に確認したカートID
    ec_payment_id: 決済する支払い方法のID

    今回は下記のように設定しました。

    設定項目設定
    ec_cart_id1306
    ec_payment_id58
    Request body
    {
      "ec_cart_id": 1306,
      "ec_payment_id": 58
    }
    

    Image (fetched from Gyazo)

    商品の購入が完了すると、レスポンスコード:200でデータがレスポンスされ、messages"注文が完了しました。"idsに注文IDが返却されます。
    また、購入者のメールアドレス宛に「ご購入完了のお知らせ」のメールが届きます。
    注文はカートの状態により配送単位で複数に分かれることもあります。 Image (fetched from Gyazo)

    注文情報の確認

    先ほどSwagger UIを利用して購入した注文は注文一覧から確認できます。 Image (fetched from Gyazo)

    以上でECサイト構築の際に必要になるAPIの設定とSwagger UIを使った注文手順の確認方法の説明を終了します。

    お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。