Apple ID・Googleアカウントを使ってECサイトにログインできる機能です。
お客様（消費者）がお持ちのApple IDまたはGoogleアカウントを利用することで、ログイン時にIDやパスワードの入力が不要となり、1クリックでログインできます。

会員登録も「Apple ID」「Googleアカウント」に登録されているお客様（消費者）の情報で、簡単に登録ができるので会員獲得率向上に繋がります。

「Apple ID・Googleアカウントログインオプション」について（futureshopサービスサイトへ）

「Apple」「Google」側の管理画面との連携設定

「Apple ID」「Gooleアカウント」それぞれで設定が必要です。

• 「Apple ID」でログイン連携する場合の設定
• 「Gooleアカウント」でログイン連携する場合の設定

「Apple ID」でログイン連携する場合の設定［クリックして手順を見る］

Apple Developer画面は、2022.10現在のものです。

［手順A.1］Apple Developerにログイン

Certificates, Identifiers & Profiles画面、https://developer.apple.com/account/resources/identifiers/listにアクセスします。

Apple IDと有料プラン（年間メンバーシップ料金99ドル※2022.10現在）の登録完了が必要です。

［手順A.2］APP IDを作成します。

Identifiersの横の青い［＋］を押下します。

［手順A.3］App IDsにチェックし［Continue］を押下します。

［手順A.4］Appを選択し［continue］を押下します。

［手順A.5］Register an App ID画面で以下を設定します。

Description

わかりやすい任意の名前をつけます。

Bundle ID

アプリケーションを特定するために設定します。わかりやすい名称をつけてください。
例）jp.ドメイン名.アプリの名前

Sign In with Apple

Sign In with Appleにチェックを入れます。

完了したら［Continue］を押下します。

［手順A.6］確認画面が表示されるので、設定内容を確認して［Register］を押下します。

［手順A.7］Certificates, Identifiers & Profiles画面に戻ります。

登録したアプリが表示されているか確認します。

［手順A.8］Service IDを作成します。

Identifiersの横の青い［＋］を押下します。

［手順A.9］Services IDsにチェックし、［Continue］を押下します。

［手順A.10］Register a Services ID画面で以下を設定します。

Description

わかりやすい任意の名前をつけます。

Identifier

サービスを特定するために設定します。わかりやすい名称をつけてください。
後ほどfutureshop管理画面に登録する値になります。
例）jp.ドメイン名.アプリの名前

完了したら［Continue］を押下します。

［手順A.11］確認画面が表示されるので、設定内容を確認して［Register］を押下します。

［手順A.12］Certificates, Identifiers & Profiles画面に戻ります。

登録したServiceが表示されているか確認します。

［手順A.13］Identifierの一覧から作成したサービスを押下し、Edit your Services ID Configuration画面を開きます。

Sign in with Appleにチェックし、［Configure］を押下します。

［手順A.14］Web Authentication Configurationモーダルが開きます。

以下を設定してください。

Primary App ID

［手順A.5］Register an App IDで作成したApp IDを選択します。

Domains and Subdomains

futureshop管理画面の設定＞連携サービス＞Apple設定-Apple Developerの設定項目「Domains and Subdomains（ECサイトのドメイン）」の値を貼り付けます。

Return URLs

futureshop管理画面の設定＞連携サービス＞Apple設定-Apple Developerの設定項目「Return URLs（リダイレクトURL）」の値を貼り付けます。

＜futureshop管理画面＞

［手順A.15］確認モーダルが開くので［Done］を押下します。

［手順A.16］Edit your Services ID Configuration画面に戻るので、［Continue］を押下します。

［手順A.17］確認画面が開くので、確認し、［Save］を押下します。

［手順A.18］Identifierの一覧から作成したサービスを押下し、Edit your Services ID Configuration画面を開きます。

Identifierに表示されている値を、futureshop管理画面の設定＞連携サービス＞Apple設定-Apple API情報「Identifier（ID）」に貼り付け、futureshop管理画面の［保存する］を押下します。

Edit your Services ID Configuration画面は閉じて構いません。

---

futureshop管理画面の設定＞連携サービス＞Apple設定「利用設定」のチェックはOFFのままにします。すべての設定完了後にONとします。

以上でApple Developerとの連携は完了です。

---

「Googleアカウント」でログイン連携する場合の設定［クリックして手順を見る］

Cloud Console画面は、2022.10現在のものです。

［手順G.1］Cloud Consoleにログイン

https://console.cloud.google.com/apis/dashboardにアクセスします。

Googleアカウントが必要です。

［手順G.2］上部の「プロジェクトの選択（もしくはプロジェクト名）▼」を押下します。.

「プロジェクトの選択（もしくはプロジェクト名）▼」が表示されていない場合は、左メニューから「認証情報」を選択してください。

［手順G.3］表示されたモーダル内にて［新しいプロジェクト］を押下します。

［手順G.4］「新しいプロジェクト」画面にて「プロジェクト名」「場所」を設定します。

プロジェクト名

futureshopのログインで利用することが分かりやすい名称を任意で設定します。

場所

特に登録はなければ「組織なし」のままで構いません。
会社名などがあらかじめ登録されている場合は、そちらを選択してください。

［作成］を押下します。

［手順G.5］［＋認証情報を作成］を押下します。

