ソーシャルログイン

CS-CartとMulti-Vendorでは、インストール時に有効化されている公式の「ソーシャルログイン」アドオンが用意されています。

「ソーシャルログイン」アドオンは、OAuth認証を簡単に行えるPHPのライブラリであるHybridAuthにより、ユーザーがFacebookやTwitter、Googleなどのソーシャル APIやIDプロバイダーを使ってログインや会員登録ができるようにします。

ソーシャルログインの設定

ソーシャルログインの設定は、以下の手順で行います。

管理画面の上部にあるメニューから「アドオン > アドオンの管理]」をクリック。

ソーシャルログインのアドオンが有効化されていることを確認してください。

ソーシャルログインの基本設定

ソーシャルログインの基本設定を行うには、管理画面の上部メニューから「アドオン > アドオンの管理」 で「ソーシャルログイン」アドオンの名前をクリックするか、「ソーシャルログイン」アドオンにマウスを乗せると表示される「歯車」マークをクリックして、プルダウンメニューから「基本設定」をクリックします。

基本設定:ソーシャルログイン
基本設定:ソーシャルログイン
  • アイコンパック:ソーシャルネットワークのアイコンサイズを選択。ディレクトリへのパス: media/images/addons/hybrid_auth/icons/
    • flat_24×24
    • flat_32×32
    • flat_64×64
  • Eメールアドレスの自動生成(非推奨):ソーシャルネットワークからメールアドレスを取得できない場合に、メールアドレスの自動生成を有効にするには、このチェックボックスをチェックします。

全ての設定が完了したら、右下の「保存」ボタンをクリックします。

他のサービスのアカウントを使用してサインイン

お客様は、ソーシャルネットワークやその他のサービスを使用してECストアにサイトにサインインできますが、これらののサービスをSNSプロバイダと呼びます。

CS-CartにはデフォルトでいくつかのSNSプロバイダーが用意されています。

「ソーシャルログイン」アドオンが有効化されていると、管理画面の上部メニューから「ウェブサイト > ソーシャルログイン」でSNSプロバイダの設定が行えます。

SNSプロバイダ
SNSプロバイダ

追加されたSNSプロバイダーには、有効か無効の選択ができます。

  • 有効
  • 無効

SNSプロバイダーが有効になり、適切に設定が行われたら、お客様はアカウントにサインインするときや、新しいSNSプロバイダを登録するときに、プロバイダを選択できるようになります。

プロバイダーを無効にすると、設定は保持されますが、ECサイトではお客様に表示されなくなります。

「ソーシャルログイン」アドオンは「JANRAIN」アドオンと一緒には使えません。

SNSプロバイダの追加

SNSプロバイダの追加をするには、以下の手順で行います。

管理画面の上部メニューから「ウェブサイト > ソーシャルログイン」でSNSプロバイダをクリック。

SNSプロバイダ
SNSプロバイダ

右上の「+」ボタンをクリック。

SNSプロバイダの追加:一般
SNSプロバイダの追加:一般

一般

ポップアップウィンドウで「SNSプロバイダの追加:一般」が開いたら、以下の情報を入力します。

  • プロバイダ:必須項目:設定するSNSプロバイダを選択します。
    • OpenID
    • AOL
    • Google
    • Facebook
    • Paypal
    • Twitter
    • Yahoo
    • Live
    • LinkedIn
    • Foursquare

以下の項目は、全SNSプロバイダ共通の項目です。

  • 名前:必須項目:ソーシャルログインの名前。
  • ステータス:SNSプロバイダの表示。
    • 有効
    • 無効

以下の項目は、Google、Facebook、Twitter、Yahoo、Live、Foursqureで表示されます。

  • ID:必須項目:
  • シークレットキー:必須項目:

以下の項目は、Paypalにのみ表示されます。

  • シームレスチェックアウトの利用:チェックボックス
  • テストモード:チェックボックス

以下の項目は、LinkedInにのみ表示されます。

  • APIバージョン:通常はv2を選択します。
    • v1
    • v2

コールバックURL

各SNSプロバイダで認証が行われた後は、ECサイトに戻してもらう必要がありますので、各SNSプロバイダの方には以下のコールバックURLを設定します。

SNSプロバイダの追加:コールバックURL
SNSプロバイダの追加:コールバックURL

Googleアカウントでソーシャルログインを行う

Googleアカウントでソーシャルログインをするには、Google Cloud Platformでのアカウント作成が必要です。

Google Cloud Platformでのアカウント作成

  1. Google Cloud Platformのアカウントを作成するための、Googleアカウントを用意してください。
  2. ブラウザでGoogle Cloud Platformを開きます。
  3. ログインを求められたら、「アカウントを作成」 をクリックして新しいアカウントを作成します。

クライアントIDを取得する

クライアントIDを取得する前に、プロジェクトを作成しておいてください。

Google Cloud Platformのホームを開き、で左上にある三本線のハンバーガーメニューをクリック。

Google Cloud Platform:ホーム
Google Cloud Platform:ホーム

メニューが開いたら、「APIとサービス > 認証情報」をクリック。

Google Cloud Platform:認証情報
Google Cloud Platform:認証情報

上部に出る「+認証情報を作成」をクリックし、プルダウンメニューが開いたら「OAuth クライアントID」をクリック。

Google Cloud Platform:OAuth クライアントIDの作成
Google Cloud Platform:OAuth クライアントIDの作成

OAuth クライアントID画面が開いたら、アプリケーションの種類を以下から選択。

  • ウェブ アプリケーション
  • Android
  • Chromeアプリ
  • iOS
  • テレビと入力が限られたデバイス
  • デスクトップ アプリ
  • ユニバーサルWindowsプラットフォーム(UWP)

アプリケーションの種類を選択すると、以下の項目が開きますので、情報を入力します。

  • 名前:エンドユーザーには表示されないので、判別ができる好きな名前を付けてください。
  • 承認済みのJavaScript生成元:設定は不要です。設定内容については、JavaScript アプリケーションからの認証済みリクエストの送信でご確認ください。
  • 承認済みのリダイレクト URI:上記で設定したコールバックURLを設定します。

設定が完了したら、「作成」ボタンをクリック。

モーダルウィンドウで「OAuth クライアントを作成しました」が表示され、作成されたクライアント IDとクライアント シークレットが確認できます。

SNSプロバイダの追加:一般
SNSプロバイダの追加:一般

このクライアント IDとクライアント シークレットを「SNSプロバイダの追加:一般」に入力して、「登録」ボタンをクリックすると、設定は完了です。