Shopify 新規顧客アカウント用の IDP を使用した Hydrogen SSO

概要

miniOrangeは、 Shopifyの新規顧客アカウント向けに、IDプロバイダー（IdP）を利用したHydrogen SSOの実装を可能にする堅牢なソリューションを提供しています。Shopify SSOとIDプロバイダー（IdP）を統合することで、miniOrangeは顧客が複数のアプリケーションで単一の認証情報を使用できるようにし、ユーザーの利便性を大幅に向上させ、ログインプロセスを効率化します。このソリューションは、アカウントの作成とアクセスを簡素化するだけでなく、 IdPの高度な認証プロトコルを活用することでセキュリティも強化します。さらに、一元化されたアカウント管理システムを提供することで、管理者はユーザーのアクセス権限を効率的に管理できます。miniOrangeの専門知識を活用することで、企業は顧客にシームレスで安全かつ使いやすいエクスペリエンスを提供できます。

アプリケーションをインストールする 料金プラン

前提条件: アプリケーションのインストール

• あなたにログインする Shopify管理者.
• に行く アプリ → Shopifyアプリストア
• 検索する miniOrange シングルサインオン – SSO
• 詳しくはこちら インストールを開始する アプリをストアに追加する
• アプリを開く アプリ Hydrogen SSOの設定を開始する

ShopifyへのSSOのためにHydrogenをIDPとして設定する手順ガイド

ステップ1: Shopifyからサービスプロバイダーのメタデータを取得する

• あなたに行く 買い物をする & に移動 アプリ セクションをクリックして シングル サインオン - SSO ログイン アプリケーション。

• 以下を行うには、 IDプロバイダーの追加 ボタンをクリックして IDP を追加します。

• 選択 SAML プロトコル。

• ID プロバイダー (IDP) のリストから、選択します。 カスタムIDP.

• 以下を行うには、 メタデータの取得 サービスプロバイダー (Shopify) のメタデータを取得するためのボタン。

• に移動します SP が開始するメタデータ セクションを作成し、下にコピーします ACSのURL (NAIST) と エンティティ ID または発行者。

• これらの詳細は、ID プロバイダーの構成に役立ちます。

ステップ2: IDプロバイダー（IDP）を構成する

• Microsoft Entra ID、Auth0、Okta、Salesforce など、さまざまな ID プロバイダーを使用して、Shopify 新規顧客アカウントの Hydrogen SSO を構成できます。
• 優先IDPでShopifyをサービスプロバイダーとして設定するには、以下のステップバイステップガイドに従ってください。 こちら.

• に戻ります miniOrange シングル サインオン-SSO アプリケーションをクリックし、 IDプロバイダーの追加

• 選択 SAML プロトコル。

• ID プロバイダー (IDP) のリストから、選択します。 カスタムIDP.

• 以下を行うには、 IDPメタデータのインポート

• アップロード方法を選択します メタデータリンク。コピーした XML ファイルのリンクを貼り付けます。 ステップ 1 をクリックします インポート。

• 適切な IDP 名を追加し、 をクリックします。 保存します。

Shopify 側の設定が完了しました。

ステップ3: SSO構成の有効化とテスト

Shopifyストアタイプを選択:

• ノンプラスストア
• プラスストア

Plus以外のShopifyストアでのSSO設定

Shopify ストアで有効にしたアカウントの種類を選択します。

• お客様のアカウント
• レガシー顧客アカウント

• アプリケーションダッシュボードに移動し、 顧客アカウント拡張機能 下の図のようになります。

• 有効にします 新規顧客アカウント 拡張子をクリックして Save.

• アプリケーションのホームページに移動し、 IDPログイン切り替えオプション 設定した IDP に対して。

• アプリケーションダッシュボードに移動すると、アカウントページにログインボタン拡張機能を追加するための警告ボックスが表示されます。 ログインウィジェット拡張機能 有効にするには、下の画像に示すようにリンクをクリックします。

• アプリケーションのホームページに移動し、 IDPログイン切り替えオプション 設定した IDP に対して。

• 設定したい場合 複数のIDPを使用してShopifyにSSOするリストからIDPを選択してください こちら、その IDP を使用して SSO を設定します。
• 有効にします IDPログイン切り替えオプション 複数の IDP を使用して Shopify への SSO を有効にします。

Plus Shopify ストアでの SSO 設定

Shopify ストアで有効にしたアカウントの種類を選択します。

• お客様のアカウント
• レガシー顧客アカウント

• SSOアプリケーションに戻り、 ストアに接続 タブ。 をコピーします クライアント ID、クライアント シークレット、ログアウト後のリダイレクト URL (NAIST) と 検出エンドポイント URL 手元に置いてください。

• 以下を行うには、 お客様のアカウント 下の画像に示すようにリンクします。

• まず 顧客アカウント Shopifyが推奨するオプションを探します。 ID プロバイダー オプションが表示されない場合は、 shopifysupport@xecurify.com.

• アイデンティティプロバイダが存在する場合は、 管理 .

• ソフトウェアの制限をクリック プロバイダーに接続

• アイデンティティプロバイダ名を追加し、次のような詳細を入力します。 検出エンドポイント URL、クライアント ID、クライアント シークレット、追加スコープ、ログアウト後のリダイレクト URI パラメータ コピーしたもの 上記の. ステップ。クリック Save.

• アイデンティティプロバイダを追加したら、 試験用接続.

• フローを確認した後、アイデンティティプロバイダを次のようにします。 有効.

• アプリケーションのホームページに移動し、 IDPログイン切り替えオプション 設定した IDP に対して。

• 今、 セットアップガイド ボタンをクリックし、記載されている手順に従ってマルチパス トークンを取得します。

• 有効にします マルチパストークン オプション。こちらを参照してください よくある質問 Multipass トークンの値を取得し、下のフィールドに貼り付けます。

• ソフトウェアの制限をクリック Save.

• アプリケーションダッシュボードに移動すると、アカウントページにログインボタン拡張機能を追加するための警告ボックスが表示されます。 ログインウィジェット拡張機能 有効にするには、下の画像に示すようにリンクをクリックします。

• アプリケーションのホームページに移動し、 IDPログイン切り替えオプション 設定した IDP に対して。

• 設定したい場合 複数のIDPを使用してShopifyにSSOするリストからIDPを選択してください こちら、その IDP を使用して SSO を設定します。
• 有効にします IDPログイン切り替えオプション 複数の IDP を使用して Shopify への SSO を有効にします。

ステップ4: SSOのテスト

カスタム ID プロバイダーの資格情報を使用して Shopify への SSO をテストします。

• Hydrogen ストアフロントのログインに移動します。
• 以下を行うには、 サインイン

• 設定したIDプロバイダーのログインページにリダイレクトされます。IDPアカウントの認証情報でログインしてください。
• Hydrogen ストアに正常にログインしたことがわかります。