ソーシャルログイン（Facebook,X,LINE）の設定方法のメモ

ソーシャルログインとは、ユーザーが新しくアカウントを作成することなく、SNSアカウントを使ってサービスにログインできる仕組みです。Webサイトやアプリにおいて、ユーザー登録のハードルを下げるために「ソーシャルログイン」を導入するケースが増えています。

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

facebookソーシャルログインの設定

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

アプリの作成

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

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

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

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

そのまま次へ。

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

アクセス権限設定

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

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

クライアントOAuth設定

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

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

クイックスタート

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

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

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

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

Xのソーシャルログインの設定

X Developer Platformにログイン（サインイン）します。

アプリ作成

下記の通り、アプリを新規作成します。

任意の「アプリケーション名」記入、Environmentを開発、ステージング、本番から選択。

コンシューマーキー、シークレットキー、ベアラートークンをコピーしておく。

OAuth2.0キー

次はユーザー認証設定。

先ほど作ったアプリを選んで、ユーザー認証設定の「セットアップ」を選択。

ここでコールバックURIやサイトURLを設定。アプリの権限は「読む」、アプリの種類は「ネイティブアプリ」を選択（サービスによる）。

クライアントIDとクライアントシークレットが生成されるのでコピーしておく。

LINEのソーシャルログインの設定

LINE Developersにログインします。

プロバイダー（アプリ）の作成

下記の手順でプロバイダーを新規作成する。

任意のチャネル名を入力。

「LINEログイン」を選択。

所在国など入力項目を埋める。

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