Aliyun Direct Mail Email パスワードレスサインインを Next.js (App Router) で構築する方法

新しい友達のために:

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

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

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

前提条件

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

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

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

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

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

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

Logto SDK を統合する

ヒント:

サンプルプロジェクトは、私たちの SDK リポジトリで利用可能です。
この例は、Next.js の App Router に基づいています。
チュートリアルビデオは、私たちの YouTube チャンネルで視聴できます。

インストール

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

npm
pnpm
yarn

npm i @logto/next

pnpm add @logto/next

yarn add @logto/next

設定の準備

Logto クライアントの設定を準備します：

app/logto.ts
import { LogtoNextConfig } from '@logto/next';

export const logtoConfig: LogtoNextConfig = {
  appId: '<your-application-id>',
  appSecret: '<your-app-secret-copied-from-console>',
  endpoint: '<your-logto-endpoint>', // 例: http://localhost:3001
  baseUrl: '<your-nextjs-app-base-url>', // 例: http://localhost:3000
  cookieSecret: 'complex_password_at_least_32_characters_long',
  cookieSecure: process.env.NODE_ENV === 'production',
};

リダイレクト URI の設定

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

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

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

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

注記:

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

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

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

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

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

コールバックの処理

ユーザーがサインインした後、Logto はユーザーを上記で設定したリダイレクト URI に戻します。しかし、アプリケーションが正しく動作するためには、まだ行うべきことがあります。

サインインコールバックを処理するために、handleSignIn というヘルパー関数を提供しています：

app/callback/route.ts
import { handleSignIn } from '@logto/next/server-actions';
import { redirect } from 'next/navigation';
import { NextRequest } from 'next/server';
import { logtoConfig } from '../logto';

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  await handleSignIn(logtoConfig, searchParams);

  redirect('/');
}

Next.js App Router では、イベントはクライアントコンポーネントで処理されるため、まず SignIn と SignOut の 2 つのコンポーネントを作成する必要があります。

app/sign-in.tsx
'use client';

type Props = {
  onSignIn: () => Promise<void>;
};

const SignIn = ({ onSignIn }: Props) => {
  return (
    <button
      onClick={() => {
        onSignIn();
      }}
    >
      Sign In
    </button>
  );
};

export default SignIn;

app/sign-out.tsx
'use client';

type Props = {
  onSignOut: () => Promise<void>;
};

const SignOut = ({ onSignOut }: Props) => {
  return (
    <button
      onClick={() => {
        onSignOut();
      }}
    >
      Sign Out
    </button>
  );
};

export default SignOut;

これらのコンポーネントがクライアントコンポーネントであることを示すために、ファイルの先頭に 'use client' を追加することを忘れないでください。

ホームページにボタンを追加

注記:

クライアントコンポーネント内でインラインの "use server" 注釈付きサーバーアクションを定義することはできません。サーバーコンポーネントから props を通じて渡す必要があります。

次に、ホームページにサインインとサインアウトのボタンを追加します。必要に応じて SDK のサーバーアクションを呼び出す必要があります。これを支援するために、getLogtoContext を使用して認証 (Authentication) ステータスを取得します。

app/page.tsx
import { getLogtoContext, signIn, signOut } from '@logto/next/server-actions';
import SignIn from './sign-in';
import SignOut from './sign-out';
import { logtoConfig } from './logto';

const Home = () => {
  const { isAuthenticated, claims } = await getLogtoContext(logtoConfig);

  return (
    <nav>
      {isAuthenticated ? (
        <p>
          こんにちは, {claims?.sub},
          <SignOut
            onSignOut={async () => {
              'use server';

              await signOut(logtoConfig);
            }}
          />
        </p>
      ) : (
        <p>
          <SignIn
            onSignIn={async () => {
              'use server';

              await signIn(logtoConfig);
            }}
          />
        </p>
      )}
    </nav>
  );
};

export default Home;

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

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

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

Aliyun Direct Mail コネクターを追加する

Email コネクターは、認証 (Authentication) のためにワンタイムパスワード (OTP) を送信するための方法です。これは、Email ベースの登録、サインイン、二要素認証 (2FA)、アカウント回復を含むパスワードレス認証 (Authentication) をサポートするためにメールアドレスの確認を可能にします。 Logto の Email コネクターを使用すると、数分でこれを設定できます。

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

Console > Connector > Email and SMS connectors に移動します。
新しい Email コネクターを追加するには、「Set up」ボタンをクリックし、「Aliyun Direct Mail」を選択します。
選択したプロバイダーの README ドキュメントを確認します。
「Parameter Configuration」セクションで設定フィールドを完了します。
JSON エディターを使用して Email テンプレートをカスタマイズします。
メールアドレスに確認コードを送信して設定をテストします。

注記:

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

Aliyun email connector を設定する

Aliyun DirectMail コンソールでメールサービスを設定する

Aliyun アカウントを作成する

