ShopifyとAuth0を統合。安全な認証プロセスとセキュリティーを強化。導入手順も解説します！

2024/01/19by Ruka Okuyama

Auth0とは？

進化し続けるeコマースにおいて、シームレスで安全な認証プロセスは、顧客と企業の双方にとって極めて重要です。認証サービスをEコマースプラットフォームに統合することで、ユーザーエクスペリエンスを大幅に向上させ、セキュリティを強化することができます。人気のID管理プラットフォームであるAuth0は、主要なEコマースプラットフォームの1つであるShopifyとシームレスに統合することができます。この統合により、Auth0とShopify双方の強力な機能を活用しながら、強固な認証システムを提供することが可能になります。

ShopifyとAuth0を統合する理由

セキュリティの強化:

Auth0は、多要素認証、ソーシャルログイン、本人確認を含む、高度な認証・認可メカニズムを提供します。Auth0をShopifyと統合することで、ECストアにさらなるセキュリティレイヤーを追加し、機密性の高い顧客情報やトランザクションを保護することができます。

シングルサインオン(SSO):

Auth0はシングルサインオン機能を実現し、ユーザーは1つの認証情報で複数のアプリケーションにアクセスすることができます。Auth0をShopifyと統合することで、ユーザーは何度もログインすることなく、Eコマースプラットフォームと他のアプリケーションをシームレスに行き来することができ、ユーザーの利便性が向上します。

カスタマイズとブランディング:

Auth0は高度にカスタマイズ可能な認証体験を提供します。企業は自社ブランドの美学に合わせてログインや登録ページをカスタマイズすることができ、Shopifyとやり取りするユーザーに一貫性のあるブランド体験を提供することができます。

ユーザーマネージメント:

Auth0は、ユーザーデータの取り扱いプロセスを簡素化する一元的なユーザー管理システムを提供します。Auth0をShopifyと統合することで、企業は統一されたダッシュボードからユーザーアカウント、権限、プロフィールを効率的に管理し、管理業務を効率化することができます。

Auth0とshopifyの統合の要件と設定方法

セットアップの順番は以下となります：

1. Shopifyアカウントでマルチパスを有効にする。
2. Auth0アプリケーションを作成する
3. Auth0ルールを追加し、Multipassトークンを作成し、ユーザーをリダイレクトする。
4. Auth0リンクでShopifyテーマを更新する
6. 前提条件

始める前に、shopifyでauth0をセットアップするために必要なものは以下の通りです。まず、ShopifyはShopify plus storeが必要です。

Shopifyのパートナーであれば、開発ストアでの構築も可能です。

次に、Auth0のアカウントが必要です。Auth0の無料版には必要なものがすべて含まれていますが、そうでない場合でも、新規アカウントの場合は数週間、すべての有料機能が含まれています。

1. Shopifyアカウントでマルチパスを有効にする

マルチパスを有効にするには、Shopifyストアにログインし、設定ページを開き、チェックアウトウィンドウをクリックします。カスタマーアカウントが任意または必須に設定されていることを確認してください。

これは、Shopify がマルチパスが正当なものであることを確認するための重要なステップです。暗号化ルーチンは、Shopify が解読できる暗号を作成することができます。もしマルチパスキーが漏洩した疑いがある場合は、マルチパスを無効にし、再度有効にしてください。これにより新しいprivate keyが生成され、それを Auth0 にコピーする必要があります。

2. Auth0アプリケーションを作成する

Auth0ダッシュボードの "Applications "から "Create Application "をクリックし、"Shopify Store "のような名前を付けます。次に、通常のWebアプリケーションを選択します。

3. Auth0ルールを追加し、Multipassトークンを作成し、ユーザーをリダイレクトする。

Shopifyストアにユーザーを送るためのランディングポイントができたので、認証されたユーザーをShopifyストアに戻す必要があります。ここでMultipassの出番となる。

4. Auth0リンクでShopifyテーマを更新する

この例では、Auth0のログインリンクを追加します。Shopifyのログインプロセスを完全にAuth0に置き換えたい場合は、ユーザーにログインページを表示する代わりに、ユーザーを直接Auth0にリダイレクトすることができます。ただし、概念実証のため、ユーザーが手動でリンクをクリックする必要があります。

ログインページ内では、通常、テンプレートの下に customers/login.liquid ファイルがあります。リンクを追加する良い場所を見つけてください。以下のように、「アカウントを作成する」リンクの隣に配置してください。

<a href="{{ settings.auth0_login_url }}">Auth0でログイン</a>

また、customers/register.liquid テンプレートにある登録ページにリンクを設置することもできます。ShopifyのログインをAuth0に完全に置き換える場合、このページもユーザーを特定のリンクをクリックさせるのではなく、Auth0に直接リダイレクトさせるページになります。

次に、ログアウトリンクを Auth0 ログアウトに置き換えます。アカウントページには、customers/account.liquidにあるログアウトリンクがあります。もしテーマの別の場所にログアウトリンクを持っているなら、それも以下のように置き換える必要があります：

<a href=”{{ settings.auth0_logout_url }}”>{{ ‘layout.customer.log_out’ | t }}</a>

最後に、ユーザーがログインURLとログアウトURLを貼り付けられるように、テーマ設定を構成する必要があります。settings_schema.jsonファイルを開き、以下のスニペットを配列の最後に貼り付けます。これにより、管理者ユーザーはテーマテンプレートを直接変更することなく、URLの値をキー入力できるようになります。

登録ページにもリンクを設置することがお勧めです。これは customers/register.liquid テンプレートにあります。完全にShopifyのログインをAuth0で置き換えている場合は、ここでもユーザーを特定のリンクをクリックする必要なく、直接Auth0にリダイレクトさせる別のページになります。

次に、ログアウトリンクをAuth0のログアウトに置き換える必要があります。アカウントページにはログアウトリンクがあり、これは customers/account.liquid にあります。もしテーマに他の場所にもログアウトリンクがあれば、それも次のように置き換える必要があります：

<a href="{{ settings.auth0_logout_url }}">{{ 'layout.customer.log_out' | t }}</a>

最後に、テーマの設定を変更して、ユーザーがログインおよびログアウトのURLを貼り付けることができるようにする必要があります。

settings_schema.json ファイルを開き、以下のスニペットを配列の最後に貼り付けます。これにより、管理者ユーザーはテーマテンプレートを直接変更せずに、URLの値を入力できるようになります。

• auth0-instance: Auth0 インスタンスの URL。
• clientid: Auth0の値
• shopify-domain: ユーザーを送り返すドメイン。• コールバックURLに一致する必要があります。
• return-to-path: これはハードコードされた値（"account "のような）として設定するか、ページ上のJavaScriptで動的に置き換えることができます。カートページのログインを上書きしたい場合に便利です。

https://{auth0-instance}.auth0.com/authorize?response_type=code&client_id={clientid}&return_to=https://{shopify-domain}/{return-to-path}&scope=SCOPE&state=STATE

ログアウトURLは非常によく似ている：

• auth0-instance: Auth0 インスタンスの URL。
• clientid: Auth0の値
• shopify-domain: ユーザーを送り返したいドメイン。これは、最初に指定したAllowed Logout URLと一致する必要があります。

https://{auth0-instance}.auth0.com/v2/logout?response_type=code&client_id={clientid}&returnTo=https://{shopify-domain}/account/logout

これで、テーマページに戻り、カスタマイズボタンをクリックしてテーマ設定に切り替え、Auth0 Configセクションを展開し、上記のURLを貼り付けることができます。をクリックしてテーマ設定に切り替え、Auth0 Configセクションを展開し、上記のURLを貼り付けることができます。