メインコンテンツまでスキップ

あなたの Next Auth アプリケーションに認証 (Authentication) を追加する

このガイドでは、Next Auth を使用して Logto を Next.js アプリケーションに統合する方法を紹介します。

ヒント:
  • このガイドでは、Next.js プロジェクトに Next Auth を設定していることを前提としています。まだ設定していない場合は、Next Auth ドキュメント を参照して始めてください。

前提条件

統合

Next Auth プロバイダーの設定

詳細に入る前に、エンドユーザーの体験について簡単に説明します。サインインプロセスは次のように簡略化できます:

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

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

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

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


注記:

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

サインインリダイレクト URI の設定

Logto コンソールのアプリケーション詳細ページに切り替えましょう。リダイレクト URI http://localhost:3000/api/auth/callback/logto を追加し、「変更を保存」をクリックします。

Logto コンソールのリダイレクト URI

Next Auth プロバイダーの設定

ヒント:

「App Secret」は管理コンソールのアプリケーション詳細ページから見つけてコピーできます:

App Secret

Next Auth の API ルート設定を変更します。Pages Router を使用している場合、ファイルは pages/api/auth/[...nextauth].js にあります。App Router を使用している場合、ファイルは app/api/auth/[...nextauth]/route.ts にあります。

以下は App Router の例です:

import NextAuth from 'next-auth';

export const {
handlers: { GET, POST },
signIn,
signOut,
auth,
} = NextAuth({
providers: [
{
id: 'logto',
name: 'Logto',
type: 'oidc',
// Logto アプリケーションの詳細ページから発行者 (Issuer) の値を取得できます。
// フィールド "Issuer endpoint" にあります。
issuer: 'https://xxxx.logto.app/oidc',
clientId: '<logto-app-id>',
clientSecret: '<logto-app-secret>',
authorization: {
params: { scope: 'openid offline_access profile email' },
},
profile(profile) {
// ユーザープロファイルのマッピングをここでカスタマイズできます
return {
id: profile.sub,
name: profile.name ?? profile.username,
email: profile.email,
image: profile.picture,
};
},
},
],
});
  1. issuer URL を Logto アプリケーションの "Issuer endpoint" に置き換えます。
  2. clientIdclientSecret を Logto アプリケーションの ID とシークレットに置き換えます。
  3. profile 関数をカスタマイズして、ユーザープロファイルを Next Auth ユーザーオブジェクトにマッピングします。デフォルトのマッピングは例に示されています。

チェックポイント

これで、アプリケーションをテストして、認証 (Authentication) が期待通りに動作するか確認できます。

スコープとクレーム

Logto は OIDC の スコープとクレームの規約 を使用して、ID トークンおよび OIDC userinfo エンドポイント からユーザー情報を取得するためのスコープとクレームを定義します。「スコープ」と「クレーム」は、OAuth 2.0 および OpenID Connect (OIDC) 仕様からの用語です。

要するに、スコープをリクエストすると、ユーザー情報の対応するクレームを取得できます。例えば、`email` スコープをリクエストすると、ユーザーの `email` と `email_verified` データを取得できます。

デフォルトでは、Logto SDK は常に 3 つのスコープをリクエストします:`openid`、`profile`、および `offline_access` です。 これらのデフォルトスコープを削除する方法はありませんが、Logto を設定する際にさらにスコープを追加することができます:

const handler = NextAuth({
providers: [
{
id: 'logto',
name: 'Logto',
// ... other options
authorization: { params: { scope: 'openid offline_access profile email' } },
// ... other options
},
],
});

サポートされているスコープと対応するクレーム (Claims) のリストはこちらです:

openid

クレーム名タイプ説明ユーザー情報が必要か?
substringユーザーの一意の識別子いいえ

profile

クレーム名タイプ説明ユーザー情報が必要か?
namestringユーザーのフルネームいいえ
usernamestringユーザーのユーザー名いいえ
picturestringエンドユーザーのプロフィール写真の URL。この URL は、画像を含む Web ページではなく、画像ファイル(例えば PNG、JPEG、または GIF 画像ファイル)を指す必要があります。この URL は、エンドユーザーを説明する際に表示するのに適したプロフィール写真を特に参照するべきであり、エンドユーザーが撮影した任意の写真を参照するべきではありません。いいえ
created_atnumberエンドユーザーが作成された時間。時間は Unix エポック(1970-01-01T00:00:00Z)からのミリ秒数で表されます。いいえ
updated_atnumberエンドユーザーの情報が最後に更新された時間。時間は Unix エポック(1970-01-01T00:00:00Z)からのミリ秒数で表されます。いいえ

その他の 標準クレーム には、family_namegiven_namemiddle_namenicknamepreferred_usernameprofilewebsitegenderbirthdatezoneinfo、および locale が含まれ、ユーザー情報エンドポイントを要求することなく profile スコープに含まれます。上記のクレームと異なる点は、これらのクレームは値が空でない場合にのみ返されることであり、上記のクレームは値が空の場合に null を返します。

注記:

標準クレームとは異なり、created_atupdated_at クレームは秒ではなくミリ秒を使用しています。

email

クレーム名タイプ説明ユーザー情報が必要か?
emailstringユーザーのメールアドレスいいえ
email_verifiedbooleanメールアドレスが確認済みかどうかいいえ

phone

クレーム名タイプ説明ユーザー情報が必要か?
phone_numberstringユーザーの電話番号いいえ
phone_number_verifiedboolean電話番号が確認済みかどうかいいえ

address

住所クレームの詳細については、OpenID Connect Core 1.0 を参照してください。

custom_data

クレーム名タイプ説明ユーザー情報が必要か?
custom_dataobjectユーザーのカスタムデータはい

identities

クレーム名タイプ説明ユーザー情報が必要か?
identitiesobjectユーザーのリンクされたアイデンティティはい
sso_identitiesarrayユーザーのリンクされた SSO アイデンティティはい

urn:logto:scope:organizations

クレーム名タイプ説明ユーザー情報が必要か?
organizationsstring[]ユーザーが所属する組織の IDいいえ
organization_dataobject[]ユーザーが所属する組織のデータはい

urn:logto:scope:organization_roles

クレーム名タイプ説明ユーザー情報が必要か?
organization_rolesstring[]ユーザーが所属する組織のロールで、<organization_id>:<role_name> の形式いいえ

パフォーマンスとデータサイズを考慮して、「ユーザー情報が必要か?」が「はい」の場合、クレームは ID トークンに表示されず、ユーザー情報エンドポイント のレスポンスで返されます。

さらなる読み物

エンドユーザーフロー:認証 (Authentication) フロー、アカウントフロー、組織フロー コネクターを設定する あなたの API を保護する NextAuth.js v4 から v5 への Logto 統合の移行