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

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

Liferay DXP 2024.Q1+/ポータル GA112+

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

重要

チェックアウトステップクライアント拡張機能は、Liferay DXP 2024.Q1/Portal GA112 のリリース機能フラグの背後でリリースされました。 2024.Q2/Portal GA120 に一般公開 (GA) されました。

前提条件

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

サポートされているバージョンの Javaをインストールします。

注

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

サンプルワークスペースをダウンロードし、解凍します。

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 の静的リソースとして使用されます。スタンドアロンアプリケーション/マイクロサービスは、 bootJar コマンドを使用して作成されます。このコマンドは、 Spring Boot Gradle プラグインから入手できます。 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-oauth-application-user-agent
   order: true
   sennaDisabled: true
   showControls: true
   type: commerceCheckoutStep
   visible: true

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

liferay-sample-commerce-checkout-step-oauth-application-user-agent:
   .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-oauth-application-user-agent 定義にあります。 serviceAddress パラメータはサービスがローカルで実行される場所を定義し、 serviceScheme パラメータはプロトコルを定義します。 name フィールドは、OAuth アプリケーションユーザーエージェントの名前を定義します。 スコープ フィールドは、ヘッドレス API に付与されるアクセスを定義します。このセクションでは、Liferay を認可サーバーとして設定します。これにより、次にデプロイするチェックアウトステップで、リソースサーバーの安全なエンドポイントを呼び出してペイロードを送信できるようになります。この例では、ユーザーが入力した注文番号が、Liferayの API を通じて注文に追加されます。詳細については、 OAuth ユーザーエージェント YAML 構成リファレンスを参照してください。

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

サンプルワークスペースに移動します。
実行
```
./gradlew initBundle
```
これにより、ワークスペースの /bundles フォルダー内にバンドルがダウンロードされます。
/bundles/tomcat/bin フォルダに移動します。実行
```
./catalina run
```
サンプルワークスペースs /client-extensions/liferay-sample-commerce-checkout-step フォルダに戻ります。

実行

../../gradlew clean createClientExtensionConfig deploy

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-oauth-application-user-agent)][InterpolationConfigurationPlugin:135] Replaced value of configuration property 'homePageURL' for PID com.liferay.oauth2.provider.configuration.OAuth2ProviderApplicationUserAgentConfiguration~liferay-sample-commerce-checkout-step-oauth-application-user-agent
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-oauth-application-user-agent)][OAuth2ProviderApplicationUserAgentConfigurationFactory:170] OAuth 2 application with external reference code liferay-sample-commerce-checkout-step-oauth-application-user-agent and company ID 44408322414245 has client ID id-54a64b55-d854-5da6-9247-46f665d452dc

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

クライアント拡張機能をデプロイすると、Liferay サンプルコマースチェックアウトステップ OAuth アプリケーションユーザーエージェントが追加されます。

Liferay サンプルコマースチェックアウトステップ OAuth アプリケーションユーザーエージェントは、Liferay が保護されたエンドポイントを介して Spring Boot アプリケーションのデータにアクセスできるようにするために必要な OAuth 2 認証を提供します。この場合、Liferay がアプリケーションを承認するために必要なのは、 application-default.propertiesで外部参照コードを宣言することだけです。

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

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

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

チェックアウトステップの追加を確認する

管理者としてログインし、 グローバルメニュー () を開いて、 コントロールパネル → サイトに移動します。
新しい Minium サイトを追加します。
サイトを開き、アカウントセレクターを使用して新しいアカウントを作成します。
いくつかの商品をカートに追加します。
ミニカートを開き、 「送信」をクリックします。これによりチェックアウトフローが開始されます。
新しいステップに到達するまでチェックアウトを続けます。注文番号フィールドに番号を入力し、続行をクリックします。
注文を完了します。次に、 グローバルメニュー () を開き、 コマース → 注文に移動します。
発注した注文を見つけて、入力した注文番号が追加されていることを確認します。

コードを調べる

提供されているチェックアウトステップには、 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 ファイルには、チェックアウトウィジェットからチェックアウトステップコンテナーを取得し、その中に新しい子要素を追加するロジックが含まれています。子要素は、 テキスト型の値を受け入れる入力フィールドです。この値は、現在の注文の注文番号として追加されます。発注番号に対応する属性は ponです。

`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 形式の文字列としてデータが含まれます。 JSONObject() コンストラクターを使用して、関数パラメーターの値を JSON オブジェクトとして取得します。

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

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

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