catch-img

【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資料のダウンロードをするボタン


目次[非表示]

  1. 1.Shopify標準のパスワードルール
  2. 2.カスタマイズ対象のパスワード登録/設定画面
  3. 3.パスワードバリデーションチェックのliquidカスタマイズ
  4. 4.最後に


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の記述のみで簡単に対応できる対策としては有効な方法になると思いますので紹介しました。

shopifyに関するお問い合わせをするボタン

shopify資料のダウンロードをするボタン

shopify構築サービスバナー



トランスコスモスShopifyエンジニア
トランスコスモスShopifyエンジニア
トランスコスモスは日本で7社しかない最上位の「Shopifyプラスパートナー」です。最上位認定を堅持しShopifyでのECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopifyアプリの解説・紹介、Shopifyの基本的な使い方など制作や開発の過程で得られた知見をご紹介します。

Shopify導入についてのサービス問い合わせ

Shopifyアプリ解説・紹介記事


【無料】セミナー動画視聴


EC関連サービス


トランスコスモスのEC全領域を網羅するサービス


従業員(メンバー)インタビュー


トランスコスモスの定量的な強み

お気軽に
お問い合わせください

Shopify(ショッピファイ)
ECストア構築・運用代行

トランスコスモスは日本最上位の「Shopifyプラスパートナー」企業です

 記事カテゴリー

ロジスティクスサービス

【週間ランキング】Shopify人気記事

ロジスティクス関連 新着記事

【初心者必見!】Shopifyマニュアル

 Tag(タグ)一覧

 【無料】募集中セミナー

正社員募集(求人)

 【無料】資料ダウンロード

Shopify認定パートナー企業

shopify plus partner
トランスコスモスは最上位の「Shopify Plus partner(ショッピファイプラスパートナー)」です。
Shopifyでのサイト制作ならお任せください!
ECソリューションをお届けするサービスサイト

トランスコスモス株式会社
CX事業統括
ECX本部

〒150-0011
東京都渋谷区東1-2-20
渋谷ファーストタワー
050-1751-7700(代表)

経済産業省が定める「DX認定事業者」
トランスコスモスは経済産業省が定める「DX認定事業者」
トランスプラス
トランスコスモスの全社的な情報を発信するオウンドメディア
cotra
コンタクト/コールセンターに携わる方への情報サイト
shopify構築・制作・運用