Aliyun にアクセスし、まだアカウントをお持ちでない場合は Aliyun アカウントを作成してください。

Aliyun Direct Mail を有効化・設定する

DM サービスコンソールページにアクセスし、サインインします。ページ左上の「申請開通 (Apply to enable)」ボタンをクリックして Direct Mail サービスを有効化し、設定を開始します。

DM 管理コンソールページから、次の手順を行います：

サイドバーの「発信域名 (Email Domains)」に移動し、案内に従って「新建域名 (New Domain)」を追加します。
「発信地址 (Sender Addresses)」および「邮件标签 (Email Tags)」をそれぞれカスタマイズします。

セットアップが完了したら、テスト方法は 2 つあります：

DirectMail 概要ページにアクセスし、ページ下部の「操作引导 (Operation Guide)」を見つけ、「发送邮件 (Send Emails)」をクリックします。さまざまなテスト方法が確認できます。
サイドバーの「发送邮件 (Send Emails)」→「发送邮件 (Email Tasks)」の順に進み、テストタスクを作成します。

コネクター JSON を作成する

DM 管理コンソールページで、右上のアバターにカーソルを合わせて「AccessKey 管理 (AccessKey Management)」に進み、「创建 AccessKey (Create AccessKey)」をクリックします。セキュリティ認証が完了すると「AccessKey ID」と「AccessKey Secret」のペアが取得できます。大切に保管してください。
先ほどアクセスした「发信地址 (Sender Addresses)」または「邮件标签 (Email Tags)」タブで、Sender Address または Email Tag を簡単に確認できます。
Aliyun DM コネクターの設定を入力します：
- accessKeyId および accessKeySecret フィールドには、手順 1 で取得したアクセスキーのペアを入力します。
- accountName および fromAlias フィールドには、手順 2 で確認した「Sender Address」と「Email Tag」を入力します。すべてのテンプレートでこの署名名を共有します。（fromAlias は任意なので空欄でも構いません。）
- 異なるケースごとに複数の DM コネクターテンプレートを追加できます。単一テンプレートを追加する例は以下の通りです：
  - subject フィールドには、送信メールのタイトルとなる内容を入力します。
  - content フィールドには任意の文字列型コンテンツを入力します。ランダム認証コード用の {{code}} プレースホルダーを忘れずに残してください。
  - usageType フィールドには、用途に応じて Register、SignIn、ForgotPassword、Generic のいずれかを入力します。（usageType は適切なユースケースを識別するための Logto プロパティです。）すべてのユーザーフローを有効にするには、Register、SignIn、ForgotPassword、Generic の usageType を持つテンプレートが必要です。

Aliyun DM コネクターのテスト

「保存して完了」する前に、メールアドレスを入力して「送信」をクリックし、設定が機能するかどうかを確認できます。

以上です。サインイン体験でコネクターを有効化するのをお忘れなく。

設定タイプ

名前	型
accessKeyId	string
accessKeySecret	string
accountName	string
fromAlias	string (OPTIONAL)
templates	Template[]

テンプレートプロパティ	型	列挙値
subject	string	N/A
content	string	N/A
usageType	enum string	'Register' / 'SignIn' / 'ForgotPassword' / 'Generic'

設定を保存する

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

コネクターを正常に作成したら、電話番号ベースのパスワードレスログインと登録を有効にできます。

コンソール > サインイン体験 > サインアップとサインインに移動します。
サインアップ方法を設定します（オプション）：
1. サインアップ識別子として "メールアドレス" または "Email or phone number" を選択します。
2. "Verify at sign-up" は強制的に有効化されます。登録時に "Create a password" を有効にすることもできます。
サインイン方法を設定します：
1. サインイン識別子の一つとしてメールアドレスを選択します。複数の利用可能な識別子（メール、電話番号、ユーザー名）を提供できます。
2. 認証 (Authentication) 要素として "Verification code" および / または "Password" を選択します。
"Save changes" をクリックし、"Live preview" でテストします。

OTP を使用した登録とログインに加えて、パスワードの回復やベースのセキュリティ検証を有効にし、メールアドレスをプロファイルにリンクすることもできます。詳細については、エンドユーザーフローを参照してください。

テストと検証

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

さらなる読み物

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

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

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

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

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

Logto SDK を統合する​

インストール​

設定の準備​

リダイレクト URI の設定​

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

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

コールバックの処理​

サインインとサインアウトの実装​

サインインとサインアウトボタンの実装​

ホームページにボタンを追加​

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

Aliyun Direct Mail コネクターを追加する​

Aliyun email connector を設定する​

Aliyun DirectMail コンソールでメールサービスを設定する​

Aliyun アカウントを作成する​

Aliyun Direct Mail を有効化・設定する​

コネクター JSON を作成する​

Aliyun DM コネクターのテスト​

設定タイプ​

設定を保存する​

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

テストと検証​

さらなる読み物​