【Shopify】liquidカスタマイズによるパスワードのバリデーションチェック

Shopifyの標準仕様は、「8文字以上」「特殊文字必須」など、会員パスワードのルール設定機能を提供していないため、セキュリティを強化するためには「Helium Customer Fields」のようなアプリを利用して、会員新規登録時に入力されるパスワードのバリデーションチェックを設定しています。しかし、「Helium Customer Fields」を利用するとしても、メール認証による会員登録設定時のパスワード設定画面やパスワードを忘れた際にパスワードをリセットする画面では、アプリの仕様上バリデーションチェックが設定できません。その結果、会員新規登録時には登録できなかった「12345」のようなパスワードが、パスワードのリセットではできてしまうことになります。そのため、アプリではパスワードのバリデーションチェックが設定できない画面のliquidをカスタマイズすることで、パスワードのバリデーションチェックを実現しセキュリティを強化する方法をご紹介します。それによって、ストア全体としてのパスワードルールが定まるようになります。

※本記事は、「Helium Customer Fields」のアプリでバリデーションチェックを実装している前提での内容となります。「Helium Customer Fields」でのパスワードバリデーションチェックの設定方法は下記ページをご覧ください。
https://transcosmos-ecx.jp/blog/shopify/97

Shopify標準のパスワードルール

Shopify標準のパスワードルールは「5文字以上」で、「数字/英字/特殊文字」の組み合わせ制限がありません。例えば、「12345」「abcde」なども入力が可能な仕様です。セキュリティをより強固にしたい場合に、これからご紹介する方法を試していただければと思います。

カスタマイズ対象のパスワード登録/設定画面

アプリ「Helium Customer Fields」を利用することで「会員新規登録画面」と「会員情報変更画面」に、パスワードのバリデーションチェックが設定可能です。しかし、上記以外にもパスワードの登録/設定が可能な以下のような画面が存在します。もちろん、該当画面のパスワードルールはShopify標準の「数字/英字/特殊文字の組み合わせ制限なしで、5文字以上」になります。
※「会員情報変更画面」は、アプリ「Helium Customer Fields」を利用して作成した画面です。

・Helium Customer Fields
https://apps.shopify.com/customr?locale=ja

①パスワードリセット画面
パスワードを忘れた場合に利用するメール経由で案内されるリンクから表示される画面です。

②パスワード設定/アカウント有効化画面
会員新規登録において、メールアドレスによる2段階認証を利用する場合、メール経由で案内されるリンクから表示される画面です。
※メールアドレスによる2段階認証はShopifyの標準機能ではなく、アプリ「Helium Customer Fields」の機能になります。

パスワードバリデーションチェックのliquidカスタマイズ

各画面のliquidにパスワードの正規表現を追加する方法は以下になります。
※liquidのファイル名やコードはテーマによって異なる場合があります。
※下記のサンプルコードは「半角英数字をそれぞれ1種類以上含む8文字以上100文字以下」をパスワードルールとしてliquidをカスタマイズしています。

①パスワードリセット画面

1）「customers/reset_password.liquid」に以下のコードを追加します。
⇒パスワードのinputタグid「ResetPassword」を指定したスクリプトを追加します。

<script>
$(function() {
  $('#btn_reset_password').on('click', function(e) {
    password = $('#ResetPassword').val();
    if (password.match(/^(?=.*?[a-z])(?=.*?\d)[a-z\d]{8,100}$/i)) {
      //alert('match');
    } else {
      alert('半角英数字をそれぞれ1種類以上含む8文字以上100文字以下に指定してください。');
      return false;
    }
  });
});
</script>

⇒追加したスクリプトで指定したボタンid「btn_reset_password」をボタンタグに付与

<button type="submit" class="btn btn--full" id="btn_reset_password">
  {{ 'customer.reset_password.submit' | t }}
</button>

2）ログイン画面から「パスワードを忘れた」機能を利用し、「パスワードリセット画面」のリンクをメールに転送します。

「半角英数字をそれぞれ1種類以上含む8文字以上100文字以下」のルールに適合していないパスワードを入力し、リセットボタンを押下した場合、ポップアップアラートが表示され、パスワードが登録できないことを確認します。

②パスワード設定/アカウント有効化画面

1）「customers/activate_account.liquid」に以下のコードを追加します。
⇒パスワードのinputタグid「CustomerPassword」を指定したスクリプトを追加します。

<script>
$(function() {
  $('#btn_activate_account').on('click', function(e) {
    password = $('#CustomerPassword').val();
    if (password.match(/^(?=.*?[a-z])(?=.*?\d)[a-z\d]{8,100}$/i)) {
      //alert('match');
    } else {
      alert('半角英数字をそれぞれ1種類以上含む8文字以上100文字以下に指定してください。');
      return false;
    }
  });
});
</script>

⇒追加したスクリプトで指定したボタンid「btn_activate_account」をボタンタグに付与

<button type="submit" class="btn" id="btn_activate_account">
  {{ 'customer.activate_account.submit' | t }}
</button>

2）会員新規登録画面からメールアドレスを登録し、「パスワード登録/アカウント有効化画面」のリンクをメールに転送します。

「半角英数字をそれぞれ1種類以上含む8文字以上100文字以下」のルールに適合していないパスワードを入力し、アカウント有効化ボタンを押下した場合、ポップアップアラートが表示され、パスワードが登録できないことを確認します。
※本機能の活性化はアプリ「Helium Customer Fields」を利用し、「メールアドレスによる2段階認証」機能を導入する必要があります。

最後に

会員の個人情報のみならず、エンドユーザの決済情報も扱っているECストアは、最も高い水準のセキュリティが求められています。その中でもエンドユーザのアカウントパスワードはセキュリティ強化の第一だと言えるほどです。「数字/英字/特殊文字」の組み合わせ制限なしの「5文字以上」というShopify標準ルールを補うためにアプリを導入したにもかかわらず、「パスワードリセット画面」と「メールアドレスによる2段階認証画面」では適用されないことは、ストア運用の観点からすると、ストアセキュリティの「穴」になります。アラートの出し方など、ストアのテーマに合わせたデザイン対応は工夫ポイントでありますが、liquidの記述のみで簡単に対応できる対策としては有効な方法になると思いますので紹介しました。