新しい友達のために:

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

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

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

前提条件

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

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

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

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

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

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

Logto SDK を統合する

ヒント:

• このガイドでは、プロジェクトに Express をセッションと共に設定していることを前提としています。まだ設定していない場合は、Express.js のウェブサイト を参照して始めてください。

インストール

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

npm

npm i passport passport-openidconnect

pnpm

pnpm add passport passport-openidconnect

yarn

yarn add passport passport-openidconnect

Passport.js を OIDC ストラテジーで初期化する

passport.ts

import passport from 'passport';
import OpenIDConnectStrategy, { type Profile, type VerifyCallback } from 'passport-openidconnect';

const endpoint = '<your-logto-endpoint>';
const appId = '<your-application-id>';
const appSecret = '<your-application-secret>';

export default function initPassport() {
  passport.use(
    new OpenIDConnectStrategy(
      {
        issuer: `${endpoint}/oidc`,
        authorizationURL: `${endpoint}/oidc/auth`,
        tokenURL: `${endpoint}/oidc/token`,
        userInfoURL: `${endpoint}/oidc/me`,
        clientID: appId,
        clientSecret: appSecret,
        callbackURL: '/callback',
        scope: ['profile', 'offline_access'],
      },
      (issuer: string, profile: Profile, callback: VerifyCallback) => {
        callback(null, profile);
      }
    )
  );

  passport.serializeUser((user, callback) => {
    callback(null, user);
  });

  passport.deserializeUser(function (user, callback) {
    callback(null, user as Express.User);
  });
}

このコードは、OpenIDConnectStrategy で Passport を初期化します。serialize と deserialize メソッドはデモンストレーションの目的で設定されています。

アプリケーションで Passport ミドルウェアを初期化してアタッチすることを確認してください：

your-app-entry.ts

import initPassport from './passport';

// ... 他のコード
initPassport();
// ... 他のコード
app.use(passport.authenticate('session'));
// ... 他のコード

リダイレクト 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/callback を追加します。

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

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

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

次に、認証 (Authentication) プロセスのための特定のルートを作成します：

your-app-entry.ts

app.get('/sign-in', passport.authenticate('openidconnect'));
app.get(
  '/callback',
  passport.authenticate('openidconnect', {
    successReturnToOrRedirect: '/',
  })
);
app.get('/sign-out', (request, response, next) => {
  request.logout((error) => {
    if (error) {
      next(error);
      return;
    }
    response.redirect(`${endpoint}/oidc/session/end?client_id=${appId}`);
  });
});

次に、ホームページに追加します

your-app-entry.ts

app.get('/', (request: Request, response) => {
  const { user } = request;
  response.setHeader('content-type', 'text/html');

  if (user) {
    response.end(
      `<h1>Hello Logto</h1><p>Signed in as ${JSON.stringify(
        user
      )}, <a href="/sign-out">Sign Out</a></p>`
    );
  } else {
    response.end(`<h1>Hello Logto</h1><p><a href="/sign-in">Sign In</a></p>`);
  }
});

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

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

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

SMS Aero コネクターを追加する

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

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

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

注記:

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

SMS Aero コネクター を設定する

アカウント登録

SMSAero で新しいアカウントを作成します。（すでにアカウントをお持ちの場合は次のステップへ進んでください。）

アカウント認証情報の取得

コネクターを動作させるために API 認証情報が必要です。
API および SMPP から始めましょう。

「API-key」をコピーするか、新しいものを生成してください。

コネクター JSON の作成

email、apiKey、senderName フィールドに、メールアドレス、API キー、送信者名を入力してください。

送信者名には「SMSAero」と入力することで、SMSAero が提供するデフォルトの送信者名を利用できます。

用途ごとに複数の SMS コネクターテンプレートを追加できます。単一テンプレートを追加する例は以下の通りです：

• content フィールドには任意の文字列型コンテンツを入力します。ランダム認証コード用の {{code}} プレースホルダーを忘れずに残してください。
• usageType フィールドには、用途に応じて Register、SignIn、ForgotPassword、Generic のいずれかを入力します。
  ユーザーフローをすべて有効にするには、Register、SignIn、ForgotPassword、Generic の usageType を持つテンプレートが必要です。

SMSAero コネクターのテスト

電話番号を入力し「送信」をクリックすることで、「保存して完了」前に設定が動作するか確認できます。

以上です。

サインイン体験でコネクターを有効化

するのをお忘れなく。

設定タイプ

名前	型
email	string
apiKey	string
senderName	string
templates	Templates[]

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

設定を保存する

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

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

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

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

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

テストと検証

Passport.js アプリに戻ります。これで SMS Aero を使用してサインインできるはずです。お楽しみください！

さらなる読み物

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

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

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

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