ShopifyでカスタムOAuthをIDプロバイダーとして使用して、カスタムOAuth SSOを設定する方法は？

Shopify シングルサインオン (SSO) ログイン アプリケーションは、OAuthプロトコルを使用して複数のIDプロバイダー（IdP）を使用してShopifyストアにログインできるようにします。Shopify OAuth 2.0 SSOは、ユーザープロファイル属性マッピング、ロールマッピングなどの高度なシングルサインオン（SSO）機能をサポートしています。Shopifyシングルサインオンアプリケーションで提供されるその他の機能の詳細については、 こちら.

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

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

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

ShopifyでカスタムOAuthをIDプロバイダーとして使用してカスタムOAuth SSOを設定するためのステップバイステップガイド

ステップ1: Shopify SSOアプリからコールバックURLを取得する

• Shopifyストアにアクセスし、 アプリ セクションとクリック シングル サインオン - SSO ログイン アプリケーション。

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

• 選択する OAuth 2.0 プロトコル。

• 今すぐ選択 カスタムIDP IDP のリストから。

• コピー OAuth コールバック URL 後の手順で使用するので、手元に置いておきます。

Shopify からコールバック URL (リダイレクト URI) を正常に取得しました。

ステップ2: OAuth IDPでShopifyをSPとして設定する

• 優先する OAuth サーバーの開発者コンソールに移動します。
• 新しいアプリケーションを作成します。アプリケーションの作成に必要な基本的な詳細を入力します。
• ここで、次の設定を行う必要があります。 コールバック/リダイレクト URL コピー元 ステップ 1
• OAuthサーバーに応じて適切なスコープを選択してください。OAuth IDPの設定時に、Shopify SSOアプリケーションでも同じスコープを設定する必要があります。
• 一度、必要な詳細をすべて入力します。 お願いします Save 構成。
• 構成を保存すると、IDP は次の情報を提供します。 クライアントIDとクライアントシークレット 最近設定したアプリケーションのものです。これらの詳細情報は、ShopifyシングルサインオンアプリケーションでOAuthサーバーを設定する際にも必要となります。

OAuth IDPでShopifyをSPとして設定しました

ステップ3: ShopifyでOAuth IDPを設定する

• に戻ります miniOrange シングル サインオン-SSO アプリケーション。

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

• 選択する OAuth 2.0 プロトコル。

• IDP のリストから、 カスタムIDP.

• 次に、次のような必要な詳細を入力します クライアント ID、クライアント シークレット、エンドポイント、およびスコープ.
• 値の設定については、以下の表を参照してください。

• ソフトウェアの制限をクリック 次へ.
• 当社は、AWS Cognito、Azure B2C、Salesforce、Google、Facebook、LinkedIn、Apple、Discord などのすべての標準 IDP をサポートしています。

これで、Shopify SSO アプリケーションへのカスタム OAuth IDP の設定が完了しました。

ステップ 4: 接続をテストする

• IDP設定を保存すると、 試験用接続 ステップ。属性をマッピングまたは取得する前にテスト接続を実行します。テスト接続により、IDP 構成が正しいことが確認されます。
• 以下を行うには、 試験用接続

• 「reCAPTCHAトークンが無効または見つかりません」というエラーが表示され、 「問題が発生しました」 メッセージについては、こちらを参照してください FAQ エラーを解決します。



• それ以外の場合は、前の手順で設定した IDP のログイン ページにリダイレクトされます。IDP アカウントの資格情報を使用してログインします。

• 以下を行うには、 属性のフェッチ IDP 属性を取得します。

ステップ 5: 属性マッピング

• 以下を行うには、 + 属性マッピング Shopify と IDP の間で属性をマッピングするボタン。

• 以下の表を参照して属性をマッピングします。

Shopifyの属性名	事前定義された属性のリストから属性を選択します
属性タイプ	IDP 属性
属性値	IDP からフェッチした属性値を選択します

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

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

Shopifyストアタイプを選択:

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

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

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

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

注意： あなたが パスワード保護されたストア または作業中 Shopify開発ストア、クリック こちら ストアフロントのダイジェスト Cookie を設定して、ストアで SSO が機能できるようにします。

• アプリケーションダッシュボードに移動し、 顧客アカウント拡張機能 下の画像の通りです。

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

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

SSOユーザーのみにチェックアウトを許可 - その他を制限

この機能により、シングルサインオン（SSO）でログインしたユーザーのみがチェックアウトプロセスを完了できるようになります。他のユーザーはチェックアウトを続行できなくなります。

• MFAデバイスに移動する 設定.



• Video Cloud Studioで 購入手続きへ進む のセクションから無料でダウンロードできます。



• 下にスクロールすると、 チェックアウトルール セクションをクリック ルールを追加する.



• ソフトウェアの制限をクリック SSOチェックアウト検証.



• を選択解除 「すべての顧客がチェックアウトを完了できるようにする」 オプションを選択し、クリックします Save.



• さて、次のことができます オンにする チェックアウトルール。



• SSO を実行せずにチェックアウトしようとすると、以下に示すようにエラーが表示されます。

Shopifyストアのシングルサインオン（SSO）をテストする

