メインコンテンツまでスキップ
新しい友達のために:

Logto は、モダンなアプリや SaaS 製品向けに設計された Auth0 の代替です。 Cloud と オープンソース の両方のサービスを提供し、アイデンティティと管理 (IAM) システムを迅速に立ち上げるのに役立ちます。認証 (Authentication)、認可 (Authorization)、マルチテナント管理を すべて一つに まとめて楽しんでください。

Logto Cloud で無料の開発テナントから始めることをお勧めします。これにより、すべての機能を簡単に探索できます。

この記事では、Next.js (Pages Router) と Logto を使用して、Facebook サインイン体験（ユーザー認証 (Authentication)）を迅速に構築する手順を説明します。

前提条件

  • 稼働中の Logto インスタンス。紹介ページ をチェックして始めてください。
  • Next.js (Pages Router) の基本的な知識。
  • 使用可能な Facebook アカウント。

Logto でアプリケーションを作成する​

Logto は OpenID Connect (OIDC) 認証 (Authentication) と OAuth 2.0 認可 (Authorization) に基づいています。これは、複数のアプリケーション間でのフェデレーテッドアイデンティティ管理をサポートし、一般的にシングルサインオン (SSO) と呼ばれます。

あなたの Traditional web アプリケーションを作成するには、次の手順に従ってください：

  1. Logto コンソール を開きます。「Get started」セクションで、「View all」リンクをクリックしてアプリケーションフレームワークのリストを開きます。あるいは、Logto Console > Applications に移動し、「Create application」ボタンをクリックします。 Get started
  2. 開いたモーダルで、左側のクイックフィルターチェックボックスを使用して、利用可能なすべての "Traditional web" フレームワークをフィルタリングするか、"Traditional web" セクションをクリックします。"Next.js" フレームワークカードをクリックして、アプリケーションの作成を開始します。 Frameworks
  3. アプリケーション名を入力します。例：「Bookstore」と入力し、「Create application」をクリックします。

🎉 タダーン！Logto で最初のアプリケーションを作成しました。詳細な統合ガイドを含むお祝いページが表示されます。ガイドに従って、アプリケーションでの体験を確認してください。

Next.js SDK を統合する​

ヒント:
  • サンプルプロジェクトは、私たちの SDK リポジトリ で利用可能です。
  • この例は、Next.js の Pages Router に基づいています。

インストール​

お好みのパッケージマネージャーを使用して Logto SDK をインストールします：

npm i @logto/next

統合​

LogtoClient を初期化する​

LogtoClient をインポートして初期化します：

libraries/logto.ts
import LogtoClient from '@logto/next';

export const logtoClient = new LogtoClient({
  appId: '<your-application-id>',
  appSecret: '<your-app-secret-copied-from-console>',
  endpoint: '<your-logto-endpoint>', // 例: http://localhost:3001
  baseUrl: 'http://localhost:3000',
  cookieSecret: 'complex_password_at_least_32_characters_long',
  cookieSecure: process.env.NODE_ENV === 'production',
});

リダイレクト URI を設定する​

詳細に入る前に、エンドユーザー体験の概要を簡単にご紹介します。サインインプロセスは次のようにシンプルにまとめられます：

  1. アプリがサインインメソッドを呼び出します。
  2. ユーザーは Logto のサインインページにリダイレクトされます。ネイティブアプリの場合は、システムブラウザが開かれます。
  3. ユーザーがサインインし、アプリ（リダイレクト URI として設定）に戻されます。

リダイレクトベースのサインインについて​

  1. この認証 (Authentication) プロセスは OpenID Connect (OIDC) プロトコルに従い、Logto はユーザーのサインインを保護するために厳格なセキュリティ対策を講じています。
  2. 複数のアプリがある場合、同じアイデンティティプロバイダー (Logto) を使用できます。ユーザーがあるアプリにサインインすると、Logto は別のアプリにアクセスした際に自動的にサインインプロセスを完了します。

リダイレクトベースのサインインの理論と利点について詳しく知るには、Logto サインイン体験の説明を参照してください。

注記:

