昨今のサイトはログインする際にSNS連携しているところが多いです。
もちろん、concrete5も対応しています！
|
目次 |
concrete5 で使える認証タイプ
インストール後、設定すればすぐに使える認証タイプは以下の5種類です。
- concrete5内に登録されているアカウントを利用した認証
- concrete5.orgアカウントを利用した認証
- Facebookアカウントを利用した認証
- Twitterアカウントを利用した認証
- Googleアカウントを利用した認証
その他、外部システムを利用した認証を使うのに利用する「external_concrete5」という認証形式と、有償アドオンになりますがLDAP認証も使えます。
今回は、Facebookアカウントを用いた認証の設定方法を解説しましょう。
Facebook 認証を設定してみよう
Facebook 認証を使うためには、FacebookのログインAPIが必要です。その管理は Facebook for developers で行えるのですが、利用するにはFacebookアカウントが必要です。会社独自のFacebookアカウントがあるのであればそれを利用してください。
はじめてFacebook for developers を利用される方は、あらかじめログインし、表示されている「今すぐ登録」ボタンをクリックして、利用を開始します。
1. Facebook 認証に必要な情報を取得する
Facebook 認証には「有効なOAuthリダイレクトURI」と「コールバックURLの許可の取り消し」の設定が必要です。これは concrete5 から取得できますので、コピーしておきましょう。
管理画面 > システムと設定 > ログインとユーザー登録 > 認証タイプ > Facebook を表示すると、トップに表示されます。赤文字で表示されているURIをコピーします。
「アクセスキーの取得はこちらから。」より、Facebook for developers に遷移することができます。
2. アプリIDを作成する
ログインAPIを利用するために、まずアプリIDを生成する必要があります。
Facebook for developers のダッシュボードを表示し、「新しいアプリを追加」をクリックします。
表示された画面に必要な情報を入力して [アプリIDを作成してください] をクリックしましょう。表示名は公開されませんので、管理上分かりやすい名前を設定してください。
クリック後、セキュリティチェックが入りますのでそれに従います。
作成が完了すると、ダッシュボードに遷移します。
3. FacebookログインAPIを設定する
では、続けてログインAPIを追加しましょう。
ダッシュボードの「製品を追加」一覧に「Facebookログイン」の [設定] をクリックします。
プラットフォームを一覧から選択します。「ウェブ」をクリックします。
1. ウェブサイトの情報を入力する でサイトURLを入力します。入力が完了したら [Save] をクリックし、画面左にあるメニューから Facebookログイン > 設定 をクリックします。
※ 2以降の操作は必要ありません。
表示された設定画面の「有効なOAuthリダイレクトURI」と「コールバックURLの許可の取り消し」欄に、Facebook 認証に必要な情報を取得する で取得した情報を入力します。
入力が完了したら、ページ下の [変更を保存] をクリックします。
4. 利用規約・プライバシーポリシーのURLを設定する(2020/07/21 追記)
ダッシュボード > 設定 > ベーシック を表示します。
プライバシーポリシーのURL と、利用規約のURL を設定します。これらは、ユーザーが Facbook 認証をはじめて利用する際に表示されるダイアログに表示されます。利用規約URLは任意ですが、プライバシーポリシーURLは設定する必要があります。
※ プライバシーポリシーURLが開発環境等でBasic認証などにかかっていてFacebook側からアクセスできないと、ライブモードに切り替えることができません。ライブモードに切り替える際は、Facebook側からアクセスできるURLを設定してください。
入力が完了したら、ページ下の [変更を保存] をクリックします。
5. App ID と App シークレットキーを取得する
ダッシュボード > 設定 > ベーシック を表示します。
ページ上部に表示されている「アプリID」「app secret」をコピーしておきましょう。
「app secret」は [表示] をクリックすることでコピーすることができます。
これらは concrete5 側の設定で利用します。
6. Facebook 認証を有効化する
concrete5 側の設定に戻ります。
管理画面 > システムと設定 > ログインとユーザー登録 > 認証タイプ > Facebook を表示します。
App IDとApp シークレットキーを取得する で取得した「アプリID」を「App ID」に、「app secret」を「App シークレット」に設定し、ページ右下の [保存] をクリックします。保存が完了したら、今度は [有効] をクリックします。
有効化すると、認証タイプ 一覧の「facebook」の背景色が緑色になります。
ログインページを表示すると、Facebook ログインフォームが追加されていますので、確認してください。
開発モードとライブモード
ここまでの設定では、アプリを作成したFacebookユーザー以外はconcrete5 アカウントとの連携を行うことができません。
実際に、アプリを作成したFacebookユーザー以外で登録や連携しようすると右記のようなエラーが表示されます。
この状態は「開発モード」といい、ダッシュボードを表示したときにアプリIDの横に表示される「開発中」がそれを表しています。
別のユーザーで連携を検証したい場合は、ダッシュボードメニューの役割 > 役割 よりテストユーザー（テスター）を追加することで対応可能です。
もうすでにサイトを公開済みであったりした場合は、ダッシュボード上部にある「開発中」をクリックすることで通常運用可能な「ライブモード」に変更することができます。
Facebook アカウントと concrete5 アカウントの連携について
concrete5 の認証タイプ（Facebook）の設定ページで「自動登録を有効化」にチェックを入れていると、Facebook アカウントでログインしようとしたときに、同じメールアドレスが concrete5 側に登録されていなかった場合は concrete5 にユーザー登録ができます。
すでにユーザー登録されていて、あとから Facebook アカウントと連携したい場合は別途ユーザー側で連携処理をしてもらう必要があります。
連携したいアカウントでログイン後、マイアカウントページを表示します。
マイアカウントページへのアクセス方法は利用しているテーマによって異なるため割愛します。管理画面にアクセスできる場合は、管理メニュー下部に表示されている「[ユーザー名]としてログイン中」と表示されている [ユーザー名] をクリックすることでアクセスが可能です。
ページ中段にある「認証タイプ」に表示されている [Facebook アカウントを接続] をクリックします。
Facebookの連携画面が表示されます。「[Facebookユーザー名]としてログイン」をクリックすると連携処理が完了します。自動的に concrete5 に戻り「ユーザー情報が正常に同期されました。」と表示されればOKです。
終わりに
いかがでしたか？
今回ご紹介した設定内容は、あくまでconcrete5でログインできるように設定した最低限のものになります。
その他細かい設定について知りたい場合は、公式サイトの Facebookログインに関するドキュメント を参照してください。
