Auth0を使ってFacebookのソーシャルログイン機能を試してみた
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
認証認可サービス「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 Login の Set 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 ID と App Secret を、のちほどAuth0の設定で利用するのでメモしておいてください。
App Secret の値は、 Show ボタンをクリックすることで表示できます。
これで、Facebook側の設定は完了です。
Auth0の設定
次にAuth0の設定をしていきます。
左側のメニューから、 Connections > Social を開いて、 CREATE CONNECTION をクリックします。
一覧の中から、 Facebook を選択します。
Facebookの各種設定入力を促されるので、先ほどメモしておいた、 App ID と App Secret を入力してください。
入力が終わったら、下の方までスクロールしていき、 CREATE ボタンをクリックします。
そうすると、アプリケーション（クライアント）の一覧画面が表示されるので、有効にしたいアプリケーションのフリップをオンにします。
これで、Auth0側の設定は完了です。
Facebookログインを試す
設定が完了したので、Auth0を使ったFacebookログインを試してみます。 今回はお試しですので、Auth0の Try Connection でやってみます。
左側のメニューから、 Connections > Social を開くと、ConnectionにFacebookが追加されています。 Facebookの右側の … ボタンでメニューを開いて、 Try Connection をクリックします。
そうすると、Facebookの画面に飛んで、こんな感じでFacebookのアプリでログインする説明が表示されるので、そのままログインします。
サインインが完了すると、次のようにFacebookログイン時に取得したユーザー情報が確認できます。
終わりに
Auth0でFacebookログインを試してみました。
Auth0側での設定も簡単ですぐに試すことができました。
他のソーシャルメディアログインもいろいろ試してみようと思います。
