Facebook を IDP (OAuth) として使用して Shopify でシングル サインオン (SSO) を設定する方法を教えてください。
概要
miniOrangeはFacebookがアイデンティティプロバイダ（IdP）として機能することを可能にし、ユーザーは Facebook の認証情報を使用して Shopify にシングル サインオン (SSO) するこの統合により、顧客に ソーシャルログインオプション これにより、摩擦が軽減され、ユーザー エクスペリエンスが向上します。
このソリューションは両方をサポートします 新しいShopify顧客アカウントとクラシック/レガシーアカウント、 で動作します Shopify Plusと非Plusストア, 最適です D2Cブランド, コミュニティ主導の店舗、B2Bポータル 複数のログインオプションを提供したい場合、 Facebook Shopify SSO、セキュリティを維持しながら、コンバージョンを増やし、認証を合理化し、顧客エンゲージメントを向上させることができます。
前提条件: ダウンロードとインストール
設定する Facebook を IDP として使用して Shopify ストアに SSO する (OAuth)、追加する必要があります Shopify シングルサインオン (SSO) ストアにアプリケーションをインストールします。
ご確認ください＞ ビデオShopify SSO アプリケーションが Shopify でどのように機能するかについて詳しくは、こちらをご覧ください。
構成手順
ステップ1: ShopifyからコールバックURL（リダイレクトURI）を取得する
- Shopifyストアにアクセスし、 アプリ セクションとクリック シングル サインオン - SSO ログイン アプリケーション。
- 以下を行うには、 IDプロバイダーの追加 ボタンをクリックして IDP を追加します。
- 選択する OAuth 2.0 プロトコル。
- 今すぐ選択 Facebook IDP のリストから。
- コピー OAuth コールバック URL 後の手順で使用するので、手元に置いておきます。
Shopify からコールバック URL (リダイレクト URI) を正常に取得しました。
ステップ 2: Facebook を OAuth プロバイダーとして設定する
- 開始するには、Facebook 開発者コンソールに移動して、 こちら Facebook 開発者アカウントでサインアップ/ログインします。
- Facebook 開発者アプリのページに移動し、 アプリを作成する 新しいアプリを追加するボタン。
- それからを選択してください Facebook アカウントでのログインを許可する オプションをユースケースとして選択し、クリックします 次へ.
- 入力する アプリ名 および 連絡先メールアドレスを追加 それぞれのFacebookアプリをクリックして アプリを作成する ボタンをクリックして設定を保存します。
- に行く アプリ設定 -> 基本 アプリ ID とアプリ シークレットを表示します。 の アプリケーションID あなたです 顧客ID と アプリシークレット あなたです クライアントシークレットこれらの値は、後で Shopify シングル サインオン SSO アプリケーションを構成するときに必要になるため、手元に保管しておいてください (下の画像を参照)。
- アプリドメイン: そこにウェブサイトのドメインを書き込みます。
- プライバシーポリシーのURL: このボックスに、Web サイトのプライバシー ポリシー ページの URL を入力します。
- 利用規約： このボックスに、Web サイトの利用規約ページにリンクされた URL を入力します。
- ユーザーデータの削除: ドロップダウンから、「データ削除手順の URL」を選択します (ユーザーがサイト上のアカウントを削除する方法を説明するページの URL を入力します)。
- 選択する カテゴリー カテゴリフィールドのドロップダウンから アプリの目的 アプリを最もよく説明するオプションを選択して、 を押します 変更を保存 構成を保存します。
- 下にスクロールしてクリックします プラットフォームの追加 ボタン。 を選択 ウェブサイト Facebookログインをウェブサイトに統合しようとしている場合は、オプションを選択してください。 次へ.
- 次に、あなたの Shopify ストアの URL (store.xecurify.com)をクリックして Save。 次に、をクリックします。 続ける.
- 以下を行うには、 ユースケース 左側のタブをクリックし、 カスタマイズ の横に表示されるボタン 認証とアカウントの作成 項目。
- 以下 権限 セクション、 メール 許可してクリックしてください 追加
- デフォルトでは、あなたのアプリケーションには「public_profile」と「email」の権限の標準アクセスしかなく、つまり、あなただけがそれを使ってログインできるということです。高度なアクセスを取得するには、ビジネス認証を受ける必要があります。これは、 Verification 左側のタブ。
- 下 Facebookログイン >> 設定 セクションの「移動」をクリック 設定 追加するボタン リダイレクト/コールバック URL (ステップ 1 から).
- 〜に 有効な OAuth リダイレクト URI フィールドに追加 リダイレクト/コールバック URL Shopifyシングルサインオン（SSO）アプリケーションから取得します。 変更を保存します
- 現在、アプリは開発モードになっています。これは、社外の人がアプリを使用できないことを意味します。 認証が完了したら、 稼働する タブを開き、右下にある「公開」ボタンをクリックしてアプリを公開します。公開する前に、「公開」ページに記載されている手順を確認し、すべてが正しく設定されていることを確認することをお勧めします。
Shopify を Facebook アプリケーションにサービス プロバイダーとして正常に設定しました。
ステップ3: ShopifyでFacebookをIDPとして設定する
- に戻ります miniOrange シングル サインオン-SSO アプリケーション。
- 以下を行うには、 IDプロバイダーの追加 ボタンをクリックして IDP を追加します。
- 選択する OAuth 2.0 プロトコル。
- IDP のリストから、 Facebook.
- 次に、次のような必要な詳細を入力します クライアント ID、クライアント シークレット、エンドポイント、およびスコープ.
- 値の設定については、以下の表を参照してください。
- 注意： Cognitoドメインは以下から見つけることができます ステップ 2.
| IDP表示名: | [任意のアプリ名を入力してください] |
| クライアントID： | ステップ 2 |
| クライアントシークレット： | ステップ 2 |
| エンドポイントを承認します: | https://www.facebook.com/dialog/oauth |
| アクセストークンエンドポイント: | https://graph.facebook.com/v2.8/oauth/access_token |
| ユーザー情報の取得エンドポイント: | https://graph.facebook.com/me/?fields=id,name,email,age_range,first_name,gender,last_name,link |
| 範囲： | public_profile メール（表示されているとおりにこのテキストを入力してください） |
- 今、あなたはクリックすることができます Save.
ステップ 4: 接続をテストする
-
IDP設定を保存すると、
試験用接続 ステップ。
属性をマッピングまたはフェッチする前にテスト接続を実行してください。テスト接続により、IDP 構成が正しいことが確認されます。 - 以下を行うには、 試験用接続
- 有効な Facebook 認証情報を入力すると、下の画面に示すようなポップアップ ウィンドウが表示されます。
- 以下を行うには、 属性のフェッチ IDP 属性を取得するためのボタン。
ステップ 5: 属性マッピング
- 以下を行うには、 + 属性マッピング Shopify と AWS Cognito の間で属性をマッピングするボタン。
- 以下の表を参照して属性をマッピングします。
| Shopifyの属性名 | IDPから受信した属性値を同期するShopify顧客属性キーを選択します。 |
| 属性タイプ | IDP 属性 |
| 属性値 | IDPから取得し、Shopifyで同期したい属性キーを選択します。 |
- ソフトウェアの制限をクリック 次へ。
ステップ6: SSO構成の有効化とテスト
Shopifyストアタイプを選択:
- ノンプラスストア
- プラスストア
このガイドでは、 Facebook シングル サインオン (SSO) 設定することで アイデンティティプロバイダー（IdP）としてのFacebook および サービスプロバイダー（SP）としてのShopify miniOrange Shopifyシングルサインオン（SSO）ログインアプリこの設定により、ユーザーは Facebook の認証情報を使用して Shopify にシングル サインオン (SSO) する、を提供します シームレスでソーシャル、そして安全な認証体験 これにより、顧客エンゲージメントが向上し、ログインの障壁が軽減されます。
サポートされている統合と機能
その他の機能➔よくある質問（FAQ）
その他のよくある質問➔
手順に従って IDP を設定しましたが、SSO はどこで確認できますか?
説明されている手順に従ってください こちら 優先 IDP を使用して Shopify で SSO を設定します。
Shopify SSO アプリケーションをインストールしました。 「SETUP IDP」オプションをクリックしましたが、何も開きませんでした。
他のサイトへのリダイレクトはブラウザーでブロックされる可能性があります。指定された手順に従ってください こちら 問題を解決する。
SSO を実行した後、顧客がコレクションまたは割引オファーのページにリダイレクトされるようにしたいと考えています。
説明されている手順に従ってください こちら 顧客をコレクション/カートまたはその他のページにリダイレクトします。
Shopify ストアで SSO アプリケーションの IDP への自動リダイレクト機能を有効にするにはどうすればよいですか?
IDPへの自動リダイレクト機能を有効にするには、SSOアプリケーションのエンタープライズプランにアップグレードする必要があります。以下の手順に従ってください。 こちら この機能を有効にします。
追加のリソース
Get in Touch
までご連絡ください shopifysupport@xecurify.com、弊社のチームが Shopify SSO アプリケーションの設定をお手伝いします。弊社のチームは、お客様の要件に応じて最適なソリューション/プランの選択をお手伝いします。
