Logto は、モダンなアプリや SaaS 製品向けに設計された Auth0 の代替です。 Cloud と オープンソース の両方のサービスを提供し、アイデンティティと管理 (IAM) システムを迅速に立ち上げるのをサポートします。 認証 (Authentication)、認可 (Authorization)、マルチテナント管理を すべて一つに まとめて楽しめます。
Logto Cloud で無料の開発テナントから始めることをお勧めします。これにより、すべての機能を簡単に探索できます。
この記事では、React と Logto を使用して、AWS SES サインイン体験(ユーザー認証 (Authentication))を迅速に構築する手順を説明します。
前提条件
Logto にアプリケーションを作成する
Logto は OpenID Connect (OIDC) 認証 (Authentication) と OAuth 2.0 認可 (Authorization) に基づいています。複数のアプリケーション間でのフェデレーテッドアイデンティティ管理をサポートしており、一般的にシングルサインオン (SSO) と呼ばれます。
あなたの Single page app アプリケーションを作成するには、次の手順に従ってください:
- Logto コンソール を開きます。「Get started」セクションで「View all」リンクをクリックしてアプリケーションフレームワークのリストを開きます。あるいは、Logto Console > Applications に移動し、「Create application」ボタンをクリックします。
- 開いたモーダルで、左側のクイックフィルターチェックボックスを使用して、すべての利用可能な "Single page app" フレームワークをフィルタリングするか、"Single page app" セクションをクリックします。"React" フレームワークカードをクリックして、アプリケーションの作成を開始します。
- アプリケーション名を入力します。例:「Bookstore」と入力し、「Create application」をクリックします。
🎉 タダーン!Logto で最初のアプリケーションを作成しました。詳細な統合ガイドを含むお祝いページが表示されます。ガイドに従って、アプリケーションでの体験がどのようになるかを確認してください。
Logto SDK を統合する
- サンプルプロジェクトは、私たちの SDK リポジトリ で利用可能です。
- チュートリアルビデオは、私たちの YouTube チャンネル で視聴できます。
インストール
お好みのパッケージマネージャーを使用して Logto SDK をインストールします:
- npm
- pnpm
- yarn
npm i @logto/react
pnpm add @logto/react
yarn add @logto/react
LogtoClient の初期化
LogtoProvider
をインポートして使用し、Logto コンテキストをアプリに提供します:
import { LogtoProvider, LogtoConfig } from '@logto/react';
const config: LogtoConfig = {
endpoint: '<your-logto-endpoint>', // 例: http://localhost:3001
appId: '<your-application-id>',
};
const App = () => (
<LogtoProvider config={config}>
<YourAppContent />
</LogtoProvider>
);
リダイレクト URI の設定
詳細に入る前に、エンドユーザーの体験について簡単に説明します。サインインプロセスは次のように簡略化できます:
- あなたのアプリがサインインメソッドを呼び出します。
- ユーザーは Logto のサインインページにリダイレクトされます。ネイティブアプリの場合、システムブラウザが開かれます。
- ユーザーがサインインし、あなたのアプリにリダイレクトされます(リダイレクト URI として設定されています)。
リダイレクトベースのサインインについて
以下のコードスニペットでは、あなたのアプリが http://localhost:3000/
で実行されていると仮定しています。
リダイレクト URI を設定する
Logto Console のアプリケーション詳細ページに移動します。リダイレクト URI http://localhost:3000/callback
を追加します。
サインインと同様に、ユーザーは共有セッションからサインアウトするために Logto にリダイレクトされるべきです。完了したら、ユーザーをあなたのウェブサイトに戻すと良いでしょう。例えば、http://localhost:3000/
をサインアウト後のリダイレクト URI セクションとして追加します。
その後、「保存」をクリックして変更を保存します。
リダイレクトの処理
http://localhost:3000/callback
をリダイレクト URI として使用しているため、これを適切に処理する必要があります。
まず、コールバックページを作成しましょう:
import { useHandleSignInCallback } from '@logto/react';
const Callback = () => {
const { isLoading } = useHandleSignInCallback(() => {
// 完了したときに何かを行う、例えばホームページにリダイレクトする
});
// 処理中の場合
if (isLoading) {
return <div>リダイレクト中...</div>;
}
return null;
};
最後に、認証を必要としない /callback
ルートを作成するために、以下のコードを挿入します:
// react-router を想定
<Route path="/callback" element={<Callback />} />
サインインとサインアウトの実装
認証 (Authentication) フローを簡単に管理できるように、2 つのフック useHandleSignInCallback()
と useLogto()
を提供しています。
.signIn()
を呼び出す前に、Admin Console でリダイレクト URI
が正しく設定されていることを確認してください。 :::
import { useLogto } from '@logto/react';
const Home = () => {
const { signIn, signOut, isAuthenticated } = useLogto();
return isAuthenticated ? (
<button onClick={signOut}>Sign Out</button>
) : (
<button onClick={() => signIn('http://localhost:3000/callback')}>Sign In</button>
);
};
.signOut()
を呼び出すと、存在する場合、メモリと localStorage 内のすべての Logto データがクリアされます。
チェックポイント: アプリケーションをテストする
これで、アプリケーションをテストできます:
- アプリケーションを実行すると、サインインボタンが表示されます。
- サインインボタンをクリックすると、SDK がサインインプロセスを初期化し、Logto のサインインページにリダイレクトされます。
- サインインすると、アプリケーションに戻り、サインアウトボタンが表示されます。
- サインアウトボタンをクリックして、トークンストレージをクリアし、サインアウトします。
AWS SES コネクターを追加する
Email コネクターは、認証 (Authentication) のためにワンタイムパスワード (OTP) を送信するための方法です。これにより、メールアドレス の認証が可能になり、Email ベースの登録、サインイン、二要素認証 (2FA)、アカウントの復旧を含むパスワードレス認証 (Authentication) をサポートします。 Logto Email コネクターを使用すると、AWS SES を Email プロバイダーとして簡単に接続できます。数分で設定を完了できます。
Email コネクターを追加するには、次の手順に従ってください:
- Console > Connector > Email and SMS connectors に移動します。
- 新しい Email コネクターを追加するには、「Set up」ボタンをクリックし、「AWS SES」を選択します。
- 選択したプロバイダーの README ドキュメントを確認します。
- 「パラメーター設定」セクションで設定フィールドを完了します。
- JSON エディターを使用して Email テンプレートをカスタマイズします。
- メールアドレス に確認コードを送信して設定をテストします。
インプレースコネクターガイドに従っている場合は、次のセクションをスキップできます。
AWS SES メールコネクター を設定する
AWS サービスコンソールでメールサービスを設定する
AWS アカウントを登録する
AWS にアクセスしてアカウントを登録します。
アイデンティティを作成する
Amazon Simple Email Service
コンソールに移動します- アイデンティティを作成し、次のオプションのいずれかを選択します
- ドメインを作成する
- メールアドレスを作成する
コネクターの設定
- Amazon コンソールの右上隅にあるユーザー名をクリックして
Security Credentials
に入ります。まだ持っていない場合は、AccessKey
を作成し、慎重に保存してください。 Amazon Simple Email Service
コネクターの設定を完了します:- ステップ 1 で取得した
AccessKey ID
とAccessKey Secret
を使用して、それぞれaccessKeyId
とaccessKeySecret
を入力します。 region
: メール送信に使用するアイデンティティのリージョンをregion
フィールドに入力します。emailAddress
: メール送信に使用するメールアドレスをLogto\<noreply@logto.io>
または\<noreply@logto.io>
の形式で入力します。
- ステップ 1 で取得した
以下のパラメーターはオプションです。パラメーターの説明は AWS SES API ドキュメント に記載されています。
feedbackForwardingEmailAddress
feedbackForwardingEmailAddressIdentityArn
configurationSetName
Amazon SES コネクターをテストする
メールアドレスを入力し、「送信」をクリックして、設定が機能するかどうかを「保存して完了」する前に確認できます。
これで完了です。サインイン体験でコネクターを有効にする のを忘れないでください。
タイプを設定する
名前 | タイプ |
---|---|
accessKeyId | string |
accessKeySecret | string |
region | string |
emailAddress | string (OPTIONAL) |
emailAddressIdentityArn | string (OPTIONAL) |
feedbackForwardingEmailAddress | string (OPTIONAL) |
feedbackForwardingEmailAddressIdentityArn | string (OPTIONAL) |
configurationSetName | string (OPTIONAL) |
templates | Template[] |
テンプレートプロパティ | タイプ | 列挙値 |
---|---|---|
subject | string | N/A |
content | string | N/A |
usageType | enum string | 'Register' | 'SignIn' | 'ForgotPassword' | 'Generic' |
設定を保存する
Logto コネクター設定エリアで必要な値をすべて記入したことを確認してください。「保存して完了」または「変更を保存」をクリックすると、AWS SES コネクターが利用可能になります。
サインイン体験で AWS SES コネクターを有効にする
コネクターを正常に作成すると、電話番号ベースのパスワードレスログインと登録を有効にできます。
- Console > サインイン体験 > サインアップとサインイン に移動します。
- サインアップ方法を設定します(オプション):
- サインアップ識別子として "メールアドレス" または "Email or phone number" を選択します。
- "Verify at sign-up" は強制的に有効化されます。登録時に "Create a password" を有効にすることもできます。
- サインイン方法を設定します:
- サインイン識別子の一つとして メールアドレス を選択します。複数の識別子(メール、電話番号、ユーザー名)を提供できます。
- 認証 (Authentication) 要素として "Verification code" および / または "Password" を選択します。
- "Save changes" をクリックし、"Live preview" でテストします。
OTP を使用した登録とログインに加えて、パスワード回復や ベースのセキュリティ検証を有効にしたり、メールアドレス をプロファイルにリンクしたりすることもできます。詳細については、エンドユーザーフロー を参照してください。
テストと検証
React アプリに戻ります。これで AWS SES を使用してサインインできるはずです。お楽しみください!
さらなる読み物
エンドユーザーフロー:Logto は、MFA やエンタープライズシングルサインオン (SSO) を含む即時使用可能な認証 (Authentication) フローを提供し、アカウント設定、セキュリティ検証、マルチテナント体験の柔軟な実装のための強力な API を備えています。
認可 (Authorization):認可 (Authorization) は、ユーザーが認証 (Authentication) された後に行えるアクションやアクセスできるリソースを定義します。ネイティブおよびシングルページアプリケーションの API を保護し、ロールベースのアクセス制御 (RBAC) を実装する方法を探ります。
組織 (Organizations):特にマルチテナント SaaS や B2B アプリで効果的な組織機能は、テナントの作成、メンバー管理、組織レベルの RBAC、およびジャストインタイムプロビジョニングを可能にします。
顧客 IAM シリーズ:顧客(または消費者)アイデンティティとアクセス管理に関する連続ブログ投稿で、101 から高度なトピックまでを網羅しています。