「新しいお客様アカウント」へ切り替え済みの店舗ではFacebookとGoogleアカウントでのログインが標準機能で設定可能です。
本マニュアルは、Googleアカウントでのログインを追加する手順です。

公式マニュアル:お客様アカウントのソーシャルログイン
公式動画(英語):How to Set Up Shopify Social Login with Google
▼注意事項
①Google Cloud Consoleで本マニュアルに記載の通りにアプリ作成を作成したり、認証システムを利用される際には料金は発生しませんが、本マニュアルはGoogle Workspace(有料)ご契約済みであることを前提としております。
②お客様アカウントのページのドメインを標準のもの(https://shopify.com/ランダムな数字/account)で運用中の店舗が、店舗オリジナルのURLへ変更する場合、新しいドメインをGoogle側に登録する必要があります。(本マニュアル下部に操作方法記載あり)
③認証アプリが利用できなくなることが無いように、アプリを作成するGoogleアカウントは退職等のリスクが無いものにするか、作成後に「オーナー」を追加してください。(本マニュアル下部に操作方法記載あり)
▼全体の流れ
- Shopifyで設定に必要な情報を表示
- Google Cloud Consoleで認証用アプリを作成
- ShopifyにGoogle側で発行したIDを入力
- Google Cloud Consoleで認証用アプリを公開する
- Googleアカウントでログインの機能を実装する
▼Googleアカウントでのログインを追加する手順新しいアカウント
1.Shopifyで設定に必要な情報を表示
1) Shopify管理画面で 設定 > お客様アカウント を開く
2)「お客様アカウント」セクションの「認証」右の[管理]をクリック
3)「Google」の右の[接続]をクリック

2.Google Cloud Consoleで認証用アプリを作成
1) 認証アプリを作成するためにGoogle Cloud Consoleを開く(貴社作業用のGoogleアカウントでログインしてください)
2) プロジェクトの選択 > 新しいプロジェクト をクリック

3) プロジェクト名を入力して[作成]ボタンをクリック

※プロジェクト名は管理用なので任意の文字列で問題ありません
※プロジェクトID欄がある場合、そちらも任意の文字列で入力
※「組織」「親リソース」は基本的に変更不要ですが、貴社内で運用ルールがある場合はそちらに従ってください
4) 通知から今作ったプロジェクトを選択する(通知が表示されない場合、最初の画面に戻るので、「プロジェクトの選択」から先ほど作ったプロジェクトを選択する)

5) レフトメニューから APIとサービス > OAuth 同意画面 をクリック

6)[開始]ボタンをクリックし、アプリ情報を入力して[次へ]をクリック

- アプリ名:お客様のログイン履歴に表示される可能性があるので「○○店へのログイン」「○○店認証アプリ」などを推奨
※「Googleログイン」など、Google関連の商標を含む名称は設定できません
- ユーザーサポートメール:店舗の問い合わせ窓口のメールアドレスを入力(※)
※店舗の問い合わせ窓口のメールアドレスがGWS(Google Workspace)外のメールアドレスの場合、GWS内に専用のメールアドレス(グループでも可)を作成し、Gmailの設定で全件、店舗の問い合わせ窓口のメールアドレスへ転送する設定とすると管理しやすいです。もしくは、ユーザーから問い合わせがあった際に対応できる方のメールアドレスをご選択ください
※GWSにグループを追加する際は、本作業を行うアカウントを「オーナー」か「マネージャー」としてください
7)「対象」では「外部」を選択して[次へ]をクリック
8)「連絡先情報」にはGoogleからの通知を受け取りたいメールアドレスを入力して[次へ]をクリック
9)「終了」では同意にチェックを付けて[続行]ボタンをクリックしてから[作成]をクリック
※以下の様なエラーが表示される場合、アプリ名等がGoogleの規約に違反している可能性があります


10) レフトメニューから APIとサービス > 認証情報 をクリック

11) +認証情報を作成 > OAuth クライアント ID の順にクリック

12) 必要事項を入力して[作成]をクリック

- アプリケーションの種類:ウェブ アプリケーション
- 名前:管理用なので任意の文字列で問題ありません
- 承認済みの JavaScript 生成元:「1.Shopifyで設定に必要な情報を表示」で開いておいたShopifyの管理画面からコピー&ペーストで入力
※管理画面に表示されている分全てを追加してください - 承認済みのリダイレクト URI:同上
※「認証取り消しコールバックURI」は入力欄が存在しないので入力不要
※ ポップアップ画面は次の手順で必要なので閉じない

3.ShopifyにGoogle側で発行したIDを入力
1) 先ほどGoogle Cloud Console側にポップアップ表示された「クライアント ID」と「クライアント シークレット」をShopify管理画面にコピー&ペーストで入力し[保存]をクリック
※「クライアント シークレット」は重要な認証情報なので、取り扱いにご注意ください
※下図のエラーが出る場合、5分ほど待ってから保存してください

2) ポップアップ画面を「OK」で閉じる
4.Google Cloud Consoleで認証用アプリを公開する
1) Google Cloud Consoleのレフトメニューの「ブランディング」をクリック
2) 以下2か所を入力して[保存]をクリック
- アプリケーションのホームページ:ECサイトのTOPページURL
- アプリケーションのプライバシーポリシー:ECサイトのプライバシーポリシーのURL
3) レフトメニューの「対象」をクリックし[アプリを公開]ボタンをクリック

4)ポップアップ画面の「確認」をクリック

※「アプリの検証が必要」と表示される場合がありますが、機密性の高いスコープや制限付きスコープを含んでいないため、アプリの検証を完了させなくても、本番環境のまま上限なしで利用し続けることができます

5.Googleアカウントでログインの機能を実装する
1) Shopify管理画面右上の[オン]をクリック

2) ECサイトのログイン画面を開き正常にログインができるか確認する
▼設定が完了するとログイン画面にGoogleアカウントでログインするためのボタンが追加される(右図はFacebookアカウントでのログインも実装した場合)

▼ログイン時に以下のエラー画面が表示される場合は再試行するとログインできることが多い

★作成済みの認証アプリに別のドメインを追加する方法
以下はGoogleアカウントでログインを実装後、「お客様アカウント」のURL(ドメイン)を変更した場合の手順です。
1)Shopify管理画面の 設定 > お客様アカウント > 「認証」の右の[管理]をクリック
2) Googleの右の「・・・」 > 「管理」をクリックし画面を表示したままにしておく
3) Google Cloud Consoleで該当のプロジェクトを選択し、レフトメニューから APIとサービス > 認証情報 をクリック作成済みのアプリ名をクリック
4) Shopify管理画面から、未登録の「承認済みのJavaScriptオリジン」と「承認済みのリダイレクトURI」をコピー&ペーストして追加する
5)[保存]ボタンを押す
6) 変更後の「お客様アカウント」のURLからログインできることを確認する
★作成したプロジェクトに「オーナー」を追加する方法
1)Google Cloud Consoleにて対象のプロジェクトを選択
2)レフトメニューの IMAと管理 > IMA をクリック

3)「アクセスを許可」をクリックしてメールアドレス等を入力
4)「ロールを選択」にて「オーナー」を選択して保存する

【関連記事】
