Shopify ストアへの Google ログインのセットアップ – Shopify Google ソーシャル ログイン

前提条件：

Google ソーシャルの設定を始める前に Shopify ストアにログインしてください。 miniOrange ソーシャル ログイン アプリをインストールしました。

ソーシャルログイン

ユーザーが Google 認証情報を使用してストアにソーシャル ログインできるようにします

アプリケーションを追加

Shopify ストアで Google ログインを有効にするためのステップバイステップ ガイド

1. Google ログイン用のカスタム アプリを構成する

• Video Cloud Studioで Google 開発者コンソール、 Google 開発者アカウントでサインアップまたはログインします。
• Google Developers Console で、 プロジェクトを選択します。

• セットアップボタンをクリックすると、セットアップが開始されます 新規プロジェクト 新しい Google Apps プロジェクトを作成します。

• 入力します プロジェクト名 (例: TestApp) および ロケーション、 をクリックします。 作成します。

• 画像に示すように、ドロップダウンでプロジェクトが選択されていることを確認します。 そうでない場合は、ドロップダウン メニューを開いてプロジェクトを表示します。 先ほど作成したもの (この場合は「TestApp」) を選択します。

• に移動します OAuth同意画面 サイドバーに。

• 必ず選択してください 外部 ユーザータイプ >> 作成します。

• アプリケーションを入力して画面を構成します 名前 それはあなたが好むものなら何でも構いません、 たとえば、それを「SocialLogin」と呼ぶとしましょう。 を入力 ユーザーサポートメール。

• 承認済みドメインに挿入します ミニオレンジ.com。 記入してください 開発者の連絡先情報。 次にクリック 保存して続行。

• に進む Credentials サイドバーにある

• ソフトウェアの制限をクリック 認証情報を作成し、 そして選択します OAuthクライアントID。

• 選択 ウェブアプリケーション として アプリケーションタイプ

• の名前をカスタマイズできます。 ウェブクライアント。 承認されたリダイレクト URI を追加する

• 作成セッションプロセスで 承認されたリダイレクトURI 〜へ https://shop.miniorange.com/social-login/openidcallback/google. ソフトウェアの制限をクリック 創造する

• 生成されたものをコピーします 顧客ID & クライアントシークレット以降のステップで使用されます。

• これで、Google ログイン用のカスタム アプリが正常に構成されました。

2. miniOrange ソーシャル ログイン アプリケーションを構成する

• Shopify ストアにアクセスします アプリ セクションを選択し、 miniOrange ソーシャル ログイン アプリケーション。

• にリダイレクトされます。 ソーシャル ログイン アプリケーションのダッシュボード。 選択 グーグル。

• 先ほどコピーしたものを貼り付けます 顧客ID & クライアントシークレット 表に記載されているとおりです。
  

  アプリケーションID	顧客ID
  アプリシークレット	クライアントシークレット
  対象領域	メールアドレス+プロフィール


• セットアップボタンをクリックすると、セットアップが開始されます Save 認証情報を保存します。
• これで、miniOrange Social Login アプリケーション側も正常に構成されました。

3. 構成をテストする

• クリック 構成のテスト ソーシャルログインダッシュボード セットアップを検証します。

• 以下の画像に示すように、ウィンドウがポップアップ表示されます。

• に行く ソーシャルログインダッシュボード、 そして有効にする Google を切り替えて Google ソーシャルを表示します ログインページのログインボタン。

• あなたに行く Shopifyストア >> オンラインストア >> テーマ ソフトウェアの制限をクリック カスタマイズ 画像の通り。

• に行きます アプリの埋め込み セクションを作成し、 mOソーシャルログイン ウィジェット On

• ログイン ページに Google ソーシャル ログイン ボタンが表示されていることがわかります。

Google ソーシャル ログインのセットアップが完了しました。

miniOrange ソーシャル ログイン アプリケーションによって提供されるその他のカスタマイズ

エラーや問い合わせがある場合は、 こちら 他の人を見るために。