フィードバックを送信
Using Client Extensions
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、 こちら までご連絡ください。

チェックアウトステップクライアント拡張機能の使用

Liferay DXP 2024.Q1+/Portal GA112+

クライアント拡張機能を使用して、新しいチェックアウト手順を作成できます。このチュートリアルでは、サンプルワークスペースに含まれるクライアント拡張機能の例を使用します。これは、OAuth 2を使用して Liferay と通信するスタンドアロンのSpring Boot アプリケーションと、チェックアウト時にユーザーからの入力を受け付ける UI 要素で構成されています。ユーザーが入力した発注番号は、Spring Bootアプリケーションによって注文に追加され、関連するエンドポイントに値がパッチされます。

重要

チェックアウト手順クライアント拡張機能は、Liferay DXP 2024.Q1/Portal GA112 で リリース機能フラグ の背後でリリースされました。 2024年第2四半期/ポータルGA120で一般提供（GA）されました。

前提条件

クライアント拡張の開発を開始するには、

  1. サポートされているバージョンの Java をインストールしてください。

    注記

    推奨される JVM 設定については、 JVM 構成 を参照してください。

  2. サンプルワークスペースをダウンロードして解凍してください。

    curl -o com.liferay.sample.workspace-latest.zip https://repository.liferay.com/nexus/service/local/artifact/maven/content\?r\=liferay-public-releases\&g\=com.liferay.workspace\&a\=com.liferay.sample.workspace\&\v\=LATEST\&p\=zip

    unzip -d liferay-sample-workspace com.liferay.sample.workspace-latest.zip

これで、Liferay にクライアント拡張機能を起動してデプロイするためのツールが揃いました。

チェックアウトステップクライアント拡張機能を検証する

client-extensions/liferay-sample-commerce-checkout-step/client-extension.yaml ファイルは、サンプルワークスペースのチェックアウトステップクライアント拡張機能を定義します。 .yaml ファイルには、理解しておくべき重要なブロックが 3 つあります。

assemble:
    - from: assets
      into: static
    - fromTask: bootJar

assemble ブロックは、 assets/ フォルダー内のすべてを、ビルドされたクライアント拡張機能 .zip ファイルに静的リソースとして含めることを指定します。このクライアント拡張機能に含まれるJavaScriptコードは、Liferayにおいて静的リソースとして使用されます。スタンドアロンアプリケーション／マイクロサービスは、Spring Boot Gradleプラグインで利用可能なbootJarコマンドを使用して作成されます。 Liferay SaaSにデプロイするには、アプリケーションのJARファイルをLUFFAに含める必要があります。

liferay-sample-commerce-checkout-step:
   active: true
   checkoutStepLabel: liferay-sample-commerce-checkout-step-label
   checkoutStepName: liferay-sample-commerce-checkout-step-name
   checkoutStepOrder: 25
   name: Liferay Sample Commerce Checkout Step
   oAuth2ApplicationExternalReferenceCode: liferay-sample-commerce-checkout-step-oaua
   order: true
   sennaDisabled: true
   showControls: true
   type: commerceCheckoutStep
   visible: true

liferay-sample-commerce-checkout-step ブロックには、チェックアウト ステップ クライアント拡張機能に必要なキー構成が含まれています。各フィールドの詳細については、 チェックアウト ステップ クライアント拡張機能 YAML リファレンス を参照してください。

liferay-sample-commerce-checkout-step-oaua:
   .serviceAddress: localhost:58081
   .serviceScheme: http
   name: Liferay Sample Commerce Checkout Step OAuth Application User Agent
   scopes:
      - Liferay.Headless.Admin.Workflow.everything
   type: oAuthApplicationUserAgent

client-extension.yaml のもう 1 つの重要な部分は、 liferay-sample-commerce-checkout-step-oaua 定義にあります。 serviceAddress パラメータは、サービスがローカルで実行される場所を定義し、 serviceScheme パラメータはプロトコルを定義します。 name フィールドは、OAuth アプリケーションのユーザー エージェントの名前を定義します。スコープ フィールドは、ヘッドレス API に与えられるアクセスを定義します。このセクションでは、Liferayを認証サーバーとして設定します。これにより、次にデプロイするチェックアウト手順で、リソースサーバーのセキュアエンドポイントを呼び出し、ペイロードを送信できるようになります。この例では、ユーザーが入力した発注番号がLiferayのAPIを通じて注文に追加されます。詳細については、 OAuth ユーザーエージェント YAML 設定リファレンス を参照してください。