表示された選択肢から、「OAuth クライアント ID の作成」を選択します。

［手順G.6］［同意画面を設定］を押下します。

このボタンが表示されない場合は設定済みですので、手順14へすすんでください。

OAuth 同意画面とは（Googleマニュアルより抜粋）

認可に OAuth 2.0 を使用する場合、アプリでは Google アカウントから 1 つ以上のアクセス スコープに対する認可がリクエストされます。Google の同意画面がユーザーに表示されます。この画面には、プロジェクトとそのポリシーの概要と、リクエストされたアクセス スコープが含まれます。

［手順G.7］「外部」を選択し、［作成］を押下します。

［手順G.8］お客様（消費者）に表示される同意画面に表示する内容を登録します。

画面右側にどのような同意画面が表示されるか、ガイドが表示されますので参照してください。

＜アプリ情報＞

アプリ名

わかりやすい任意の名前をつけます。

ユーザーサポートメール

ユーザーから同意に関して問い合わせを受け付けるメールを選択します。

通常は、設定中（ログイン中）のアカウントのメールアドレスが表示されます。

アプリのロゴ

同意画面に表示する店舗ロゴなどを登録します。

＜アプリドメイン＞

アプリケーションのホームページ

ECサイトのURLを登録します。

［アプリケーションプライバシーポリシー］リンク

ECサイトのプライバシーポリシーのURLを登録します。

---

スタートアップテーマご利用の場合：https://(ドメイン)/p/about/privacy-policy

---

［アプリケーション利用規約］リンク

ECサイトの会員規約のURLを登録します。

---

スタートアップテーマご利用の場合：https://(ドメイン)/p/about/member-agreement

---

＜承認済ドメイン＞

承認済ドメイン

［＋ドメインの追加］を押下すると入力欄が表示されます。

ECサイトのドメインを登録します。

＜デベロッパーの連絡先情報＞

メールアドレス

Googleからのお知らせを受け取るメールアドレスを登録します。
後の手順で受信が必要になる場合がありますので、必ず受信・確認が可能なメールアドレスを設定してください。

すべて登録したら、［保存して次へ］を押下します。

［手順G.9］お客様（消費者）登録情報のうち、どの情報へのアクセスを許可するかを設定します。

［スコープを追加または削除］を押下します。

［手順G.10］開いたドロワーメニューより、以下をチェックします。

• 「Google アカウントのメインのメールアドレスの参照」
• 「ユーザーの個人情報の表示（ユーザーが一般公開しているすべての個人情報を含む）」

選択後、ドロワーメニューの下部にある［更新］を押下します。

「非機密のスコープ」に設定が表示されます。

［保存して次へ］を押下します。

［手順G.11］テストユーザーを設定します。（任意）

テストが必要な場合は設定してください。 必要ない場合は、何も登録せず［保存して次へ］を押下します。

［手順G.12］概要が表示されます。

登録内容を示した「概要」画面が開きますので登録内容を確認し、ページ下部の［ダッシュボードに戻る］を押下します。
「同意画面」の設定が完了しました。

［手順G.13］再度、左メニューより［認証情報］を選択し、上部の［＋認証情報を作成］を押下しメニューを表示します。

「OAuth クライアント ID の作成」を選択してください。

［手順G.14］アプリケーションの種類の選択肢から「ウェブアプリケーション」を選択します。

［手順G.15］設定画面が開くので、以下の項目をそれぞれ設定します。

名前

任意の名前を登録します。ECサイト名など分かりやすいものを登録します。

承認済みの JavaScript 生成元

［URIを追加］を押下し、入力欄を表示します。

［URIを追加］を押下し、入力欄を表示します。
futureshop管理画面の設定＞連携サービス＞Google設定-Google Cloud Platformの設定項目「承認済みのJavaScript生成元」の値を貼り付けます。

承認済みのリダイレクト URI

［URIを追加］を押下し、入力欄を表示します。

futureshop管理画面の設定＞連携サービス＞Google設定-Google Cloud Platformの設定項目「承認済みのリダイレクトURI」の値を貼り付けます。

完了したら［作成］を押下します。

［手順G.16］「OAuth クライアントを作成しました」というモーダル内の値をfutureshop管理画面に登録します。

「OAuth クライアントを作成しました」というモーダルが表示されます。
「クライアントID」に表示された値をfutureshop管理画面の設定＞連携サービス＞Google設定-Google API情報「クライアントID」に貼り付け、［保存する］を押下します。

Google側のモーダルは［OK］を押下して閉じます。

「クライアントID」と「クライアントシークレット」の確認方法

1. 左メニューの［認証情報］を押下します。
2. 「OAuth 2.0 クライアント ID」に表示された該当IDの「名前」もしくは［編集］マークを押下します。



3. 画面右側に情報が表示されます。

［手順G.17］アプリケーションを本番化します。

Google Cloud Platform管理画面に戻り、アプリを本番化します。

本番化の手続きを行うと、Googleによる確認が行われます。
確認の際にGoogleより送られてくるメールに従い各種登録や設定を行ってください。（登録状況などにより対応方法が異なります。）

なお、2023.01現在、審査中（確認中）であってもGoogleログインは利用できることが確認できております。
今後のGoogleの仕様変更があった場合や他のアプリケーションを同時利用した場合にはこの限りではございませんのであらかじめご了承ください。

