ソーシャルログイン
CS-CartとMulti-Vendorでは、インストール時に有効化されている公式の「ソーシャルログイン」アドオンが用意されています。
このアドオンは、OAuth認証を簡単に行えるPHPのライブラリ「HybridAuth」を使い、お客様がGoogleやFacebookなどのソーシャルAPIやIDプロバイダーで、ログインや会員登録をできるようにします。外部サービスの画面は変更されることがありますので、外部サービス側の手順は、流れを説明します。
このページでは、以下の内容を説明します。
- ソーシャルログインの設定
- SNSプロバイダ
- SNSプロバイダの追加
- Googleアカウントでソーシャルログインを行う
- Facebookアカウントでソーシャルログインを行う
- X（旧Twitter）アカウントでソーシャルログインを行う
ソーシャルログインの設定
管理画面の左メニューから「アドオン > ダウンロードしたアドオン」をクリックし、「ソーシャルログイン」アドオンが有効になっていることを確認します。
アドオンの名前をクリックして設定画面を開き、「基本設定」タブをクリックします。
- アイコンパック：ソーシャルネットワークのアイコンの大きさを、「flat_24x24」「flat_32x32」「flat_64x64」から選びます。アイコンの保存先は、
media/images/addons/addons/hybrid_auth/icons/です。 - Eメールアドレスの自動生成（非推奨）：SNSサービスからEメールアドレスを取得できない場合に、仮のEメールアドレスを自動生成します。非推奨の設定です。
設定が終わったら、右上の「保存」をクリックします。
注意：「ソーシャルログイン」アドオンは、「Janrain」アドオンと一緒には使えません。
SNSプロバイダ
お客様がログインに使うソーシャルネットワークなどのサービスを、SNSプロバイダと呼びます。SNSプロバイダは、管理画面で追加し、外部サービス側の設定とあわせて有効にします。
「ソーシャルログイン」アドオンが有効になっていると、管理画面の左メニュー下の「基本設定」をクリックして開く一覧に、「ソーシャルログイン」が表示されます。
「ソーシャルログイン」をクリックすると、「SNSプロバイダ」の一覧が開きます。追加したSNSプロバイダは、「有効」か「無効」を選べて、無効にしても設定は残りますが、ECサイトのお客様には表示されなくなります。
SNSプロバイダが有効で、正しく設定されていると、お客様は、ログインするときや新しいSNSプロバイダを登録するときに、プロバイダを選べるようになります。
SNSプロバイダの追加
「SNSプロバイダ」の一覧で、右上の「SNSプロバイダの追加」ボタンをクリックします。
「SNSプロバイダの追加」のダイアログが開きますので、「一般」タブで以下を入力します。
- プロバイダ：必須。設定するSNSプロバイダを、「Google」「Facebook」「X」「Telegram」から選びます。
- 名前：必須。管理用の名前。
- ID：必須。外部サービスで発行されたIDです。Telegramでは「ボットID（名前）」と表示されます。
- シークレットキー：必須。外部サービスで発行されたシークレットキーです。Telegramでは「ボットトークン」と表示されます。
- ステータス：「有効」か「無効」を選びます。
プロバイダを選ぶと、「名前」の下に、そのプロバイダ用の案内が表示されます。入力が終わったら、右下の「登録」をクリックします。
コールバックURL
各SNSプロバイダでの認証が終わった後は、ECサイトに戻ってもらう必要があるため、外部サービス側に、「コールバックURL」タブのURLを登録します。URLの末尾は、選んだプロバイダの名前です。
Googleアカウントでソーシャルログインを行う
Googleアカウントでソーシャルログインをするには、Google Cloud Platformでプロジェクトを作成し、発行された「クライアントID」と「クライアントシークレット」をCS-Cartに登録します。Google Cloud Platformを使うには、Googleアカウントが必要です。
- Google Cloud Platformを開き、プロジェクトを作成します。
- メニューの「APIとサービス > 認証情報」で、「認証情報を作成」から「OAuth クライアントID」を選びます。
- アプリケーションの種類は「ウェブ アプリケーション」で、「名前」は判別しやすい名前にします（お客様には表示されません）。
- 「承認済みのリダイレクトURI」に、CS-Cartの「コールバックURL」タブに表示されたURLを入力します。「承認済みのJavaScript生成元」の設定は不要です。
- 「作成」をクリックすると、「クライアントID」と「クライアントシークレット」が表示されます。
CS-Cartの「SNSプロバイダの追加」ダイアログで「プロバイダ」に「Google」を選び、「名前」を入力します。「クライアントID」を「ID」に、「クライアントシークレット」を「シークレットキー」に貼り付け、「ステータス」を「有効」にして、「登録」をクリックすると、設定は完了です。
Facebookアカウントでソーシャルログインを行う
Facebookアカウントでソーシャルログインをするには、Facebook for Developersでアプリを作成し、発行された「App ID」と「App Secret」をCS-Cartに登録します。
「SNSプロバイダの追加」ダイアログで「プロバイダ」に「Facebook」を選び、「名前」に管理用の名前を入力します。「コールバックURL」タブをクリックして、表示されるコールバックURLをコピーします。
次に、Facebook for Developersに登録し、「マイアプリ」から新しいアプリを作成します。アプリ名は、お客様がFacebookでサインインするときに表示されるため、ECサイトの名前がおすすめです。
作成したアプリに「Facebookログイン」のユースケースを追加し、Facebookログインの設定にある「有効なOAuthリダイレクトURI」に、先ほどコピーしたコールバックURLを入力します。
アプリの基本設定で「App ID」と「App Secret」をコピーし、CS-Cartのダイアログに戻って、「ID」と「シークレットキー」に貼り付けます。「ステータス」を「有効」にして、右下の「登録」をクリックします。
この時点では、管理者自身のFacebookアカウントだけがサインインできます。お客様にも使ってもらうには、Facebook側でアプリを「ライブモード」に切り替えます。
注意：ライブモードへの切り替え時に、プライバシーポリシーのリンクなどの入力をFacebookから求められる場合があります。
X（旧Twitter）アカウントでソーシャルログインを行う
X（旧Twitter）アカウントでソーシャルログインをするには、X Developer Portalでアプリを作成し、発行された「API Key」と「API Key Secret」をCS-Cartに登録します。CS-Cartの画面では、プロバイダ名は「X」と表示されます。
X Developer Portalでデベロッパーアカウントを作成します。認証の設定だけであれば、無料版で足ります。
「+ Add app」でアプリを作成します。自動で作られる「Default project」のアプリを使うことも可能です。
アプリの「User authentication settings」で「Setup」（設定済みの場合は「Edit」）をクリックし、以下の項目を設定します。
- App permissions：アプリに与える権限。
- Type of App：「Web App」を選びます。
- Callback URI / Redirect URL：CS-Cartの「SNSプロバイダの追加」ダイアログの「コールバックURL」タブに表示されるURL。
- Website URL：ECサイトのURL。
「Save」をクリックして、設定を保存します。
アプリの「Keys and tokens」タブを開き、「Consumer Keys」の「Regenerate」をクリックして、「API Key」と「API Key Secret」をコピーします。
CS-Cartの「SNSプロバイダの追加」ダイアログで、「プロバイダ」に「X」を選びます。「名前」に管理用の名前を入力し、「API Key」を「ID」に、「API Key Secret」を「シークレットキー」に貼り付けます。「ステータス」を「有効」にして、右下の「登録」をクリックすると、設定は完了です。
Telegramアカウントでソーシャルログインを行う
Telegramでは、Telegramアプリでボットを作成し、受け取った「ボットID（名前）」と「ボットトークン」をCS-Cartに登録します。「SNSプロバイダの追加」ダイアログで「プロバイダ」に「Telegram」を選ぶと、ボットIDとボットトークンの入力欄が表示されます。
また、ボットの「/setdomain」コマンドで、ECサイトのドメインを設定しておく必要があります。