チェックアウトステップクライアント拡張機能をデプロイする

  1. サンプルワークスペースに移動してください。

  2. 走る

    ./gradlew initBundle

    これにより、ワークスペースの /bundles フォルダー内にバンドルがダウンロードされます。

  3. /bundles/tomcat/bin フォルダに移動します。走る

    ./catalina run

  4. サンプルワークスペースの /client-extensions/liferay-sample-commerce-checkout-step フォルダーに戻ります。

  5. 走る

    ../../gradlew clean createClientExtensionConfig deploy

  6. Liferayのログで、クライアント拡張機能がデプロイされ、起動したことを確認してください。

    2024-02-22 10:10:54.599 INFO  [com.liferay.portal.kernel.deploy.auto.AutoDeployScanner][AutoDeployDir:212] Processing liferay-sample-commerce-checkout-step.zip
2024-02-22 10:11:02.391 INFO  [fileinstall-directory-watcher][BundleStartStopLogger:68] STARTED liferaysamplecommercecheckoutstep_7.4.13 [1496]

    さらに、OAuthユーザーエージェントに関するメッセージもログに記録されます。

    2024-02-22 10:11:02.575 INFO  [CM Event Dispatcher (Fire ConfigurationEvent: pid=com.liferay.oauth2.provider.configuration.OAuth2ProviderApplicationUserAgentConfiguration~liferay-sample-commerce-checkout-step-oaua)][InterpolationConfigurationPlugin:135] Replaced value of configuration property 'homePageURL' for PID com.liferay.oauth2.provider.configuration.OAuth2ProviderApplicationUserAgentConfiguration~liferay-sample-commerce-checkout-step-oaua
2024-02-22 10:11:02.625 INFO  [CM Event Dispatcher (Fire ConfigurationEvent: pid=com.liferay.oauth2.provider.configuration.OAuth2ProviderApplicationUserAgentConfiguration~liferay-sample-commerce-checkout-step-oaua)][OAuth2ProviderApplicationUserAgentConfigurationFactory:170] OAuth 2 application with external reference code liferay-sample-commerce-checkout-step-oaua and company ID 44408322414245 has client ID id-54a64b55-d854-5da6-9247-46f665d452dc

  7. OAuthアプリケーションユーザーエージェントがLiferayに追加されていることを確認してください。コントロール パネル → OAuth2 管理 に移動します。

Liferay Sample Commerce Checkout Step OAuth Application User Agent は、クライアント拡張機能をデプロイする際に自動的に追加されます。

Liferay Sample Commerce Checkout Step OAuth Application User Agent は、Liferay が保護されたエンドポイントを介して Spring Boot アプリケーションのデータにアクセスするために必要な OAuth 2 認証 を提供します。この場合、Liferayがアプリケーションを認証するために必要なのは、 application-default.properties に外部参照コードを宣言することだけです。

liferay.oauth.application.external.reference.codes=liferay-sample-commerce-checkout-step-oaua

マイクロサービスを開始する

client-extensions/liferay-sample-commerce-checkout-step フォルダーから、以下を実行します。

../../gradlew bootRun

Spring Bootアプリケーションが起動し、ログにメッセージを出力します。

...
2024-02-22 10:17:13.165  INFO 4753 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 58081 (http) with context path ''
2024-02-22 10:17:13.172  INFO 4753 --- [           main] c.l.sample.SampleSpringBootApplication   : Started SampleSpringBootApplication in 2.999 seconds (JVM running for 3.267)
<==========---> 80% EXECUTING [1h 43m 56s]
> :client-extensions:liferay-sample-commerce-checkout-step:bootRun