• Shopify ストアにアクセスします。(https:// ）
• 以下を行うには、 ユーザーログインアイコン.

• 前の手順で設定したアイデンティティプロバイダー（IDP）のログインページにリダイレクトされます。IDPアカウントの認証情報でログインしてください。
• 次に、登録したメールアドレスに送信される6桁のOTPを入力してください。（これは1回限りのプロセスです）

• Shopify ストアに正常にログインします。

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

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

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

Shopifyストアのシングルサインオン（SSO）をテストする

• Shopify ストアのログインページに移動します。(https:// /アカウント/ログイン)
• 以下を行うには、 ログインボタン 以前にカスタマイズしたものです。

• IDプロバイダー（IDP）のログインページにリダイレクトされます。既存のアカウントの認証情報でログインしてください。

• ログイン後、「reCAPTCHAトークンが無効または見つかりません」というエラーが表示され、「問題が発生しました」というメッセージが表示される場合は、こちらを参照してください。 FAQ エラーを解決します。

Plus Shopify ストアでの SSO 設定

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

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

• SSOアプリケーションに戻り、 ストアに接続 タブには何も表示されないことに注意してください。
• コピー 検出エンドポイント URL クライアントID、クライアントシークレット、追加スコープ and ログアウト後のリダイレクト URI パラメータ 手元に置いておけます。

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

• まず お客様のアカウント Shopifyが推奨するオプションを選択します。次に、 認証 オプションをクリックして 管理 .
• オプションが見つからない場合は、 shopifysupport@xecurify.com 支援のため。

• 以下を行うには、 プロバイダーの管理

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

• アイデンティティプロバイダ名を追加し、 プロバイダー のドロップダウンで、ANSYS Structures Desktopを選択します。 カスタムまたはその他の.

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

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

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

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

Shopifyストアのシングルサインオン（SSO）をテストする

• Shopify ストアにアクセスします。(https:// ）
• 以下を行うには、 ユーザーログインアイコン.

• 前の手順で設定したアイデンティティプロバイダー（IDP）のログインページにリダイレクトされます。IDPアカウントの認証情報でログインしてください。

• Shopify ストアに正常にログインします。

ユーザー名とパスワードを使用してログインする

B2BストアのIDPオプションによるログインに加えて、ユーザー名とパスワードを使用したログインも提供したい場合は、 こちらをクリックしてください。

メールOTPを使用したログインを提供する

B2BストアでIDPログインオプションに加えてメールOTPログインも提供したい場合は、 こちらをクリックしてください。

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

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

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

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

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

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

Shopifyストアのシングルサインオン（SSO）をテストする

• Shopify ストアのログインページに移動します。(https:// /アカウント/ログイン)
• 以下を行うには、 ログインボタン 以前にカスタマイズしたものです。

• IDプロバイダー（IDP）のログインページにリダイレクトされます。既存のアカウントの認証情報でログインしてください。

• 「reCAPTCHAトークンが無効または見つかりません」というエラーが発生し、「問題が発生しました」というメッセージが表示される場合は、こちらを参照してください。 FAQ エラーを解決します。

• Shopify ストアに正常にログインします。

ステップ 7: IDP 属性に基づいて SSO を制限する

• 特定のユーザー属性に基づいてアクセスを許可または拒否するルールを設定することで、Shopify ストアへのアクセスを制御できます。たとえば、特定のタグまたはドメインを持つユーザーに対して、特定のストア セクションへのアクセスを制限できます。
• MFAデバイスに移動する アプリ セクションを選択し、 miniOrange シングルサインオン – SSO アプリケーション。

• 以下を行うには、 追加の設定 オプションの下に さらなるアクション タブには何も表示されないことに注意してください。

• 有効にします IDP ユーザー プロファイル属性に基づいてストアへのアクセスを制限する の下の機能 ストアアクセス制限 タブには何も表示されないことに注意してください。

• 以下を行うには、 + 属性を追加 下の画像に示すように属性を追加します。

• IDP からの属性名がブロックされた属性値と一致する場合、ユーザーは Shopify ストアに SSO した後、ブロックされたページにリダイレクトされます。

• ソフトウェアの制限をクリック Save.
• 例： ブロックされた属性名が「domain」で、その値が「@gmail.com」の場合、@gmail ドメインを持つすべての顧客は、Shopify ストアへの SSO を実行した後、ブロックされたページにリダイレクトされます。

ステップ8: ログインしたユーザーのみにアクセスを許可する

• 「SSO で完全なストアを保護する」は、Shopify ストアへの排他的アクセスを許可し、ログインしたユーザーのみがアクセスできるようにします。ログインしていないユーザーが Shopify ストアの任意のページにアクセスしようとすると、パスワード ページにリダイレクトされます。
• 注意： 次の手順では、Shopify ストアでパスワード保護が有効になっていることを確認してください。
• Shopify SSOアプリでストア全体を構成するには、 storefront_digest クッキー.
• Shopify ストアに移動します。ページを右クリックして、「検査」オプションを選択します。

• 次に、に移動します 用途 セクションを選択し、 クッキー 左のメニューからオプションを選択してください。店舗を選択して検索してください storefront_digestこの Cookie に関連付けられている値をコピーします。

• MFAデバイスに移動する アプリ セクションを選択し、 miniOrange シングルサインオン – SSO アプリケーション。

• に行く グローバル構成 タブをクリックし、 ストアアクセス設定、有効にする 完全なストア保護 機能。 storefront_digest クッキー 値 ストアトークン 下の画像に示すように、フィールドに表示されます。

• ソフトウェアの制限をクリック Save.
• さあ、行きましょう https://<your-store-domain>/password をクリックします。入力したコードが正しければ、MFAの設定は正常に完了します パスワードを使用して入力 右上隅にあります。

• その後、をクリックします SSOログイン ウィジェットを使用してシングル サインオン プロセスを開始します。たとえば、次の画像に示すように、ウィジェットに「SSO でログイン」という名前を付けます。

したがって、正常に設定されました カスタムIDPとShopifyをサービスプロバイダーとして使用したShopify OAuth 2.0シングルサインオン（SSO）miniOrangeのシングルサインオン（SSO）ログインアプリケーションを使用します。このソリューションにより、SAML IDPログイン認証情報を使用して、Shopifyストアへの安全なアクセスを数分以内に展開できるようになります。