Webflow との統合

はじめに#

Webflow は、ウェブサイト作成およびホスティングのための SaaS プラットフォームです。オンラインのビジュアルエディタを提供し、最小限のコードでウェブサイトのデザイン、構築、そして公開を簡単にします。

この記事では、Logto を Webflow プロジェクトに統合し、ユーザー認証をシームレスに実現する方法を解説します。

前提条件#

1. カスタムコード機能が有効な Webflow アカウント（最低でも「Basic」プランが必要）。
2. 自己ホスティングまたは Logto Cloud を使用して稼働中の Logto インスタンス。

統合ステップ#

準備#

1. Logto コンソールに移動し、「Vanilla JS」テンプレートまたは「フレームワークなしで作成」を使用してアプリケーションを作成し、アプリタイプとして「シングルページアプリケーション」を選択します。
2. Webflow ダッシュボードで新しいサイトを作成します。

JS SDK の統合#

このステップでは、サイトにグローバルレベルのカスタムコードを追加します。Webflow は静的なウェブサイトであるため、ユーザー認証には @logto/browser (Vanilla JS) SDK を使用します。NPM を使用できないため、jsdelivr.com のような CDN サービスを介して SDK をインポートします。

1. Webflow ダッシュボードで、作成したサイトにホバーし、右上の「ギア」アイコンをクリックします。
2. 開いた設定ページで、左側のナビゲーションメニューから「カスタムコード」を見つけ、「Head code」セクションに以下の JavaScript コードを貼り付けます。アプリ ID とエンドポイント URL は Logto のアプリケーション詳細から取得できます。

サインインの実装#

1. Logto コンソールに移動し、アプリケーション設定で「リダイレクト URI」フィールドを見つけて https://your-awesome-site.webflow.io/callback を入力し、「変更を保存」をクリックします。
2. Webflow デザイナーに戻り、ホームページに「サインイン」ボタンを追加します。このチュートリアルを簡単にするために、ボタンに getElementById() を使用するための ID「sign-in」を割り当てます。

3. 次に、ホームページにページレベルのカスタムコードを追加します。ページメニューのギアアイコンをクリックし、画面下部のカスタムコードセクションを見つけます。以下のコードを貼り付けて、サインインボタンのクリックハンドラをバインドします。

4. Webflow で新しい「Callback」ページを作成し、単に静的なテキスト「Redirecting…」を置きます。このページで以下のカスタムコードを使用してサインインコールバックロジックを処理します。

5. これで、Webflow サイトをデプロイしてサインインフローをテストできます。デプロイ後、ホームページに「サインイン」ボタンが表示されます。それをクリックすると、Logto がホストするサインインページに移動します。サインイン後、最初に「Callback」ページにリダイレクトされ、「Redirecting…」テキストが表示され、その後ホームページに戻ります。

サインアウトの実装#

1. Logto コンソールで、アプリケーション設定にある「サインアウト後のリダイレクト URI」を見つけ、Webflow サイトの URL https://your-awesome-site.webflow.io を入力します。
2. Webflow デザイナーに戻り、ホームページに「サインアウト」ボタンを追加します。同様にボタンに「sign-out」の ID を割り当て、ページレベルの「カスタムコード」に以下のコードを追加します。

認証状態の処理#

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

Webflow サイトでも、サインインボタンとサインアウトボタンをプログラムで表示・非表示にするために使用できます。ボタンの CSS を調整するために次のカスタムコードを適用します。

ユーザー名を取得してウェルカムメッセージを表示#

1. ホームページに ID「container」のフレックスコンテナを追加し、その中に ID「username」の「見出し 1」要素を挿入します。
2. サインイン成功後に自動的にユーザー情報を取得し、「見出し 1」要素のユーザー名を置き換え、コンテナを表示します。これを次のカスタムコードで行います。

チェックポイント: アプリケーションのテスト#

これで Webflow サイトをテストできます:

1. サイト URL をデプロイして訪問し、サインインボタンが表示されることを確認します。
2. サインインボタンをクリックすると、SDK はサインインプロセスを開始し、Logto のサインインページにリダイレクトされます。
3. サインイン後、サイトに戻され、ユーザー名とサインアウトボタンが表示されます。
4. サインアウトボタンをクリックしてサインアウトします。

まとめ#

このチュートリアルでは、Webflow と Logto の統合方法を紹介しました。@logto/browser SDK を使用することで、いくつかのステップで任意の Webflow サイトにユーザー認証を簡単に統合できます。

詳細については、JWT アクセストークンの取得や RBAC（ロールベースアクセス制御）の処理などを含む、当社のドキュメントサイトでの完全な Webflow 統合ガイド を参照してください。

Webflow デモはこちらで読み取り専用モードで確認でき、デプロイされたサイトはhttps://charless-trendy-site-f191c0.webflow.io/ で利用可能です。