ShopifyでGoogleログインを設定する方法｜Google Cloudでの準備と手順

結論: Shopifyのお客様アカウントにGoogleログインを追加するには、管理画面の「設定」→「お客様アカウント」からGoogleとの接続を開始し、Google Cloud Consoleでアプリを作成してOAuthクライアントを設定したうえで、発行されたクライアントIDとクライアントシークレットを管理画面に登録します。Google Cloud Console側でアプリを公開すると、お客様がGoogleアカウントでサインインできるようになります。

この手順を終えると、ストアのサインイン画面に、Googleでサインインするための選択肢が追加されます。Googleログインと会員登録フォームを併用する設定は、Shop・Google・Facebookログインと会員登録フォームを併用する設定で説明しています。

Googleログインを設定する前に確認することはありますか？

Googleをお客様アカウントに接続するには、Google Cloud開発者アカウントが必要です。設定はGoogle Cloud ConsoleとShopify管理画面のタブを切り替えながら進めるため、両方の画面を開いておきます。

Google Cloudの使い方は、Googleのヘルプドキュメントで確認できます。

出典: Shopifyヘルプ「Googleをお客様アカウントに接続する」

Googleログインの設定はどこから始めますか？

管理画面の「設定」→「お客様アカウント」に進み、「認証」セクションの「管理」をクリックします。Googleの横にある「接続」をクリックすると、「Googleでサインイン」ページが開きます。

このページには、Google Cloud Console側の設定で貼り付ける値が表示されるため、別のタブで開いたままにしておきます。

出典: Shopifyヘルプ「Googleをお客様アカウントに接続する」

Google Cloud Consoleでアプリを作成し、同意画面を設定するにはどうしますか？

別のタブでGoogle Cloud Consoleにサインインし、既存のプロジェクトを選ぶか新しいプロジェクトを作成します。「APIとサービス」の「認証情報」に進み、「同意画面を構成」の「開始」をクリックします。

オンラインストアの名前など、お客様が認識できるアプリ名と、テクニカルサポート用のメールアドレスを入力し、「オーディエンス」セクションで「外部」を選んで進みます。Googleからの連絡先メールアドレスを入力し、Google APIサービスのユーザーデータポリシーに同意して「続行」をクリックし、「作成」をクリックします。同意画面は、お客様がGoogleアカウントでの連携を許可する際に表示する画面で、入力したアプリ名やサポート窓口の情報は、この同意画面でお客様に表示されます。最後に「ブランディング」をクリックし、ホームページ・プライバシーポリシー・利用規約へのリンクを「アプリドメイン」セクションに入れます。

出典: Shopifyヘルプ「Googleをお客様アカウントに接続する」

Google Cloud ConsoleでOAuthクライアントはどう作成しますか？

プロジェクトのアプリで「概要」をクリックし、「指標」セクションの「OAuthクライアントを作成」をクリックします。「アプリケーションの種類」で「ウェブアプリケーション」を選び、名前を入力します。

「承認済みのJavaScript生成元」セクションで「+ URIを追加」をクリックし、管理画面の「Googleでサインイン」ページに表示された値を貼り付けます。値が複数ある場合は、同じ手順を繰り返します。「承認済みのリダイレクトURI」セクションでも、同じ手順で管理画面の値を貼り付けます。入力を終えたら「作成」をクリックします。作成後に表示される「OAuthクライアントを作成しました」ダイアログは、次の節で値をコピーするまで開いたままにしておきます。

出典: Shopifyヘルプ「Googleをお客様アカウントに接続する」

管理画面にクライアントIDとクライアントシークレットはどう設定しますか？

「作成」をクリックすると表示される「OAuthクライアントを作成しました」ダイアログから、クライアントIDをコピーし、管理画面の「Googleでサインイン」ページの「資格情報」セクションに貼り付けます。

同じダイアログからクライアントシークレットをコピーし、同じ「資格情報」セクションに貼り付けます。管理画面で「保存」をクリックすると、クライアントIDとクライアントシークレットが登録されます。

出典: Shopifyヘルプ「Googleをお客様アカウントに接続する」

設定したアプリはどう公開しますか？

Google Cloud Consoleのプロジェクトのアプリで「オーディエンス」をクリックし、「アプリを公開」をクリックします。Shopifyヘルプの手順では、このアプリの公開がGoogleログインを設定する最後のステップです。

出典: Shopifyヘルプ「Googleをお客様アカウントに接続する」

Googleログインを有効にすると、どの顧客情報が同期されますか？

Googleログインを使っても、Shopifyに同期されるお客様のデータはメールアドレスだけです。ストアでは、GoogleログインとFacebookログインのように、複数のソーシャルログインを同時に有効にできます。

会員登録フォームで取得した誕生日・住所・同意情報の使い方は、会員登録で取得した誕生日・住所・同意情報の活用例7つで説明しています。

出典: Shopifyヘルプ「お客様アカウントのソーシャルログイン」

独自のIDプロバイダーを使っているストアでも設定できますか？

独自のIDプロバイダーをお客様アカウントに接続しているストアで、ソーシャルログインも接続するときは、外部のIDプロバイダーに問い合わせます。設定を始める前に、Googleログインを追加できるかを確認します。

独自のIDプロバイダーとは、ストア独自のログイン認証をお客様アカウントに接続する仕組みです。

出典: Shopifyヘルプ「お客様アカウントのソーシャルログイン」

設定したあと、Googleでサインインできるかはどう確認しますか？

管理画面の「設定」→「お客様アカウント」にあるお客様アカウントのURLを別のタブで開き、テスト用のお客様アカウントでGoogleでサインインできるかを確かめます。

Shopifyヘルプは、提供しているサインイン方法をすべてこの方法でテストするよう案内しています。

出典: Shopifyヘルプ「従来のお客様アカウントからお客様アカウントへのアップグレード」

設定を進める順番

Shopifyヘルプの手順では、Googleログインの設定を次のタスクの順番で進めます。設定中は、Google Cloud Consoleと管理画面のタブを切り替えながら、値をコピーして貼り付けます。

1. Google Cloud開発者アカウントを準備し、Google Cloud ConsoleとShopify管理画面の両方を同時に開く
2. 管理画面の「設定」→「お客様アカウント」の「認証」セクションで「管理」をクリックし、Googleの横の「接続」から「Googleでサインイン」ページを開く
3. 別のタブでGoogle Cloud Consoleを開き、プロジェクトを選ぶか新しいプロジェクトを作成する
4. 「APIとサービス」の「認証情報」で同意画面を構成し、アプリ名・サポート用メールアドレス・連絡先メールアドレスを入力して「作成」する
5. 「ブランディング」で、ホームページ・プライバシーポリシー・利用規約へのリンクを「アプリドメイン」セクションに入れる
6. プロジェクトの「概要」から「OAuthクライアントを作成」し、「アプリケーションの種類」で「ウェブアプリケーション」を選んで名前を入力する
7. 管理画面の「Googleでサインイン」ページの値を、「承認済みのJavaScript生成元」と「承認済みのリダイレクトURI」に貼り付けて「作成」する
8. 表示されたクライアントIDとクライアントシークレットを、管理画面の「資格情報」セクションに貼り付けて「保存」する
9. Google Cloud Consoleの「オーディエンス」から「アプリを公開」する

出典: Shopifyヘルプ「Googleをお客様アカウントに接続する」

関連記事

• Shop・Google・Facebookログインと会員登録フォームを併用する設定
• Shopifyでログイン画面をブランドカラーに設定する方法｜ロゴ・色・画像

よくある質問