「ソーシャルログイン（Google / Facebook）」を連携する

「ソーシャルログイン（Google / Facebook）」を連携する

Ameliaのソーシャルログインオプションを利用すると、お客様とスタッフが既存のGoogleまたはFacebookアカウントでログインしたり、個人情報を自動入力したりできます。これにより、予約プロセスがシンプルになり、ユーザー体験が向上し、手動でのデータ入力ミスを防ぐことができます。

ソーシャルログインが便利な理由

美容院、ネイルサロン、コンサルティングビジネスなど、どのようなビジネスでも、ユーザーが既存のGoogleアカウントやFacebookアカウントでログインできるようにすると、以下のような重要なメリットが得られます。

• 名前やメールアドレスを手動で入力する必要がなくなり、予約がより速く、簡単になります。
• システム内の入力ミスや無効なデータが減少します。
• お客様マイページやスタッフマイページにシームレスにアクセスできるようになります。
• ユーザーの抵抗を減らし、予約完了を促します。

コンテンツ

• Googleログインの設定
• Facebookログインの設定

注意: ソーシャルログインを利用するには、ログインに使用するメールアドレスが、ユーザーがログインするマイページに応じて、スタッフまたはお客様してAmeliaに登録されている必要があります。

Googleログインの設定

Googleログインにより、ユーザーは以下のことが可能になります。

• 予約フォームに名前とメールアドレスを自動入力する。
• お客様マイページまたはスタッフマイページに直接ログインする。

AmeliaでGoogleログインを有効にする

1. 「Amelia」＞「設定」＞「連携」＞「ソーシャルログイン」に移動します。
2. 「Googleログイン」のトグルを有効にし、「保存」をクリックします。

これにより、予約フォームとマイページでGoogleログイン機能が有効になります。このオプションを有効にした後、Googleの認証情報の設定に進んでください。

GoogleクライアントIDとシークレットを取得する

Google Cloud Consoleの認証情報が必要です。「Googleカレンダーを連携する」に記載されている手順に従って取得してください。

承認済みのJavaScriptオリジンを追加する

Google Cloud Consoleで以下の手順を実行します。

1. 「認証情報」に移動し、「OAuth 2.0クライアント」を選択します。
2. 「承認済みのJavaScriptオリジン」までスクロールします。
3. ウェブサイトのドメイン（例: https://yourwebsite.com）を追加します。

これは、ログイン中にブラウザのセキュリティエラーを回避するために必要です。

Facebookログインの設定

Facebookログインは、予約時の自動入力とマイページログインの両方をサポートしていますが、セットアップにはさらに多くの手順が必要です。

📌注: 認証済みのMeta開発者アカウントが必要です。詳細な手順については、Metaの公式ドキュメントをご覧ください。

1. Meta開発者アカウントを作成する

Meta for Developersにアクセスしてサインインするか、アカウントを作成してください。

Meta for Developersアカウントを作成する

「利用を開始」をクリック。

「次へ」をクリック。

電話番号を入力して、「認証SMSを送信」をクリック。

SMSに届いた認証番号を入力して「次へ」をクリック。

メールアドレスを入力して、「認証メールを送信」をクリック。

メールに届いた認証番号を入力して「次へ」をクリック。

当てはまる職種を選択して「登録完了」をクリックすれば、アカウント作成は完了です。

2. 新しいアプリを作成する

「アプリ」＞「アプリを作成」へ移動します。

アプリの種類を選択し、必要な詳細を入力します。

次にユースケースを選択します。

「Facebookログインでの承認およびユーザーデータをリクエスト」にチェックを入れ、「次へ」をクリックします。

「新規作成できます」からビジネスポートフォリオを作成して、「次へ」をクリック。

要件はそのままスキップして「次へ」をクリック。

下にスクロールして「ダッシュボードに移動」をクリックして完了です。

3. OAuth設定を構成する

アプリダッシュボードで、以下の手順を実行します。

「ユースケース」＞「カスタマイズ」をクリック。

「Facebookログイン」＞「設定」に移動します。

以下の項目を有効にします。 ✅ クライアント OAuth ログイン ✅ Web OAuth ログイン

以下の2つを追加して、「変更を保存」を保存。

• 有効な OAuth リダイレクト URI: https://yourwebsite.com/
• JavaScript SDKで許可されたドメイン: 正確なドメイン

4. 許可を要求する

「アクセス許可と機能」に移動し、以下のアクセスをリクエストします。

• email
• public_profile

5. ビジネスを認証する

Metaのビジネス認証プロセスを完了するために必要なドキュメントをアップロードします。

6. レビューのために提出する

設定が完了したら、アプリを送信してレビューと承認を受けます。

7. App IDとシークレットを取得する

Meta開発者ダッシュボードで、「アプリ」＞「設定」＞「基本」に移動し、以下の内容をコピーします。

• アプリID
• アプリシークレット

8. AmeliaでFacebookログインを有効にする

WordPress管理画面で、以下の手順を実行します。

1. 「Amelia」＞「設定」＞「連携」＞「ソーシャルログイン」に移動します。
2. 「Facebookログイン」のトグルを有効にします。
3. 取得したアプリIDとアプリシークレットを貼り付けます。
4. 「保存」をクリックします。

GoogleまたはFacebookのログインが有効になり、適切に設定されると、お客様マイページとスタッフマイページに、対応するログインボタンが直接表示されます。

ボタンは、GoogleとFacebookのブランドに従ってスタイル設定されています。