Facebookのソーシャルログインの設定方法のメモ

Facebookログインとは、ユーザーが新しくアカウントを作成することなく、Facebookアカウントを使ってサービスにログインできる仕組みです。

Webサイトやアプリにおいて、ユーザー登録のハードルを下げるために「ソーシャルログイン」を導入するケースが増えています。中でもFacebookログインは、多くのユーザーが利用しているため有効です。

本記事は、弊社がFacebookのソーシャルログインの開発者ツール側でやった設定をメモ代わりに残したものです。

facebookログインの設定

まずは、Meta for Developersからログインしてください。

アプリの作成

「アプリを作成」を選びます。

「アプリ名」と「メールアドレス」を入力し、次へ。

「Facebookログインでの承認およびユーザーデータのリクエスト」を選択し、次へ。

リンクしたいアカウントを選ぶ。なければなしで次へ。

そのまま次へ。

特に変更なければ「アプリを作成」へ。

アクセス権限設定

ユースケースをカスタマイズからアクセス権限を設定します。
まずは先ほど作ったアプリから下記の通り進みます。

次はアクセス権限。取得したいデータを「追加」します。
今回は、public_profile,email,user_birthday,user_genderを取得。

クライアントOAuth設定

OAuthリダイレクトURIを設定します。

ユースケースをカスタマイズ > 設定 に移動し、有効なOAuthリダイレクトURIを入力します。その他はお好みで指定し、変更を保存。

クイックスタート

どのサイトで使うかを登録します。

「クイックスタート」から利用するプラットフォームを選択。

サイトURLを指定する（ウェブの場合）。

アプリIDとアプリsecretは、「アプリの設定 > ベーシック」から確認できます。
Webhooksはタイムライン的な使い方をしている際にリアルタイム反映させる（facebook側で更新があったことをサーバーに通知する）ために設定するものなので今回は設定しませんでした。

ドキュメント

• Facebookログイン
• Javascript SDKのログインダイアログによるログイン
• アクセストークン
• アクセス許可
• アプリレビュー

WordPressを使うとこんな採用サイトも低コストで自作できるようになります。