チェックアウト手順の追加を確認する

  1. 管理者としてログインし、 グローバルメニュー (Applications Menu icon) を開き、 コントロールパネル → サイト に移動します。

  2. 新しいMiniumサイトを追加します。

  3. サイトを開き、アカウント選択機能を使って新しいアカウントを作成してください。

  4. カートに商品をいくつか追加してください。

  5. ミニカートを開いて、 送信 をクリックします。これでチェックアウトの流れが開始されます。

    チェックアウトの流れに新しいステップが追加されています。

  6. 次のステップに進むまで、チェックアウトを続けてください。発注番号フィールドに番号を入力し、 続行 をクリックします。

    新しいチェックアウト手順で、発注番号を入力してください。

  7. 注文を完了してください。次に、 グローバルメニュー (Applications Menu icon) を開き、 コマース → 注文 に移動します。

  8. ご注文内容を確認し、入力した発注番号が正しく追加されているかご確認ください。

    ユーザーが入力した値が注文に追加されます。

法典の検証

提供されているチェックアウト手順には、 assets/index.js で定義された入力フィールドが含まれており、購入注文番号のユーザー入力を受け付けます。また、ユーザーから購入注文番号を含むリクエストを送信し、現在の注文を更新する ActionRestController も備えています。

index.js を検査中

export default function CommerceCheckoutStep() {
   const commerceCheckoutStepContainer = document.getElementById(
      '_com_liferay_commerce_checkout_web_internal_portlet_CommerceCheckoutPortlet_commerceCheckoutStepContainer'
   );

   const newInput = document.createElement('input');

   const inputName =
      '_com_liferay_commerce_checkout_web_internal_portlet_CommerceCheckoutPortlet_pon';

   newInput.setAttribute('id', inputName);
   newInput.setAttribute('name', inputName);

   newInput.setAttribute('placeholder', 'Purchase order number');
   newInput.setAttribute('type', 'text');

   commerceCheckoutStepContainer.appendChild(newInput);
}

index.js ファイルには、チェックアウト ウィジェットからチェックアウト ステップ コンテナを取得し、その中に新しい子要素を追加するロジックが含まれています。子要素は、 テキスト 型の値を許容する入力フィールドです。この値は、現在の注文の注文番号として追加されます。発注番号に対応する属性は または です。

ActionRestController を調べています

@PostMapping
public ResponseEntity<String> post(
   @AuthenticationPrincipal Jwt jwt, @RequestBody String json) {

   JSONObject jsonObject = new JSONObject(json);

   return new ResponseEntity<>(
      WebClient.create(
         StringBundler.concat(
            lxcDXPServerProtocol, "://", lxcDXPMainDomain,
            "/o/headless-commerce-delivery-cart/v1.0/carts/",
            jsonObject.getLong("commerceOrderId"))
      ).patch(
      ).accept(
         MediaType.APPLICATION_JSON
      ).contentType(
         MediaType.APPLICATION_JSON
      ).bodyValue(
         new JSONObject(
         ).put(
            "purchaseOrderNumber", jsonObject.getString("pon")
         ).toString()
      ).header(
         HttpHeaders.AUTHORIZATION, "Bearer " + jwt.getTokenValue()
      ).retrieve(
      ).bodyToMono(
         String.class
      ).block(),
      HttpStatus.OK);
}

ActionRestController には、JSON Web Token (JWT) とリクエストボディの 2 つのパラメータを持つ単一の POST メソッドが含まれています。トークンはHTTP呼び出しを認証し、リクエストボディにはJSON形式の文字列としてデータが含まれます。関数パラメータの値を JSON オブジェクトとして取得するために、 JSONObject() コンストラクタを使用します。

リクエストボディをJSONオブジェクトとして取得した後、コードは非同期HTTP POSTリクエストを実行します。まず、サーバープロトコル、ベース URL、および注文を更新するための関連 URL を設定することにより、 WebClient を初期化および構成します。 JSONオブジェクトには、注文の更新に使用される注文IDが含まれています。

次に、WebClientの patch()メソッドを呼び出し、MediaTypeとcontentTypeの値をJSONに設定します。その後、JSON オブジェクトから発注番号フィールド (から) を取得し、リクエストボディ内に配置します。最後に、必要なヘッダーを設定し、リクエストを送信します。

Capability:
Commerce
Development and Tooling
Resource Type:
Official Documentation
Feature:
Client Extensions
Developer Tools
Java Development
Deployment Approach:
Liferay PaaS
Liferay SaaS
Liferay Self-Hosted