ID」と「Googleアカウント」を利用した「ログイン連携」機能について解説します。ID・Googleアカウントログインオプション」です。有料プラン」へのお申込みが別途必要になります。ID」でご利用いただけます。<「Googleアカウント」での「ログイン連携」機能を設定する場合の注意事項>店舗用のGoogleアカウントが必要になります。お客様(消費者)は通常の「Googleアカウント」でご利用いただけます。ID・Googleアカウントを使ってECサイトにログインできる機能です。IDまたはGoogleアカウントを利用することで、ログイン時にIDやパスワードの入力が不要となり、1クリックでログインできます。ID」「Googleアカウント」に登録されているお客様(消費者)の情報で、簡単に登録ができるので会員獲得率向上に繋がります。ID・Googleアカウントログインオプション」のお申込みが必要です。futureshop管理画面にログイン後、システム>各種申し込み-「オプション追加申込み」よりお申し込みください。ID」「Gooleアカウント」それぞれで設定が必要です。Developer画面は、2022.10現在のものです。Profiles画面、https://developer.apple.com/account/resources/identifiers/lisにアクセスします。IDと有料プラン(年間メンバーシップ料金99ドル※2022.10現在)の登録完了が必要です。Identifiersの横の青い[+]を押下します。IDsにチェックし[Continue]を押下します。[手順A.4]Appを選択し[continue]を押下します。ID画面で以下を設定します。Descriptionわかりやすい任意の名前をつけます。IDアプリケーションを特定するために設定します。わかりやすい名称をつけてください。Appleにチェックを入れます。完了したら[Continue]を押下します。[手順A.6]確認画面が表示されるので、設定内容を確認して[Register]を押下します。Profiles画面に戻ります。登録したアプリが表示されているか確認します。Identifiersの横の青い[+]を押下します。IDsにチェックし、[Continue]を押下します。ID画面で以下を設定します。Descriptionわかりやすい任意の名前をつけます。Identifierサービスを特定するために設定します。わかりやすい名称をつけてください。後ほどfutureshop管理画面に登録する値になります。完了したら[Continue]を押下します。[手順A.11]確認画面が表示されるので、設定内容を確認して[Register]を押下します。Profiles画面に戻ります。登録したServiceが表示されているか確認します。Configuration画面を開きます。Appleにチェックし、[Configure]を押下します。Configurationモーダルが開きます。以下を設定してください。Subdomains(ECサイトのドメイン)」の値を貼り付けます。URLs(リダイレクトURL)」の値を貼り付けます。URLs(リダイレクトURL)[手順A.15]確認モーダルが開くので[Done]を押下します。Configuration画面に戻るので、[Continue]を押下します。[手順A.17]確認画面が開くので、確認し、[Save]を押下します。Configuration画面を開きます。API情報「Identifier(ID)」に貼り付け、futureshop管理画面の[保存する]を押下します。Configuration画面は閉じて構いません。futureshop管理画面の設定>連携サービス>Apple設定「利用設定」のチェックはOFFのままにします。すべての設定完了後にONとします。Developerとの連携は完了です。Console画面は、2022.10現在のものです。Consoleにログインhttps://console.cloud.google.com/apis/dashboardにアクセスします。Googleアカウントが必要です。[手順G.2]上部の「プロジェクトの選択(もしくはプロジェクト名)▼」を押下します。「プロジェクトの選択(もしくはプロジェクト名)▼」が表示されていない場合は、左メニューから「認証情報」を選択してください。[手順G.3]表示されたモーダル内にて[新しいプロジェクト]を押下します。[手順G.4]「新しいプロジェクト」画面にて「プロジェクト名」「場所」を設定します。プロジェクト名futureshopのログインで利用することが分かりやすい名称を任意で設定します。登録はなければ「組織なし」のままで構いません。会社名などがあらかじめ登録されている場合は、そちらを選択してください。[作成]を押下します。[手順G.5][+認証情報を作成]を押下します。[手順G.6][同意画面を設定]を押下します。このボタンが表示されない場合は設定済みですので、手順14へすすんでください。スコープに対する認可がリクエストされます。同意画面がユーザーに表示されます。スコープが含まれます。[手順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]開いたドロワーメニューより、以下をチェックします。選択後、ドロワーメニューの下部にある[更新]を押下します。「非機密のスコープ」に設定が表示されます。[保存して次へ]を押下します。[手順G.11]テストユーザーを設定します。(任意)テストが必要な場合は設定してください。必要ない場合は、何も登録せず[保存して次へ]を押下します。[手順G.12]概要が表示されます。登録内容を示した「概要」画面が開きますので登録内容を確認し、ページ下部の[ダッシュボードに戻る]を押下します。「同意画面」の設定が完了しました。[手順G.13]再度、左メニューより[認証情報]を選択し、上部の[+認証情報を作成]を押下しメニューを表示します。作成」を選択してください。[手順G.14]アプリケーションの種類の選択肢から「ウェブアプリケーション」を選択します。[手順G.15]設定画面が開くので、以下の項目をそれぞれ設定します。任意の名前を登録します。ECサイト名など分かりやすいものを登録します。生成元[URIを追加]を押下し、入力欄を表示します。[URIを追加]を押下し、入力欄を表示します。Platformの設定項目「承認済みのJavaScript生成元」の値を貼り付けます。URI[URIを追加]を押下し、入力欄を表示します。Platformの設定項目「承認済みのリダイレクトURI」の値を貼り付けます。完了したら[作成]を押下します。クライアントを作成しました」というモーダル内の値をfutureshop管理画面に登録します。クライアントを作成しました」というモーダルが表示されます。API情報「クライアントID」に貼り付け、[保存する]を押下します。Google側のモーダルは[OK]を押下して閉じます。左メニューの[認証情報]を押下します。ID」に表示された該当IDの「名前」もしくは[編集]マークを押下します。画面右側に情報が表示されます。[手順G.17]アプリケーションを本番化します。Platform管理画面に戻り、アプリを本番化します。本番化の手続きを行うと、Googleによる確認が行われます。確認の際にGoogleより送られてくるメールに従い各種登録や設定を行ってください。(登録状況などにより対応方法が異なります。)なお、2023.01現在、審査中(確認中)であってもGoogleログインは利用できることが確認できております。今後のGoogleの仕様変更があった場合や他のアプリケーションを同時利用した場合にはこの限りではございませんのであらかじめご了承ください。同意画面を開き、「公開ステータス」欄に表示されている[アプリを公開]を押下します。確認モーダル確認モーダルが開きますので、[確認]を押下してください。モーダルに記載されている内容は、必ずしも求められない場合もございます。手続き後のGoogleからのメールをご確認ください。同意画面に、「確認ステータス」欄が追加され、ステータスが表示されます。[確認を準備する]を押下して、画面の指示通りに進んでください。(既に登録済みの内容が再度表示されます。)[確認を準備する]ボタン最終画面に表示される[確認のため送信]を押下し、手続きは完了です。[確認のため送信]ボタンこの後については、Googleからのメールをよく読みご対応ください。futureshop管理画面の設定>連携サービス>Google設定「利用設定」のチェックはOFFのままにします。すべての設定完了後にONとします。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でサインインメッセージ初期値はありません。ID」ボタンの上に表示できます。IDでログインし、お買い物していただけます。ショッピングカートGoogleでログインメッセージ初期値はありません。「Googleでログイン」ボタンの上に表示できます。<注意事項>ログイン済み(仮ログイン状態含む)の場合は、「Appleでサインイン」「Googleでログイン」のボタンや関連する文言は表示されません。「ログイン」画面に表示されるメッセージを調整する「Appleでサインイン」「Googleでログイン」のボタン周りに表示されるメッセージを調整できます。「ショッピングカートログイン(定期含)」「マイページ/お気に入り/レビュー/LINEログイン」画面すべてに表示されます。設定画面:コマースクリエイター>メッセージ「ログイン」画面-連携ログインパーツもご参照ください。各ボタン周りに表示するメッセージについて、それぞれ以下で設定できます。ボタンの表示順は変更できます。[参考]ボタンの並び替え方法をご覧ください。連携ログインメッセージ初期値はありません。(例文)[連携ログインメッセージ]以下のIDやアカウントでもログイン・会員登録できます。Appleでサインインメッセージ初期値はありません。「Appleでサインイン」ボタンの上に表示できます。IDでログインし、ログイン・会員登録していただけます。Googleでログインメッセージ初期値はありません。「Googleでログイン」ボタンの上に表示できます。[参考]Amazonログインメッセージ初期値はありません。「amazonでログイン」ボタンの上に表示できます。※2022.10.19以前からご利用の店舗様は、初期値として「Amazon.co.jpにご登録の情報を利用してログインまたは会員登録されるお客様は、「Amazonアカウントでログイン」ボタンよりお進みください。」と表示されています。<注意事項>Amazonの連携機能をご利用いただくには、別のオプション契約が必要です。ご契約されていない場合は、表示されません。いずれかの連携サービスのID/アカウントでログインした際、同一のメールアドレスで既に会員登録されている場合、以下のメッセージが表示されます。それぞれ以下で設定できます。IDでログイン連携済みGoogleアカウントでログイン連携済み[参考]amazonアカウントでログイン連携済み※2022.10.19以前からご利用の店舗様は表示メッセージの初期値が異なりますのでご注意ください。メッセージ名メッセージ内容(初期値)Appleログイン後メッセージAppleから取得したメールアドレスで、既に会員登録があります。他の方法でログインしていただき、マイページからログイン連携へお進みください。Googleログイン後メッセージGoogleから取得したメールアドレスで、既に会員登録があります。他の方法でログインしていただき、マイページからログイン連携へお進みください。[参考]Amazonログイン後メッセージAmazonから取得したメールアドレスで、既に会員登録があります。他の方法でログインしていただき、マイページからログイン連携へお進みください。※2022.10.19以前からご利用の店舗様は、初期値として「会員にご登録済みの場合は、ログインしてください。(次回以降はAmazonログインのみでログインできます。)」(メッセージ)」と表示されています。ID」「Googleアカウント」ログイン連携ご利用時の画面遷移をご覧ください。「マイページトップ」に「ログイン連携」画面へ遷移するメニューを表示する設定画面:設定>購入者・会員情報>会員設定-マイページ設定「ログイン連携設定」マイページトップ表示イメージ「マイページトップ」からログイン連携状態を確認するための「ログイン連携」画面へ遷移するメニューを表示させます。本設定をしないと、会員の方がログイン連携を解除できなくなりますので、必ず設定してください。設定>購入者・会員情報>会員設定-マイページ設定「ログイン連携設定」にチェックします。表示イメージの詳細はマイページトップパーツをご覧ください。マイページ内「ログイン連携」画面の表示を確認・調整する<注意事項>Amazon・LINEの連携機能をご利用いただくには、別のオプション契約が必要です。ご契約されていない場合は、表示されません。「ログイン連携」(見出し)コマースクリエイター>フリーパーツで設定します。初期値では、「ログイン連携」となっています。「連携サービスを利用してログインするには、ご利用のサービスのボタンよりお進みください。連携はいつでも停止できます。」(メッセージ)コマースクリエイター>メッセージにある「ログイン連携コメント」を表示できます。「未連携」(連携ステータス)コマースクリエイター>メッセージにある「ログイン連携メッセージ(未連携)」を表示できます。このメッセージが表示されている場合は、各連携サービスとの未連携状態ですので、連携用ボタンが表示されます。「Apple」の連携ボタン(ボタン)コマースクリエイター>テーマ>テーマ設定にあるApple設定で設定したボタンが表示されます。IDとECサイトの会員IDが連携されます。「Google」の連携ボタン(ボタン)コマースクリエイター>テーマ>テーマ設定にあるGoogle設定で設定したボタンが表示されます。押下すると、GooglアカウントとECサイトの会員IDが連携されます。[参考]「Amazon」の連携ボタン(ボタン)コマースクリエイター>テーマ>テーマ設定にあるAmazon設定で設定したボタンが表示されます。押下すると、各アカウント情報とECサイトの会員IDが連携されます。ID連携-ログイン連携ボタン」を表示できます。ID連携」画面(スマートフォンのみ)に遷移します。連携済みの場合の[連携停止]ボタンボタンの表示順は変更できます。[参考]ボタンの並び替え方法をご覧ください。「連携中」(連携ステータス)コマースクリエイター>メッセージにある「ログイン連携メッセージ(連携中)」を表示できます。このメッセージが表示されている場合は、各連携サービスとの連携済みですので、連携停止用のボタンが表示されます。[停止する](ボタン)コマースクリエイター>テーマ>ボタンにある「停止する-ログイン連携」を表示できます。押下すると、「ログイン連携停止」モーダルが開きます。「ログイン連携停止」モーダル「ログイン連携停止」(見出し)コマースクリエイター>メッセージにある「ログイン連携停止タイトル」を表示できます。ログイン連携停止-ログイン連携」ボタンが表示されます。押下すると、該当のサービスとの連携が解除されます。[キャンセル]ボタンコマースクリエイター>テーマ>ボタンにある「キャンセル-共通」ボタンが表示されます。押下すると、該当のサービスとの連携解除をキャンセルし、「ログイン連携」画面に戻ります。ID」「Googleアカウント」を利用して会員登録する画面の表示を確認・調整する「Apple/Google」で連携をして、新規会員登録を行う場合、新規で追加される画面となります。(見出し)コマースクリエイター>フリーパーツで設定します。「Googleにご登録の情報を利用して会員登録いたします。」(メッセージ)コマースクリエイター>メッセージで各連携サービスごとに表示できます。連携サービス表示メッセージAppleAppleにご登録の情報を利用して会員登録いたします。GoogleGoogleにご登録の情報を利用して会員登録いたします。[会員登録]ボタンコマースクリエイター>テーマ>ボタンにある「会員登録-会員登録確認」ボタンが表示されます。押下すると、各サービスの連携情報を利用し、会員登録します。ログイン連携も完了となります。[キャンセル]ボタンコマースクリエイター>テーマ>ボタンにある「キャンセル-会員登録確認」ボタンが表示されます。メールマガジンの購読」チェック表示についてをご確認ください。「利用する」チェックをOFFのままご確認ください。コマースクリエイター>テーマ一覧よりプレビューしたいテーマを選択し、プレビューボタンを押下します。「デザイン確認」モードを選択し、表示が意図通りになっているかをご確認ください。プレビューで表示を確認すべき画面は以下の通りです。各画面で利用されているメッセージやボタンについても、各画面のマニュアルにてご確認ください。各ログインボタンは、未ログイン状態でなければ表示されません。確認時には、ログアウトしているかをご確認ください。(新規画面)ログイン連携をして会員登録を行う際の画面表示を確認プレビュー機能についてはプレビューモードの機能別動作についてをご覧ください。画面遷移については画面遷移についてをご覧ください。ID」「Googleアカウント」での「ログイン連携」機能のご利用を開始する設定>連携サービス>Google設定-利用設定/設定>連携サービス>Apple設定-利用設定のチェックをONにします。ID」「Googleアカウント」での「ログイン連携」機能をご利用いただけるようになりました!【ご利用開始後】ログイン連携の顧客数や売上貢献度状況を確認する(推奨)futureshop管理画面の以下のreports画面では、会員ID連携別(Amazon・LINE・Apple・GoogleとのID連携会員)に「連携会員数の推移」や、「売上に貢献している連携サービスの傾向」などを、ボタン一つで簡単に確認していただけます。関するグラフを重ね合わせて表示することもでき、相関関係や傾向比較をすることができます。【1】「顧客数(ID連携別)」レポートreports>顧客レポート>顧客数(ID連携別)から確認できます。Amazon・LINE・Apple・Googleのアカウント/ID連携会員の、登録数の推移や割合を、期間を区切ってグラフでみることができます。ログイン連携機能ご利用開始から、どれくらい連携数が伸びているか、またどの連携サービスが最もよく使われる傾向にあるか、などを検証することができます。【2】「注文(ID連携別)」レポートreports>注文レポート>注文(ID連携別)から確認できます。Amazon・LINE・Apple・Googleのアカウント/ID連携会員別に、どれくらい注文しているかをグラフで確認することができます。会員登録のしやすさ、ログインのしやすさにより、購入へのハードルが軽減したか、など売上の貢献度を検証することができます。Apple社、Google社が提供する2段階認証や生体認証についてAppleでサインイン時に、Apple社提供の2ファクタ認証や生体認証を、Googleでログイン時に、Google社提供の2段階認証をご利用いただけます。詳細は下記をご確認ください。生体認証は消費者側のデバイス設定によります。ID・Googleアカウントログイン」オプションに関してコマースクリエイター(切替済み)のみご利用可能です。この機能を利用するにはGoogleCloudやAppleDevelopersでの設定が必要です。AppleDevelopersは有料プラン(年間メンバーシップ料金99ドル※2022.10現在)の登録が必要です。「ログイン連携」機能をご利用いただくには、会員機能のご利用が必須です。会員登録を「管理者が、管理画面からのみ会員登録可能」に設定している場合はApple・Googleでの連携はできません。(※Amazon,LINEは利用可能です。)「ログイン連携」機能のご利用に関して1つのfutureshop会員に対して、各サービスごとに1つのID/アカウントを連携可能です。(1対1)ログイン連携時に別の会員IDが既に連携されていた場合は、ログインしたfutureshop会員と連携されません。(連携情報の上書きはされません。)連携を解除してから、再度ログイン連携を行います。連携しながら会員登録を行う場合は、メールによる2段階認証は行われません。ID連携、Amazonログイン連携も、Apple/Googleと同様なログイン連携機能がお使いいただけます。経由して新規登録を行った場合、ECサイト会員のパスワードが設定できません。連携解除を行うとログインできなくなりますので、解除前に必ず、ECサイトの「ログイン」画面からパスワードリマインダー、もしくは「パスワード変更」画面を利用し、ECサイト会員情報のパスワードを設定してください。ID」「Googleアカウント」連携時、ポイントやクーポンは自動的に付与されません。「Apple」・「Google」・「Amazon」・「LINE」の、すべての連携オプションを利用している場合を例としてご説明します。マイページ内の「ログイン連携」画面、「ショッピングカート」画面、「ログイン」画面でのボタンの並び順は、CSS、もしくはシステムパーツの並び替えにて変更可能です。以下のページに、いくつか変更例を記載しておりますので、参考にしてください。各ログイン連携用のボタンは、初期値では「Apple」「Google」「Amazon」「LINE」の並びで表示されます。「ログイン」画面では、「Apple」「Google」「Amazon」について、CSSで変更可能です。「LINE」は別のシステムパーツで出力されるため、表示位置は一番下か上に限られます。「ショッピングカート」画面では、「LINE」は表示されず、「Amazon」は別のシステムパーツで出力されるため、CSSでは「Apple」「Google」のみ変更可能です。「Amazon」を一番上に表示したい場合は、システムパーツの位置を変更します。reserved.コマースクリエイターでのショップ開店がはじめての方ご利用状況コマースクリエイタ。