Aliyun Direct Mail Email パスワードレスサインインを Webflow で構築する方法

新しい友達のために:

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

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

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

前提条件

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

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" セクションをクリックします。"Webflow" フレームワークカードをクリックして、アプリケーションの作成を開始します。
アプリケーション名を入力します。例：「Bookstore」と入力し、「Create application」をクリックします。

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

Logto SDK を統合する

ヒント:

サンプルプロジェクトは Webflow プロジェクトプレビューで利用可能です。

Logto プロバイダーの初期化

注記:

以下の手順では、あなたの Webflow サイトが https://your-awesome-site.webflow.io で動作していると仮定します。

このステップでは、Webflow サイトにグローバルレベルのカスタムコードを追加します。Webflow では NPM がサポートされていないため、Logto SDK をインポートするために jsdelivr.com CDN サービスを使用します。

「サイト設定」ページを開き、「カスタムコード」セクションに移動します。「ヘッドコード」セクションに次のコードを追加します。

<script type="module">
  // jsdelivr CDN から \`@logto/browser\` SDK をインポート
  import LogtoClient from 'https://esm.run/@logto/browser';

  // \`logtoClient\` インスタンスを window オブジェクトに割り当て、
  // 他のページでのグローバルな使用を可能にする
  window.logtoClient = new LogtoClient({
    endpoint: '<your-logto-endpoint>', // 例: http://localhost:3001
    appId: '<your-application-id>',
  });
</script>

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

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

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

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

Logto コンソールのアプリケーション詳細ページに切り替えましょう。リダイレクト URI https://your-awesome-site.webflow.io/callback を追加し、「変更を保存」をクリックします。

Webflow デザイナーに戻り、ホームページに「サインイン」ボタンをドラッグアンドドロップし、後で getElementById() を使用して参照するために ID「sign-in」を割り当てます。

<script type="module">
  const signInButton = document.getElementById('sign-in');
  const onClickSignIn = () => logtoClient.signIn('https://your-awesome-site.webflow.io/callback');
  signInButton.addEventListener('click', onClickSignIn);
</script>

リダイレクトを処理する

もう少しで完了です！最後のステップでは、https://your-awesome-site.webflow.io/callback をリダイレクト URI として使用し、これを適切に処理する必要があります。

まず、Webflow で「Callback」ページを作成し、単に「Redirecting...」という静的なテキストを配置します。次に、以下のページレベルのカスタムコードを「Callback」ページに追加します。

<script type="module">
  (async () => {
    // SDK メソッドを呼び出してサインインコールバックロジックを処理する
    await logtoClient.handleSignInCallback(window.location.href);

    // 処理が完了したらホームページにリダイレクトする
    window.location.assign('https://your-awesome-site.webflow.io');
  })();
</script>

サインアウト機能の実装

.signOut() を呼び出すと、存在する場合、メモリと localStorage 内のすべての Logto データがクリアされます。

サインアウト後に、ユーザーをあなたのウェブサイトにリダイレクトするのは素晴らしいことです。Admin Console でポストサインアウト URI の 1 つとして https://your-awesome-site.webflow.io を追加し、.signOut() を呼び出す際に URL をパラメーターとして使用しましょう。

サインアウトボタンを実装する

Webflow デザイナーに戻り、ホームページに「サインアウト」ボタンを追加します。同様に、ボタンに ID「sign-out」を割り当て、ページレベルのカスタムコードに次のコードを追加します。

const signOutButton = document.getElementById('sign-out');
const onClickSignOut = () => logtoClient.signOut('https://your-awesome-site.webflow.io');
signOutButton.addEventListener('click', onClickSignOut);

認証 (Authentication) ステータスの処理

Logto SDK では、一般的に logtoClient.isAuthenticated() メソッドを使用して認証 (Authentication) ステータスを確認できます。ユーザーがサインインしている場合、この値は true になります。そうでない場合は false になります。

Webflow サイトでも、プログラムでサインインおよびサインアウトボタンを表示および非表示にするためにこれを使用できます。次のカスタムコードを適用して、ボタンの CSS を適切に調整してください。

const isAuthenticated = await logtoClient.isAuthenticated();

signInButton.style.display = isAuthenticated ? 'none' : 'block';
signOutButton.style.display = isAuthenticated ? 'block' : 'none';

チェックポイント: Webflow サイトをテストする

次に、サイトをテストします：

サイト URL をデプロイして訪問し、サインインボタンが表示されていることを確認します。
サインインボタンをクリックすると、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 を使用した登録とログインに加えて、パスワードの回復やベースのセキュリティ検証を有効にし、メールアドレスをプロファイルにリンクすることもできます。詳細については、エンドユーザーフローを参照してください。

テストと検証

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

さらなる読み物

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

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

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

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

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

Logto SDK を統合する​

Logto プロバイダーの初期化​

サインイン機能の実装​

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

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

サインインボタンを実装する​

リダイレクトを処理する​

サインアウト機能の実装​

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

認証 (Authentication) ステータスの処理​

チェックポイント: Webflow サイトをテストする​

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

Aliyun email connector を設定する​

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

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

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

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

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

設定タイプ​

設定を保存する​

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

テストと検証​

さらなる読み物​