以下のコードスニペットでは、あなたのアプリが http://localhost:3000/ で実行されていると仮定しています。

リダイレクト URI を設定する​

Logto Console のアプリケーション詳細ページに移動します。リダイレクト URI http://localhost:3000/api/logto/sign-in-callback を追加します。

Logto Console のリダイレクト URI

サインインと同様に、ユーザーは共有セッションからサインアウトするために Logto にリダイレクトされるべきです。完了したら、ユーザーをあなたのウェブサイトに戻すと良いでしょう。例えば、http://localhost:3000/ をサインアウト後のリダイレクト URI セクションとして追加します。

その後、「保存」をクリックして変更を保存します。

API ルートを準備する​

Logto と接続するための API ルート を準備します。

IDE / エディタに戻り、まず次のコードを使用して API ルートを実装します：

pages/api/logto/[action].ts
import { logtoClient } from '../../../libraries/logto';

export default logtoClient.handleAuthRoutes();

これにより、4 つのルートが自動的に作成されます：

  1. /api/logto/sign-in: Logto でサインインします。
  2. /api/logto/sign-in-callback: サインインコールバックを処理します。
  3. /api/logto/sign-out: Logto でサインアウトします。
  4. /api/logto/user: ユーザーが Logto で認証されているかどうかを確認し、認証されている場合はユーザー情報を返します。

サインインとサインアウトを実装する​

API ルートを準備しましたので、次にホームページにサインインとサインアウトボタンを実装しましょう。必要に応じて、ユーザーをサインインまたはサインアウトルートにリダイレクトする必要があります。これを支援するために、useSWR を使用して /api/logto/user から認証 (Authentication) ステータスを取得します。

useSWR について詳しくは このガイド をご覧ください。

/pages/index.tsx
import { type LogtoContext } from '@logto/next';
import useSWR from 'swr';

const Home = () => {
  const { data } = useSWR<LogtoContext>('/api/logto/user');

  return (
    <nav>
      {data?.isAuthenticated ? (
        <p>
          こんにちは、{data.claims?.sub} さん、
          <button
            onClick={() => {
              window.location.assign('/api/logto/sign-out');
            }}
          >
            サインアウト
          </button>
        </p>
      ) : (
        <p>
          <button
            onClick={() => {
              window.location.assign('/api/logto/sign-in');
            }}
          >
            サインイン
          </button>
        </p>
      )}
    </nav>
  );
};

export default Home;

チェックポイント: アプリケーションをテストする​

これで、アプリケーションをテストできます：

  1. アプリケーションを実行すると、サインインボタンが表示されます。
  2. サインインボタンをクリックすると、SDK がサインインプロセスを初期化し、Logto のサインインページにリダイレクトされます。
  3. サインインすると、アプリケーションに戻り、サインアウトボタンが表示されます。
  4. サインアウトボタンをクリックして、トークンストレージをクリアし、サインアウトします。

Facebook コネクターを追加する​

迅速なサインインを有効にし、ユーザーコンバージョンを向上させるために、アイデンティティプロバイダー (IdP) として Next.js を接続します。Logto ソーシャルコネクターは、いくつかのパラメーター入力を許可することで、この接続を数分で確立するのに役立ちます。

ソーシャルコネクターを追加するには、次の手順に従ってください：

  1. Console > Connectors > Social Connectors に移動します。
  2. 「Add social connector」をクリックし、「Facebook」を選択します。
  3. README ガイドに従い、必要なフィールドを完了し、設定をカスタマイズします。
Connector tab
注記:

インプレースコネクターガイドに従っている場合は、次のセクションをスキップできます。

Facebook login を設定する​

ステップ 1: Facebook App Dashboard でアプリをセットアップする​

Facebook を認証 (Authentication) プロバイダーとして利用する前に、Facebook デベロッパープラットフォームでアプリをセットアップし、OAuth 2.0 資格情報を取得する必要があります。

  1. まだアカウントがない場合は、 Facebook デベロッパーとして登録 してください。
  2. アプリ ページにアクセスします。
  3. 既存のアプリをクリックするか、必要に応じて 新しいアプリを作成 します。
ヒント:

