## はじめに [Webflow](https://webflow.com/) は、ウェブサイト作成およびホスティングのための SaaS プラットフォームです。オンラインのビジュアルエディタを提供し、最小限のコードでウェブサイトのデザイン、構築、そして公開を簡単にします。この記事では、Logto を Webflow プロジェクトに統合し、ユーザー認証をシームレスに実現する方法を解説します。 ## 前提条件 1. カスタムコード機能が有効な Webflow アカウント（最低でも「Basic」プランが必要）。 2. 自己ホスティングまたは [Logto Cloud](https://cloud.logto.io/) を使用して稼働中の Logto インスタンス。 ## 統合ステップ ### 準備 1. Logto コンソールに移動し、「Vanilla JS」テンプレートまたは「フレームワークなしで作成」を使用してアプリケーションを作成し、アプリタイプとして「シングルページアプリケーション」を選択します。 2. Webflow ダッシュボードで新しいサイトを作成します。 ### JS SDK の統合このステップでは、サイトにグローバルレベルのカスタムコードを追加します。Webflow は静的なウェブサイトであるため、ユーザー認証には **`@logto/browser`** (Vanilla JS) SDK を使用します。NPM を使用できないため、[jsdelivr.com](https://www.jsdelivr.com/) のような CDN サービスを介して SDK をインポートします。 1. Webflow ダッシュボードで、作成したサイトにホバーし、右上の「ギア」アイコンをクリックします。 2. 開いた設定ページで、左側のナビゲーションメニューから「カスタムコード」を見つけ、「Head code」セクションに以下の JavaScript コードを貼り付けます。アプリ ID とエンドポイント URL は Logto のアプリケーション詳細から取得できます。 ```html ``` ### サインインの実装 Webflow サイトが `https://your-awesome-site.webflow.io` で実行されていると仮定します。 1. Logto コンソールに移動し、アプリケーション設定で「リダイレクト URI」フィールドを見つけて `https://your-awesome-site.webflow.io/callback` を入力し、「変更を保存」をクリックします。 2. Webflow デザイナーに戻り、ホームページに「サインイン」ボタンを追加します。このチュートリアルを簡単にするために、ボタンに `getElementById()` を使用するための ID「sign-in」を割り当てます。サインインボタンの設定

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

```html ``` 4. Webflow で新しい「Callback」ページを作成し、単に静的なテキスト「Redirecting…」を置きます。このページで以下のカスタムコードを使用してサインインコールバックロジックを処理します。 ```html ``` 5. これで、Webflow サイトをデプロイしてサインインフローをテストできます。デプロイ後、ホームページに「サインイン」ボタンが表示されます。それをクリックすると、Logto がホストするサインインページに移動します。サインイン後、最初に「Callback」ページにリダイレクトされ、「Redirecting…」テキストが表示され、その後ホームページに戻ります。 ### サインアウトの実装 1. Logto コンソールで、アプリケーション設定にある「サインアウト後のリダイレクト URI」を見つけ、Webflow サイトの URL `https://your-awesome-site.webflow.io` を入力します。 2. Webflow デザイナーに戻り、ホームページに「サインアウト」ボタンを追加します。同様にボタンに「sign-out」の ID を割り当て、ページレベルの「カスタムコード」に以下のコードを追加します。 ```js const signOutButton = document.getElementById('sign-out'); const onClickSignOut = () => logtoClient.signOut('https://your-awesome-site.webflow.io'); signOutButton.addEventListener('click', onClickSignOut); ``` ### **認証状態の処理** Logto SDK では、一般的に `logtoClient.isAuthenticated()` メソッドを使用して認証状態を確認します。ユーザーがサインインしている場合、その値は `true` になります。そうでない場合は `false` になります。 Webflow サイトでも、サインインボタンとサインアウトボタンをプログラムで表示・非表示にするために使用できます。ボタンの CSS を調整するために次のカスタムコードを適用します。 ```js const isAuthenticated = await logtoClient.isAuthenticated(); signInButton.style.display = isAuthenticated ? 'none' : 'block'; signOutButton.style.display = isAuthenticated ? 'block' : 'none'; ``` ### ユーザー名を取得してウェルカムメッセージを表示 1. ホームページに ID「container」のフレックスコンテナを追加し、その中に ID「username」の「見出し 1」要素を挿入します。 2. サインイン成功後に自動的にユーザー情報を取得し、「見出し 1」要素のユーザー名を置き換え、コンテナを表示します。これを次のカスタムコードで行います。 ```js const container = document.getElementById('container'); container.style.display = isAuthenticated ? 'flex' : 'none'; if (isAuthenticated) { (async () => { const user = await logtoClient.fetchUserInfo(); username.innerText = 'Welcome back: ' + user.name; })(); } ``` ### チェックポイント: アプリケーションのテストこれで Webflow サイトをテストできます: 1. サイト URL をデプロイして訪問し、サインインボタンが表示されることを確認します。 2. サインインボタンをクリックすると、SDK はサインインプロセスを開始し、Logto のサインインページにリダイレクトされます。 3. サインイン後、サイトに戻され、ユーザー名とサインアウトボタンが表示されます。 4. サインアウトボタンをクリックしてサインアウトします。 ## まとめこのチュートリアルでは、Webflow と Logto の統合方法を紹介しました。**`@logto/browser`** SDK を使用することで、いくつかのステップで任意の Webflow サイトにユーザー認証を簡単に統合できます。詳細については、JWT アクセストークンの取得や RBAC（ロールベースアクセス制御）の処理などを含む、当社のドキュメントサイトでの[完全な Webflow 統合ガイド](https://docs.logto.io/quick-starts/webflow/) を参照してください。 Webflow デモは[こちら](https://preview.webflow.com/preview/charless-trendy-site-f191c0?utm_medium=preview_link&utm_source=designer&utm_content=charless-trendy-site-f191c0&preview=0eae5f73661a8a5791787f0438bc29de&workflow=preview)で読み取り専用モードで確認でき、デプロイされたサイトは[https://charless-trendy-site-f191c0.webflow.io/](https://charless-trendy-site-f191c0.webflow.io/) で利用可能です。