Auth0を使ってFacebookのソーシャルログイン機能を試してみた

認証認可サービスのAuth0を利用して、Facebookのソーシャルログイン機能を試してみました。その方法を画面つきで説明します。
2020.06.29

認証認可サービス「Auth0」はさまざまな接続方式に対応した、とても簡単に認証機能を使えることが特徴のサービスです。

本ブログではAuth0のFacebook連携を使って、 Facebookのソーシャルログイン機能 を試してみます!

前提条件

Auth0のアカウントは発行している前提 で進めます。

Auth0のアカウント作成手順は、弊社ブログで詳しく説明していますので、こちらをご参照ください。

Facebook for Developersへの登録

まず初めに、Facebook for Developersへの登録が必要です。

Facebook for Develpersへの登録は、Facebookアカウントがあれば誰でも作ることができます。

Facebookアプリの登録

Facebookt for Developersへの登録が完了したら、次にFacebookアプリを作ります。 トップページの My Apps をクリックします。

My Appsのページが開くので、 Add a New App をクリックします。

そうすると入力画面がポップアップするので、 次の項目を入力して、 Create APP ID をクリックして登録を完了させます。

項目 説明
Display Name アプリケーションの表示名
Contact Email 連絡先用E-mail

Facebookアプリの登録が完了すると、こんな風にダッシュボード画面が開きます。
そこから、 Facebook LoginSet Up を開きます。

QuickStart画面が表示されますので、 Web を選択します。

Site URL を入力してSave後、 Settings 画面を開きます。

次の項目を入力して、 Save Changes します。

項目 説明
Valid OAuth Redirect URIs サインイン時に許可するコールバックURL。入力値は後述。

Valid OAuth Redirect URIs については、Auth0の作成済みのテナントのドメインのコールバックURLを設定します。

https://<<YOUR_TENANT_NAME>>.auth0.com/login/callback

入力できたら、左側のメニューから Settings > Basic を開いてください。
App IDApp Secret を、のちほどAuth0の設定で利用するのでメモしておいてください。
App Secret の値は、 Show ボタンをクリックすることで表示できます。

これで、Facebook側の設定は完了です。

Auth0の設定

次にAuth0の設定をしていきます。
左側のメニューから、 Connections > Social を開いて、 CREATE CONNECTION をクリックします。

一覧の中から、 Facebook を選択します。

Facebookの各種設定入力を促されるので、先ほどメモしておいた、 App IDApp Secret を入力してください。

入力が終わったら、下の方までスクロールしていき、 CREATE ボタンをクリックします。

そうすると、アプリケーション(クライアント)の一覧画面が表示されるので、有効にしたいアプリケーションのフリップをオンにします。

これで、Auth0側の設定は完了です。

Facebookログインを試す

設定が完了したので、Auth0を使ったFacebookログインを試してみます。 今回はお試しですので、Auth0の Try Connection でやってみます。

左側のメニューから、 Connections > Social を開くと、ConnectionにFacebookが追加されています。 Facebookの右側の ボタンでメニューを開いて、 Try Connection をクリックします。

そうすると、Facebookの画面に飛んで、こんな感じでFacebookのアプリでログインする説明が表示されるので、そのままログインします。

サインインが完了すると、次のようにFacebookログイン時に取得したユーザー情報が確認できます。

終わりに

Auth0でFacebookログインを試してみました。

Auth0側での設定も簡単ですぐに試すことができました。
他のソーシャルメディアログインもいろいろ試してみようと思います。