ユースケースは、アプリが Meta とどのようにやり取りするかの主要な方法であり、アプリで利用可能な API、機能、権限、プロダクトを決定します。ソーシャル認証 (Authentication) のみ（メールアドレスと public_profile の取得）が必要な場合は「Authentication and request data from users with Facebook Login」を選択してください。Facebook API へのアクセスが必要な場合は、希望するユースケースを選択してください。ほとんどのユースケースは、アプリ作成後に「Facebook Login for business」の統合もサポートしています。

  1. アプリ作成後、アプリダッシュボードページで Use cases > Facebook Login > Settings または Facebook Login for business > Settings に移動します。
  2. Valid OAuth Redirect URIs に Logto の Callback URI を入力します（Logto の Facebook コネクターからコピーしてください）。ユーザーが Facebook でサインインした後、ここに認可コード付きでリダイレクトされ、Logto が認証 (Authentication) を完了します。
  3. Use cases に移動し、ユースケースの Customize をクリックしてスコープを追加します。Logto で Facebook サインインを実装するには email と public_profile の追加を推奨します（必須）。

ステップ 2: クライアント資格情報で Logto コネクターをセットアップする​

  1. Facebook App Dashboard で、サイドバーの App settings > Basic をクリックします。
  2. パネルに App ID と App secret が表示されます。
  3. App secret 入力欄の横にある Show ボタンをクリックして内容を表示し、コピーします。
  4. Logto の Facebook コネクター設定を行います：
    • clientId フィールドに App ID を入力します。
    • clientSecret フィールドに App secret を入力します。
    • Logto で Save and Done をクリックし、アイデンティティシステムと Facebook を接続します。

ステップ 3: スコープを設定する​

スコープは、アプリがユーザーから要求する権限を定義し、Facebook アカウントからどのプライベートデータにアクセスできるかを制御します。

Facebook App Dashboard でスコープを設定する​

  1. Facebook App Dashboard > Use cases に移動し、Customize ボタンをクリックします。
  2. アプリが必要とするスコープのみを追加します。ユーザーは Facebook の同意画面でこれらの権限を確認し、承認します：
    • 認証 (Authentication) 用（必須）：email と public_profile
    • API アクセス用（任意）：アプリが必要とする追加スコープ（例：Threads API へのアクセスには threads_content_publish、threads_read_replies など）。利用可能なサービスは Meta Developer Documentation を参照してください。

Logto でスコープを設定する​

ニーズに応じて、以下のいずれかの方法を選択してください：

オプション 1: 追加の API スコープが不要な場合

  • Logto の Facebook コネクターの Scopes フィールドを空欄のままにします。
  • デフォルトのスコープ email public_profile がリクエストされ、Logto が基本的なユーザー情報を正しく取得できます。

オプション 2: サインイン時に追加スコープをリクエストする場合

  • 必要なすべてのスコープを Scopes フィールドにスペース区切りで入力します。
  • ここに入力したスコープがデフォルトを上書きするため、必ず認証 (Authentication) 用スコープ email public_profile も含めてください。

オプション 3: 後からインクリメンタルスコープをリクエストする場合

  • ユーザーがサインインした後、フェデレーテッドソーシャル認可 (Authorization) フローを再実行し、ユーザーの保存済みトークンセットを更新することで、必要に応じて追加スコープをリクエストできます。
  • これらの追加スコープは Logto の Facebook コネクターの Scopes フィールドに入力する必要はなく、Logto の Social Verification API を通じて実現できます。

これらの手順に従うことで、Logto Facebook コネクターはアプリに必要な権限のみをリクエストします。

ヒント:

アプリが Facebook API へのアクセスやアクション実行のためにこれらのスコープをリクエストする場合は、Logto Facebook コネクターで Store tokens for persistent API access を有効にしてください。詳細は次のセクションを参照してください。

ステップ 4: 一般設定​

Facebook への接続を妨げることはありませんが、エンドユーザーの認証 (Authentication) 体験に影響する可能性のある一般的な設定を紹介します。

プロフィール情報の同期​

