チュートリアル: サインアップ・フォームのフィールドへの妥当性検査の追加

開発者ポータル・ユーザーを支援するために、フィールドにさらに検証を追加することもできます。例えば、ユーザーがポータルでアカウントを登録するときに、部門名、従業員 ID、または同様のデータを妥当性検査できます。

開始前に

このチュートリアルを完了するには、開発者ポータルを有効にして、管理者権限を持っている必要があります。サインアップ・フォームへのフィールドの追加に関するチュートリアルを完了しておく必要があります。ここで、「部門コード」フィールドをサインアップ・フォームに追加しました。

このチュートリアルについて

このチュートリアルでは、サインアップ・フォームの「部門コード」フィールドに妥当性検査を追加します。これは、すべてのポータル・ユーザーにとって必須フィールドであり、DEPnnn のフォーマットのストリングです。ここで、DEP はストリング接頭部で、nnn は 3 桁の番号です。例えば、DEP123 となります。検証は、 IBM APIC Portal-アドオンで既に使用可能なカスタム・モジュールを使用して行われます。ただし、詳しくは、「カスタム・モジュール開発: モジュール・スケルトンの作成」を参照してください。

このチュートリアルでは、以下の手順を実行します。

検証モジュールの複製とパッケージ化。
検証モジュールのインストールおよび使用可能化。
サインアップ・フォームでの検証のテスト。

このリンク IBM APIC Portal - addons で使用するファイルを見てください。

user_field_example.info.yml - これは、名前やバージョンなどの情報を定義し、Drupal がモジュールをインポートして使用可能にするために必要なその他の重要情報を含む、モジュールのメタデータです。

name: 'IBM APIC Portal - user field example'
type: module
description: 'IBM API Connect Developer Portal tutorial - Example of validating a custom user field'
package: 'Custom'
core_version_requirement: ^8 || ^9 || ^10 || ^11
version: 1.0.0
project: 'user_field_example'
dependencies:
  - ibm_apim
  - auth_apic

user_field_example.module - これは、妥当性検査関数を含んでおり、この関数を hook_form_alter 関数を使用してサインアップ・フォームに追加します。

<?php
use Drupal\Core\Form\FormStateInterface;

/**
 * Implementation of hook_form_alter() to alter the Sign up form
 */
function user_field_example_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  if ($form_id === 'user_register_form' ) {
      $form['#validate'][] = 'user_field_example_validate_department_code';
  }
}

/**
 * Validate the Department code field on the Sign up form.
 *
 * Valid entry = DEPnnn
 *   where n = single figure digit.
 */
function user_field_example_validate_department_code($form, &$form_state) {
  $dept_code = $form_state->getValue('field_department_code')[0]['value'];
  $valid = preg_match('/^DEP\d{3}$/', $dept_code);
  if (!$valid) {
    $form_state->setErrorByName('field_department_code', t('Invalid department code.'));
  }
}

妥当性検査モジュールの複製およびパッケージ化

カスタム・モジュールを使用して、サインアップ・フォームの Department code フィールドに検証が追加されます。

カスタム・モジュールを複製します。以下に、Mac および Linux を使用している場合のコマンド例を示します。
```
git clone https://github.com/ibm-apiconnect/devportal-addons
```

カスタム・モジュールをパッケージ化します。

cd devportal-addons/apic_v10/modules
tar -czf user_field_example.tgz user_field_example/

妥当性検査モジュールのインストールおよび使用可能化

開発者ポータルに管理者としてログインします。
Extend > Extend をクリックします。
新しいモジュールを追加]をクリックします。
Upload a module or theme archiveセクションで、Browse fileをクリックします。
この前に作成済みのパッケージ化されたカスタム・モジュールである user_field_example.tgz を参照して選択します。「開く」をクリックします。
「続行」をクリックしてください。
「新規追加されたモジュールを使用可能にする」リンクをクリックします。
フィルターボックスに IBM APIC Portal - user field example 。
IBM APIC Portal - user field exampleチェックボックスを選択する。
Enableをクリックする。

これで、モジュールがインストールされて使用可能になりました。

サインアップ・フォームでの妥当性検査のテスト

管理ユーザーとしてサインアウトします。
新しいアカウントを作成する」をクリックします。
すべてのフィールドに必要な詳細を入力し、「Department code」を「ABC123」に設定する。
サインアップをクリックしてください。
Department code フィールドで障害メッセージと強調表示を確認します。
Department code フィールドを DEP245に変更し、パスワードを再入力して Sign up をクリックし、有効なコードが受け入れられることを確認します。

このチュートリアルで実行したこと

サインアップ・フォームの「部門コード」フィールドに何らかの検証を追加し、そのフォームをテストして、 Department code フィールドが DEPnnnの形式のコードのみを受け入れることを確認しました。

実際には、すべてのサイトで使用可能になるような方法でこの構成を追加する必要があります。すべてのサイトで使用できるようにするには、構成をカスタム・モジュールに組み込みます。詳しくは、 Drupal カスタム・モジュールを参照してください。