1. APIとサービス＞OAuth 同意画面を開き、「公開ステータス」欄に表示されている［アプリを公開］を押下します。



2. 確認モーダルが開きますので、［確認］を押下してください。
   モーダルに記載されている内容は、必ずしも求められない場合もございます。手続き後のGoogleからのメールをご確認ください。



3. OAuth 同意画面に、「確認ステータス」欄が追加され、ステータスが表示されます。
   ［確認を準備する］を押下して、画面の指示通りに進んでください。（既に登録済みの内容が再度表示されます。）



4. 最終画面に表示される［確認のため送信］を押下し、手続きは完了です。

この後については、Googleからのメールをよく読みご対応ください。

---

futureshop管理画面の設定＞連携サービス＞Google設定「利用設定」のチェックはOFFのままにします。すべての設定完了後にONとします。

以上でGoogle Cloud Platformとの連携は完了です。

---

ECサイトに「Appleでサインイン」「Googleでログイン」ボタンを表示する

本手順は2022.10.19以前にご利用の店舗様のみに必要な手順です。以降に新規お申込み店舗様は不要ですので、［3：ボタンの色を設定する］へお進みください。

「ショッピングカート」と「ショッピングカート（定期）」に「Appleでサインイン」「Googleでログイン」ボタンを表示するための設定です。
レイアウトに「ログイン連携」関連パーツを配置します。

以下の手順では例として「PC・タブレット」に関して設定を行っております。表示したいテーマとレイアウトを適宜選択し、操作してください。スマートフォンやタブレットで、テーマを分けている場合は、それぞれのテーマでの操作が必要です。

2-1コマースクリエイター＞（該当テーマの）レイアウト一覧より「ショッピングカート」「ショッピングカート（定期）」のレイアウトを開きます。

を押下すると、レイアウトに配置する（画面に表示する）コンテンツを調整する「レイアウト変更」画面に遷移します。

2-2コマースクリエイター＞（該当レイアウトの）「レイアウト変更」画面にて、「総合計エリア」を開きます。

左の「パーツ配置エリア」にて、以下のように「総合計エリア」までレイアウトを開いていきます。

メインエリア＞コンテンツエリア＞ショッピングカート表示エリア＞カートコンテンツ表示エリア＞総合計エリア

2-3「パーツ検索エリア」で「連携ログイン」と検索し、配置するパーツを表示します。

「連携ログインエリア」というパーツを表示します。
こちらが配置するパーツです。

2-4「連携ログインエリア」パーツを左の「パーツ配置エリア」にドラック＆ドロップで配置します。

2-5プレビューして表示を確認します。

保存前にプレビューで確認が行えます。［プレビュー］を押下します。

プレビューモードを選択するモーダルが開きますので、「デザイン確認モード」を選択します。
「ショッピングカート」画面が表示されますので、表示されているか確認してください。

ボタンの色やボタン上のメッセージなどはのちの手順で変更可能ですので、そのまま［保存する］を押下します。

ボタンの色を設定する

「Appleでサインイン」「Googleでログイン」のボタン色を指定できます。

ボタンが表示される画面（「ショッピングカート・ショッピングカート（定期）・ログイン・ログイン連携」画面）すべてに同じボタンが表示されます。

設定画面：コマースクリエイター＞（該当テーマの）テーマ設定

例として「PC・タブレット」に関して設定を行っております。表示したいテーマとレイアウトを適宜選択し、操作してください。スマートフォンやタブレットで、テーマを分けている場合は、それぞれのテーマでの操作が必要です。

• 【Appleでサインイン】ボタン設定
• 【Googleでログイン】ボタン設定

カラーサンプルなどは、各項目名からリンク先のページでご覧いただけます。

「ショッピングカート」「ショッピングカート（定期）」画面に表示されるメッセージを調整する

「Appleでサインイン」「Googleでログイン」のボタン周りに表示されるメッセージを調整できます。

「ショッピングカート」「ショッピングカート（定期）」双方に表示されます。

ボタンの表示順は変更できます。［参考］ボタンの並び替え方法をご覧ください。

それぞれ以下で設定できます。

未ログインの場合

メッセージ名	メッセージ内容（初期値）
ショッピングカート連携ログインメッセージ	こちらもご利用いただけます。
ショッピングカートAppleでサインインメッセージ	初期値はありません。「Apple ID」ボタンの上に表示できます。 （例文）Apple IDでログインし、お買い物していただけます。
ショッピングカートGoogleでログインメッセージ	初期値はありません。「Googleでログイン」ボタンの上に表示できます。

ログイン済み（仮ログイン状態含む）の場合は、「Appleでサインイン」「Googleでログイン」のボタンや関連する文言は表示されません。

「ログイン」画面に表示されるメッセージを調整する

「Appleでサインイン」「Googleでログイン」のボタン周りに表示されるメッセージを調整できます。

「ショッピングカートログイン（定期含）」「マイページ/お気に入り/レビュー/LINEログイン」画面すべてに表示されます。

ボタンの表示順は変更できます。［参考］ボタンの並び替え方法をご覧ください。

各ボタン周りに表示するメッセージについて、それぞれ以下で設定できます。

Amazonの連携機能をご利用いただくには、別のオプション契約が必要です。ご契約されていない場合は、表示されません。