Facebook コネクターでは、ユーザー名やアバターなどのプロフィール情報の同期ポリシーを設定できます。以下から選択してください：

  • サインアップ時のみ同期：ユーザーが初めてサインインしたときにプロフィール情報を一度だけ取得します。
  • サインイン時に常に同期：ユーザーがサインインするたびにプロフィール情報を更新します。

Facebook API へのアクセス用トークンの保存（任意）​

Facebook API へのアクセスやユーザー認可によるアクション実行（ソーシャルサインインまたはアカウント連携経由）を行いたい場合、Logto は特定の API スコープを取得し、トークンを保存する必要があります。

  1. 上記の手順に従って必要なスコープを追加します。
  2. Logto Facebook コネクターで Store tokens for persistent API access を有効にします。Logto は Facebook アクセストークンを Secret Vault に安全に保存します。
注記:

Facebook はリフレッシュトークンを提供していません。ただし、トークン保存が有効な場合、Logto はユーザー認証 (Authentication) 時に自動的に長期間有効なアクセストークン（60日間）をリクエストします。この期間中、ユーザーは手動でアクセストークンを取り消すことができますが、そうでなければ Facebook API へのアクセスに再認可は不要です。注意：offline_access を Scope フィールドに追加しないでください。エラーの原因となる場合があります。

ステップ 5: Facebook のテストユーザーでサインインをテストする（任意）​

テスト、開発者、管理者ユーザーアカウントを使ってアプリでのサインインをテストできます。また、アプリを公開して任意の Facebook ユーザーがサインインできるようにすることも可能です。

  1. Facebook App Dashboard で、サイドバーの App roles > Test Users をクリックします。
  2. Create test users ボタンをクリックしてテストユーザーを作成します。
  3. 既存のテストユーザーの Options ボタンをクリックすると、「名前とパスワードの変更」などの操作が可能です。

ステップ 6: Facebook サインイン設定を公開する​

通常、テスト、管理者、開発者ユーザーのみがアプリでサインインできます。プロダクション環境で一般の Facebook ユーザーがアプリでサインインできるようにするには、アプリを公開する必要があります。

  1. Facebook App Dashboard で、サイドバーの Publish をクリックします。
  2. 必要に応じて Privacy Policy URL と User data deletion フィールドを入力します。
  3. 右下の Save changes ボタンをクリックします。
  4. アプリ上部バーの Live スイッチボタンをクリックします。

設定を保存する​

Logto コネクター設定エリアで必要な値をすべて記入したことを確認してください。「保存して完了」または「変更を保存」をクリックすると、Facebook コネクターが利用可能になります。

サインイン体験で Facebook コネクターを有効にする​

ソーシャルコネクターを正常に作成したら、サインイン体験で「Facebook で続行」ボタンとして有効にすることができます。

  1. Console > サインイン体験 > サインアップとサインイン に移動します。
  2. （オプション）ソーシャルログインのみが必要な場合は、サインアップ識別子に「該当なし」を選択します。
  3. 設定済みの Facebook コネクターを「ソーシャルサインイン」セクションに追加します。
サインイン体験タブ

テストと検証​

Next.js (Pages Router) アプリに戻ります。これで Facebook を使用してサインインできるはずです。お楽しみください！

さらなる読み物​

エンドユーザーフロー：Logto は、MFA やエンタープライズシングルサインオン (SSO) を含む即時使用可能な認証 (Authentication) フローを提供し、アカウント設定、セキュリティ検証、マルチテナント体験の柔軟な実装のための強力な API を備えています。

認可 (Authorization)：認可 (Authorization) は、ユーザーが認証 (Authentication) された後に行えるアクションやアクセスできるリソースを定義します。ネイティブおよびシングルページアプリケーションの API を保護し、ロールベースのアクセス制御 (RBAC) を実装する方法を探ります。

組織 (Organizations)：特にマルチテナント SaaS や B2B アプリで効果的な組織機能は、テナントの作成、メンバー管理、組織レベルの RBAC、およびジャストインタイムプロビジョニングを可能にします。

顧客 IAM シリーズ：顧客（または消費者）アイデンティティとアクセス管理に関する連続ブログ投稿で、101 から高度なトピックまでを網羅しています。