【Drupal】Facebookアカウントでログインできるようにする

こちらのサイトではDRUPAL10に関連する記事を掲載しています。

はじめに

せっかくウェブサイトに到達してもユーザ登録するのは色々手間が多いのでなかなかしてもらえないのが現状です。その手間を少しでも軽減するため、Googleアカウントに連携してユーザが登録できるようにしてみました

環境

Ubuntu
Composer
Drupal10(Drupal9以上)

インストール

Moduleのインストール

Composerでインストールします。

Composerのjsonファイルがあるディレクトリで以下のコマンドを実行します

composer require 'drupal/social_auth_facebook:^4.0'

続けて、Drushコマンドでアクティベートします。(管理画面の機能拡張からInstallで対象モジュールを選択して実施することも可能です)

drush pm:install social_auth_facebook:

以下のメッセージが表示されればインストールは完了です。

設定

ステップ1)Drupal側

  1. 管理者としてログインします。
  2. 設定 » ユーザー認証 » Google に移動してコピーします
    承認されたリダイレクト URL フィールドの値 (URL は次で終わる必要があります)
    /user/login/google/callback).

ステップ2)Facebook側設定

  1. Facebook アカウントにログインします。
  2. に移動します 「マイアプリ」
  3. をクリックします [アプリの作成]
  4. アプリの表示名を入力し、「アプリの作成」をクリックします。
  5. アプリのランディング ページで、[アプリに製品を追加] > [Facebook ログイン] の下にあり、[セットアップ] をクリックします。
  6. [製品] > [Facebook ログイン] で [設定] をクリックします (「クイックスタート」は使用しないでください)。
  7. ステップ 2 でコピーした URL を「有効な OAuth リダイレクト URI」フィールドに貼り付けます。
  8. [設定] > [基本] に移動します。
  9. アプリ ID 値をコピーして安全な場所に保存します。
  10. [アプリ シークレット] フィールドの [表示] をクリックします。 アプリのシークレット値をコピーし、安全な場所に保存します。
  11. [設定] > [詳細設定] に移動します。
  12. 「API バージョンのアップグレード」で、使用中の API バージョン (「14.0」など) をメモします。

ステップ3)Drupal側設定

  1. 設定 » ユーザー認証 » Facebook に戻る
  2. 「アプリ ID」フィールドに Facebook アプリ ID を入力します。
  3. 「アプリのシークレット」フィールドに Facebook アプリのシークレットを入力します。
  4. 「Facebook Graph API バージョン」フィールドに API バージョンを入力します。
  5. 「構成を保存」をクリックします。
  6. 構造 » ブロック レイアウトに移動し、サイト上のどこかにソーシャル認証ログイン ブロックを配置します (まだ配置されていない場合)。

以上で設定は完了です。

最後に、自分のアカウントでログインして接続をテストします。 さらにテストするには、「役割」>「テスト・ユーザー」に移動して、他のテスターを作成および追加します。

準備ができたら、Meta for Developers にログインし、OAuth アプリに移動し、アプリ モードを「ライブ」に変更して、Facebook アカウントを持つすべてのユーザーがログインできるようにします。

参考

Social Auth Facebook
This project is part of the Drupal Social Initiative and is based on the Social API. Social Auth Facebook allows users to register and login to your Drupal site...

Drupal Integrations
Ever wonder which modules or tools to use? Get unbiased analysis and insights on connecting your apps with Drupal. Most third-party applications and tools can b...
このサイトに関するご意見・ご質問はこちらまで

この記事またはDrupalに関するご質問がございましたら、お気軽にお問い合わせください。

タイトルとURLをコピーしました