メッセージ名	メッセージ内容（初期値）
連携ログイン見出し	連携サービスでログイン・会員登録
連携ログインメッセージ	初期値はありません。 （例文）［連携ログインメッセージ］以下のIDやアカウントでもログイン・会員登録できます。
Appleでサインインメッセージ	初期値はありません。「Appleでサインイン」ボタンの上に表示できます。 （例文）Apple IDでログインし、ログイン・会員登録していただけます。
Googleでログインメッセージ	初期値はありません。「Googleでログイン」ボタンの上に表示できます。
［参考］Amazonログインメッセージ	初期値はありません。「amazonでログイン」ボタンの上に表示できます。 ※2022.10.19以前からご利用の店舗様は、初期値として「Amazon.co.jpにご登録の情報を利用してログインまたは会員登録されるお客様は、「Amazonアカウントでログイン」ボタンよりお進みください。」と表示されています。

※2022.10.19以前からご利用の店舗様は表示メッセージの初期値が異なりますのでご注意ください。

いずれかの連携サービスのID/アカウントでログインした際、同一のメールアドレスで既に会員登録されている場合、以下のメッセージが表示されます。
それぞれ以下で設定できます。

表示される条件や画面遷移については画面遷移について-【B】会員登録済（未ログイン状態含む）のお客様（消費者）の場合をご覧ください。

メッセージ名	メッセージ内容（初期値）
Appleログイン後メッセージ	Appleから取得したメールアドレスで、既に会員登録があります。他の方法でログインしていただき、マイページからログイン連携へお進みください。
Googleログイン後メッセージ	Googleから取得したメールアドレスで、既に会員登録があります。他の方法でログインしていただき、マイページからログイン連携へお進みください。
［参考］Amazonログイン後メッセージ	Amazonから取得したメールアドレスで、既に会員登録があります。他の方法でログインしていただき、マイページからログイン連携へお進みください。 ※2022.10.19以前からご利用の店舗様は、初期値として「会員にご登録済みの場合は、ログインしてください。(次回以降はAmazonログインのみでログインできます。）」（メッセージ）」と表示されています。

「マイページトップ」に「ログイン連携」画面へ遷移するメニューを表示する

「マイページトップ」からログイン連携状態を確認するための「ログイン連携」画面へ遷移するメニューを表示させます。
本設定をしないと、会員の方がログイン連携を解除できなくなりますので、必ず設定してください。

設定＞購入者・会員情報＞会員設定-マイページ設定「ログイン連携設定」にチェックします。

表示イメージの詳細はマイページトップパーツをご覧ください。

マイページ内「ログイン連携」画面の表示を確認・調整する

Amazon・LINEの連携機能をご利用いただくには、別のオプション契約が必要です。ご契約されていない場合は、表示されません。

ボタンの表示順は変更できます。［参考］ボタンの並び替え方法をご覧ください。

「ログイン連携」（見出し）

コマースクリエイター＞フリーパーツで設定します。
初期値では、「ログイン連携」となっています。

「連携サービスを利用してログインするには、ご利用のサービスのボタンよりお進みください。なお、連携はいつでも停止できます。」（メッセージ）

コマースクリエイター＞メッセージにある「ログイン連携コメント」を表示できます。

「未連携」（連携ステータス）

コマースクリエイター＞メッセージにある「ログイン連携メッセージ（未連携）」を表示できます。
このメッセージが表示されている場合は、各連携サービスとの未連携状態ですので、連携用ボタンが表示されます。

「Apple」の連携ボタン（ボタン）

コマースクリエイター＞テーマ＞テーマ設定にある Apple設定で設定したボタンが表示されます。
押下すると、Apple IDとECサイトの会員IDが連携されます。

「Google」の連携ボタン（ボタン）

コマースクリエイター＞テーマ＞テーマ設定にあるGoogle設定で設定したボタンが表示されます。
押下すると、GooglアカウントとECサイトの会員IDが連携されます。

［参考］「Amazon」の連携ボタン（ボタン）

コマースクリエイター＞テーマ＞テーマ設定にある Amazon設定で設定したボタンが表示されます。
押下すると、各アカウント情報とECサイトの会員IDが連携されます。

［参考］［LINE ID連携］（ボタン）（スマートフォンのみ）

コマースクリエイター＞テーマ＞ボタンにある「LINE ID連携-ログイン連携ボタン」を表示できます。
押下すると、「LINE ID連携」画面（スマートフォンのみ）に遷移します。

---

「連携中」（連携ステータス）

コマースクリエイター＞メッセージにある「ログイン連携メッセージ（連携中）」を表示できます。
このメッセージが表示されている場合は、各連携サービスとの連携済みですので、連携停止用のボタンが表示されます。

［停止する］（ボタン）

コマースクリエイター＞テーマ＞ボタンにある「停止する-ログイン連携」を表示できます。
押下すると、「ログイン連携停止」モーダルが開きます。

「ログイン連携停止」（見出し）

コマースクリエイター＞メッセージにある「ログイン連携停止タイトル」を表示できます。

［ログイン連携を停止する］ボタン

コマースクリエイター＞テーマ＞ボタンにある「 ログイン連携停止-ログイン連携」ボタンが表示されます。
押下すると、該当のサービスとの連携が解除されます。

［キャンセル］ボタン

コマースクリエイター＞テーマ＞ボタンにある「キャンセル-共通」ボタンが表示されます。
押下すると、該当のサービスとの連携解除をキャンセルし、「ログイン連携」画面に戻ります。

「Apple ID」「Googleアカウント」を利用して会員登録する画面の表示を確認・調整する

「Apple/Google」で連携をして、新規会員登録を行う場合、新規で追加される画面となります。

会員登録の画面遷移については、画面遷移について-【A】ゲスト（会員登録未）のお客様（消費者）の場合をご覧ください。

「会員登録確認」（見出し）

コマースクリエイター＞フリーパーツで設定します。
初期値では、「会員登録確認」となっています。

「Googleにご登録の情報を利用して会員登録いたします。」（メッセージ）

コマースクリエイター＞メッセージで各連携サービスごとに表示できます。

連携サービス	表示メッセージ
Apple	Appleにご登録の情報を利用して会員登録いたします。
Google	Googleにご登録の情報を利用して会員登録いたします。

［会員登録］ボタン

コマースクリエイター＞テーマ＞ボタンにある「会員登録-会員登録確認」ボタンが表示されます。
押下すると、各サービスの連携情報を利用し、会員登録します。ログイン連携も完了となります。

［キャンセル］ボタン

コマースクリエイター＞テーマ＞ボタンにある「キャンセル-会員登録確認」ボタンが表示されます。
押下すると、会員登録せずに前の画面に戻ります。

「個人情報保護方針」「会員規約」「メールマガジンの購読」チェック

表示内容と設定につては、「会員登録確認」画面-「個人情報保護方針」「会員規約」「メールマガジンの購読」チェック表示についてをご確認ください。

「デザイン確認」モードでプレビュー確認する

設定＞連携サービス＞Google設定-利用設定/設定＞連携サービス＞Apple設定-利用設定の「利用する」チェックをOFFのままご確認ください。

コマースクリエイター＞テーマ一覧よりプレビューしたいテーマを選択し、プレビューボタンを押下します。

「デザイン確認」モードを選択し、表示が意図通りになっているかをご確認ください。

プレビューで表示を確認すべき画面は以下の通りです。
各画面で利用されているメッセージやボタンについても、各画面のマニュアルにてご確認ください。

各ログインボタンは、未ログイン状態でなければ表示されません。確認時には、ログアウトしているかをご確認ください。

プレビュー機能についてはプレビューモードの機能別動作についてをご覧ください。

画面遷移については画面遷移についてをご覧ください。

「Apple ID」「Googleアカウント」での「ログイン連携」機能のご利用を開始する

設定＞連携サービス＞Google設定-利用設定/設定＞連携サービス＞Apple設定-利用設定のチェックをONにします。

店舗閉店が必要です。

以上で「Apple ID」「Googleアカウント」での「ログイン連携」機能をご利用いただけるようになりました！

【ご利用開始後】ログイン連携の顧客数や売上貢献度状況を確認する（推奨）

futureshop管理画面の以下のreports画面では、会員ID連携別（Amazon・LINE・Apple・GoogleとのID連携会員）に「連携会員数の推移」や、「売上に貢献している連携サービスの傾向」などを、ボタン一つで簡単に確認していただけます。

いずれも昨対比や過去30日との期間比較を行えるほか、顧客数全体・売上全体に関するグラフを重ね合わせて表示することもでき、相関関係や傾向比較をすることができます。

「顧客数（ID連携別）」レポート

reports＞顧客レポート＞顧客数（ID連携別）から確認できます。

Amazon・LINE・Apple・Googleのアカウント/ID連携会員の、登録数の推移や割合を、期間を区切ってグラフでみることができます。
ログイン連携機能ご利用開始から、どれくらい連携数が伸びているか、またどの連携サービスが最もよく使われる傾向にあるか、などを検証することができます。

「注文（ID連携別）」レポート

reports＞注文レポート＞注文（ID連携別）から確認できます。

Amazon・LINE・Apple・Googleのアカウント/ID連携会員別に、どれくらい注文しているかをグラフで確認することができます。
会員登録のしやすさ、ログインのしやすさにより、購入へのハードルが軽減したか、など売上の貢献度を検証することができます。

ログイン連携は、「ショッピングカート」「ログイン」画面、およびマイページ内の「ログイン連携」画面から行えます。

会員登録やログイン状況、他サービスとの連携状況により、画面の表示や遷移が異なりますので、以下でそれぞれご確認ください。

• 【A】ゲスト（会員登録未）のお客様（消費者）の場合
  • 【A.I】ショッピングカートからの流れ
  • 【A.Ⅱ】ログイン画面からの流れ
• 【B】会員登録済（未ログイン状態含む）のお客様（消費者）の場合
  • 【B.I】ショッピングカートからの流れ
  • 【B.Ⅱ】ログイン画面からの流れ
  • 【B.Ⅲ】「マイページ」内の「ログイン連携」画面からの流れ

「Apple ID」「Googleアカウント」でログイン時に、連携済み会員として、ECサイトに新規会員登録されます。

【A.I】ショッピングカートからの流れ

ショッピングカートの「Appleでサインイン」もしくは「Googleでログイン」を押下します。

「Apple ID」「Googleアカウント」にサインインします。

Googleアカウントの場合

Googleアカウントにサインインする画面が表示されます。

1. Googleログインページにて、メールアドレスまたは電話番号を入力します。（既にサインインしている場合は表示されません。）
2. 該当のアカウントを選択します。
3. 選択したアカウントでログインすることを確認します。

→

→

Apple IDの場合

Apple IDにサインインする画面が表示されます。

1. 「サインイン」画面が表示されるので、Apple IDとパスワードを入力します。
2. 2ファクタ認証画面にてご利用中のデバイスに送信されたコードを入力します。
3. コード入力後、メールを共有するかどうかを選択し、アカウントを作成します。
   ※「メールを非公開」を選択すると、Apple側で作られたメールアドレスでサインインしてしまうため、ECサイトに登録されているアカウントと連携したい場合は、「メールを共有」を選択してください。

→

→

Apple/Googleの設定などによりサインイン画面の一部が省略される場合があります。

「会員登録確認」画面が開くので、［会員登録］を押下します。

「Apple ID」「Googleアカウント」に登録された情報をもとに会員登録します。

［会員登録］を押下すると、ECサイトの会員登録と「Apple ID/Googleアカウント」との連携が、共に完了となります。

本画面では、ECサイトの会員情報にパスワードの設定ができません。
メールアドレスとパスワードでログインを行う場合には、「ログイン」画面からパスワードリマインダー、もしくは「パスワード変更」画面を利用して設定してください。

「会員内容変更」画面に遷移しますので、不足情報を入力します。

ご注文手続きを完了するために、不足しているお客様情報を入力します。

「注文手続き」画面に戻ります。

決済方法など必要情報を設定後、注文完了となります。

【A.Ⅱ】ログイン画面からの流れ

ログイン画面から「Appleでサインイン」「Googleでログイン」ボタンを押下します。

「Apple ID」「Googleアカウント」にサインインします。

Googleアカウントの場合

Googleアカウントにサインインする画面が表示されます。

1. Googleログインページにて、メールアドレスまたは電話番号を入力します。（既にサインインしている場合は表示されません。）
2. 該当のアカウントを選択します。
3. 選択したアカウントでログインすることを確認します。

→

→

Apple IDの場合

Apple IDにサインインする画面が表示されます。

1. 「サインイン」画面が表示されるので、Apple IDとパスワードを入力します。
2. 2ファクタ認証画面にてご利用中のデバイスに送信されたコードを入力します。
3. コード入力後、メールを共有するかどうかを選択し、アカウントを作成します。
   ※「メールを非公開」を選択すると、Apple側で作られたメールアドレスでサインインしてしまうため、ECサイトに登録されているアカウントと連携したい場合は、「メールを共有」を選択してください。

→

→

Apple/Googleの設定などによりサインイン画面の一部が省略される場合があります。

「会員登録確認」画面が開くので、［会員登録］を押下します。

「Apple ID」「Googleアカウント」に登録された情報をもとに会員登録が完了し、同時に「Apple ID/Googleアカウント」との連携も完了します。

本画面では、ECサイトの会員情報にパスワードの設定ができません。
メールアドレスとパスワードでログインを行う場合には、「ログイン」画面からパスワードリマインダー、もしくは「パスワード変更」画面を利用して設定してください。

「会員登録完了」画面が表示されます。

会員登録必須項目に不足があった場合でも、「会員内容変更」画面は表示されません。
次回ご注文手続きを行う際、もしくは、マイページを利用する際（設定＞購入者・会員情報＞会員設定-マイページ設定-会員情報（必須項目）未入力設定「会員情報に未入力の必須項目があれば、補完入力画面を表示する」にチェックがある場合）に表示されます。

「Apple ID」「Googleアカウント」でログイン時に、連携する会員情報を取得し、連携ログインします。
お客様（消費者）のログイン状態、および連携済みアカウントがログイン時に存在するか、により挙動が異なります。

【B.I】ショッピングカートからの流れ

ショッピングカートの「Appleでサインイン」もしくは「Googleでログイン」を押下します。

本ログイン・仮（自動）ログイン（ログイン状態が保持されている）状態の場合、「Appleでサインイン」もしくは「Googleでログイン」ボタンは表示されません（連携できません）。 未ログイン状態の場合のみ表示されます。

「Apple ID」「Googleアカウント」にサインインします。

Googleアカウントの場合

Googleアカウントにサインインする画面が表示されます。

1. Googleログインページにて、メールアドレスまたは電話番号を入力します。（既にサインインしている場合は表示されません。）
2. 該当のアカウントを選択します。
3. 選択したアカウントでログインすることを確認します。

→

→

Apple IDの場合

Apple IDにサインインする画面が表示されます。

1. 「サインイン」画面が表示されるので、Apple IDとパスワードを入力します。
2. 2ファクタ認証画面にてご利用中のデバイスに送信されたコードを入力します。
3. コード入力後、メールを共有するかどうかを選択し、アカウントを作成します。
   ※「メールを非公開」を選択すると、Apple側で作られたメールアドレスでサインインしてしまうため、ECサイトに登録されているアカウントと連携したい場合は、「メールを共有」を選択してください。

→

→

Apple/Googleの設定などによりサインイン画面の一部が省略される場合があります。

連携状態により以下のように遷移が異なります。

B.I-3-b登録済み会員情報が、「Apple ID」「Googleアカウント」と未連携であるが、同一メールアドレスである場合

連携ログインせず、「ログイン」画面に遷移します。

以下のように、「Googleから取得したメールアドレスで、既に会員登録があります。他の方法でログインしていただき、マイページからログイン連携へお進みください。」 「Appleから取得したメールアドレスで、既に会員登録があります。他の方法でログインしていただき、マイページからログイン連携へお進みください。」と表示されます。

ログイン欄に、該当の会員IDのメールアドレスが、自動的にセットされます。
該当の会員情報でログインすると、連携ログイン完了となり、「注文手続き」画面へ遷移します。

再度表示された「ログイン」画面で、別のサービスの連携ボタンを押下すると、先に押下したサービスの連携処理は行われませんのでご注意ください。

「注文手続き」画面に戻ります。

決済方法など必要情報を設定後、注文完了となります。

【B.Ⅱ】ログイン画面からの流れ

ログイン画面から「Appleでサインイン」「Googleでログイン」ボタンを押下します。

「Apple ID」「Googleアカウント」にサインインします。

Googleアカウントの場合

Googleアカウントにサインインする画面が表示されます。

1. Googleログインページにて、メールアドレスまたは電話番号を入力します。（既にサインインしている場合は表示されません。）
2. 該当のアカウントを選択します。
3. 選択したアカウントでログインすることを確認します。

→

→

Apple IDの場合

Apple IDにサインインする画面が表示されます。

1. 「サインイン」画面が表示されるので、Apple IDとパスワードを入力します。
2. 2ファクタ認証画面にてご利用中のデバイスに送信されたコードを入力します。
3. コード入力後、メールを共有するかどうかを選択し、アカウントを作成します。
   ※「メールを非公開」を選択すると、Apple側で作られたメールアドレスでサインインしてしまうため、ECサイトに登録されているアカウントと連携したい場合は、「メールを共有」を選択してください。

→

→

Apple/Googleの設定などによりサインイン画面の一部が省略される場合があります。

登録済み会員の連携状態、ログイン状況により画面遷移が異なります。

B.Ⅱ-3-b仮（自動）ログイン状態であった場合

ログイン状態が保持されている状態を指します。
すでにログインしている状態のため、仮ログイン中の会員情報以外の会員情報や連携情報でログインしようとする（連携しようとする）と、エラーとなります。具体的な流れは以下でご確認ください。

B.Ⅱ-3-b.1登録済み会員IDが、「Apple ID」「Googleアカウント」と既に連携済みである場合

B.Ⅱ-3-b.1.1連携済みの会員IDが、仮ログイン中の会員IDである場合

連携ログイン完了となり、「マイページ」などのログイン後の画面へ遷移します。

B.Ⅱ-3-b.1.2（複数の会員IDをお持ちで）連携済みの会員IDが、仮ログイン中とは別の会員IDである場合

連携ログインできず、「ログイン」画面に遷移します。

以下のように「別のアカウントでログインする場合は一旦ログアウトしてください。」とエラーメッセージが表示されます。
この状態で仮ログイン中の会員情報で本ログインしても連携されません。

＜仮ログインしていた会員ID側で連携し直したい場合＞

以下の手順で行います。

1. ログアウトします。
2. 連携済みの別の会員情報でログインし、「ログイン連携」画面にて連携解除し、ログアウトします。
3. 先ほど仮ログイン状態であった会員情報で再度ログインし、「ログイン連携」画面より連携します。
   もしくは、「Apple ID」「Googleアカウント」と同一のメールアドレスの会員IDである場合は、未ログイン状態のまま「ログイン」画面から「Appleでサインイン」「Googleでログイン」を押下します。（［B.Ⅱ-3-a.2.1］登録済み会員情報が、「Apple ID」「Googleアカウント」と同一メールアドレスである場合の流れとなります。）

エラー表示された以降の「ログイン」画面では、仮ログイン中の会員情報以外ではログインできなくなります。

B.Ⅱ-3-b.2登録済み会員IDが「Apple ID」「Googleアカウント」と未連携である場合

複数の会員IDをお持ちの場合、いずれの会員IDも未連携である場合を指します。いずれかが連携済みの場合は［B.Ⅱ-3-b.1］登録済み会員IDが、「Apple ID」「Googleアカウント」と既に連携済みである場合の流れとなります。

連携ログインできず、「ログイン」画面に遷移します。

以下のように「別のアカウントでログインする場合は一旦ログアウトしてください。」とエラーメッセージが表示されます。
この状態で仮ログイン中の会員情報で本ログインしても連携されません。

「Apple ID」「Googleアカウント」と同一のメールアドレスで会員登録をしている場合であっても、同様にエラーメッセージが表示されます。

＜仮ログイン中の会員IDと連携したい場合＞

メールアドレス・パスワードでログインし、「ログイン連携」画面にて連携します。

＜複数会員IDをお持ちで、別の会員IDと連携したい場合＞

以下の手順で行ってください。

1. ログアウトします。
2. 再度連携したい会員IDでログインし、「ログイン連携」画面にて連携します。
   もしくは、「Apple ID」「Googleアカウント」と同一のメールアドレスの会員IDである場合は、未ログイン状態のまま「ログイン」画面から「Appleでサインイン」「Googleでログイン」を押下します。（［B.Ⅱ-3-a.2.1］登録済み会員情報が、「Apple ID」「Googleアカウント」と同一メールアドレスである場合の流れとなります。）

エラー表示された以降の「ログイン」画面では、仮ログイン中の会員情報以外ではログインできなくなります。

【B.Ⅲ】「マイページ」内の「ログイン連携」画面からの流れ

「マイページ」内の「ログイン連携」画面から各サービスとの連携が可能です。

「マイページ」トップより［ログイン連携］メニューを押下します。

［ログイン連携］メニューを表示するには、「Apple ID・Googleアカウントログインオプション」のはじめかたの［6］「マイページトップ」に「ログイン連携」画面へ遷移するメニューを表示するを行う必要があります。

「ログイン連携」画面に表示された連携ボタンを押下します。

「amazonでログイン」「LINE ID連携」については、それぞれ以下をご覧ください。

• Amazonログイン連携のはじめかたと画面遷移（コマースクリエイター）
• LINE ID連携 各画面の遷移と解説（スマートフォン）

「Apple ID」「Googleアカウント」にサインインします。

Googleアカウントの場合

Googleアカウントにサインインする画面が表示されます。

1. Googleログインページにて、メールアドレスまたは電話番号を入力します。（既にサインインしている場合は表示されません。）
2. 該当のアカウントを選択します。
3. 選択したアカウントでログインすることを確認します。

→

→

Apple IDの場合

Apple IDにサインインする画面が表示されます。

1. 「サインイン」画面が表示されるので、Apple IDとパスワードを入力します。
2. 2ファクタ認証画面にてご利用中のデバイスに送信されたコードを入力します。
3. コード入力後、メールを共有するかどうかを選択し、アカウントを作成します。
   ※「メールを非公開」を選択すると、Apple側で作られたメールアドレスでサインインしてしまうため、ECサイトに登録されているアカウントと連携したい場合は、「メールを共有」を選択してください。

→

→

Apple/Googleの設定などによりサインイン画面の一部が省略される場合があります。

「ログイン連携」画面に戻り、連携済みサービスの表示が切り替わります。

連携済みとなると、連携ステータスと連携ボタンの表示が以下のように切替ります。

「連携中」「停止する」のラベルは変更可能です。詳しくは、ログイン連携パーツをご覧ください。

サインインした「Apple ID」「Googleアカウント」が、ログイン中の会員IDとは別会員IDと連携済みである場合

ログイン中の会員IDとは、連携できません。左図のようにエラー表示となります。

以下のいずれかの方法で対応してください。

• 連携済みの会員情報で本ログイン後、「ログイン連携」画面にて連携解除を行います。
  さらにログアウトし、先ほどログイン中だった会員情報にて、再度連携操作を行います。
• ログイン中の会員IDとの連携をキャンセルし、連携済みの会員情報で本ログインしなおして、利用します。

Appleでサインイン時に、Apple社提供の2ファクタ認証や生体認証を、Googleでログイン時に、Google社提供の2段階認証をご利用いただけます。
詳細は下記をご確認ください。

• Apple社：Appleでサインインとプライバシー
• Google社：2段階認証プロセスに関するGoogleヘルプ

＜「Apple ID・Googleアカウントログイン」オプションに関して＞

• コマースクリエイター（切替済み）のみご利用可能です。
• この機能を利用するにはGoogleCloudやAppleDevelopersでの設定が必要です。
  AppleDevelopersは有料プラン（年間メンバーシップ料金99ドル※2022.10現在）の登録が必要です。
• 「ログイン連携」機能をご利用いただくには、会員機能のご利用が必須です。
• 会員登録を「管理者が、管理画面からのみ会員登録可能」に設定している場合はApple・Googleでの連携はできません。 (※Amazon,LINEは利用可能です。)

＜「ログイン連携」機能ご利用に関して＞

• 1つのfutureshop会員に対して、各サービスごとに1つのID/アカウントを連携可能です。（1対1）
  ログイン連携時に別の会員IDが既に連携されていた場合は、ログインしたfutureshop会員と連携されません。（連携情報の上書きはされません。）
  連携を解除してから、再度ログイン連携を行います。
• 連携しながら会員登録を行う場合は、メールによる2段階認証は行われません。
• LINE ID連携、Amazonログイン連携も、Apple/Googleと同様なログイン連携機能がお使いいただけます。
• 「Appleでサインイン」「Googleでログイン」を押下し、「会員登録確認」画面を経由して新規登録を行った場合、ECサイト会員のパスワードが設定できません。
  連携解除を行うとログインできなくなりますので、解除前に必ず、ECサイトの「ログイン」画面からパスワードリマインダー、もしくは「パスワード変更」画面を利用し、ECサイト会員情報のパスワードを設定してください。
• 「Apple ID」「Googleアカウント」連携時、ポイントやクーポンは自動的に付与されません。

「Apple」・「Google」・「Amazon」・「LINE」の、すべての連携オプションを利用している場合を例としてご説明します。

マイページ内の「ログイン連携」画面、「ショッピングカート」画面、「ログイン」画面でのボタンの並び順は、CSS、もしくはシステムパーツの並び替えにて変更可能です。
以下のページに、いくつか変更例を記載しておりますので、参考にしてください。