こんにちは、みなさん！ 私は最近、Webflow OAuth を自分のアプリに統合するというタスクに取り組みました。コーディングをしない人間として、Xano をバックエンドとして、Webflow をフロントエンドとして使用するアプローチを共有したいと思いました。あなたがコーディングのプロの方は、ご容赦ください。腐ったトマトを投げないでください。これは、コーディングを必要としないものであり、あなたの旅を少しでもスムーズにすることを願っています。 TLDR: 視覚的に学習したい人のために、すべての手順をビデオにまとめましたが、プロセスの詳細なテキスト バージョンは以下にあります。 https://youtu.be/bTUatl6eTec?embedable=true OAuth を理解する OAuth がどのように動作するかという基本的な概念を簡単に理解しましょう。これを想像してみてください。あなたは休暇中で、外国でアパートを借りたいと考えています。ユニットを借りることができるアパートビルを見つけました。到着時に、オーナーはすべてのアパートの鍵を渡す代わりに、特定のアパートのキーロックボックスにアクセスするためのワンタイムコードを送信します。 このコードを使用してロックボックスを開け、キーカードを取得すると、滞在中にアパートメントにアクセスできるようになります。 この例えでは、Webflow はアパートの所有者を表し、ワンタイム コードはアクセス コードとして機能し、キー カードはアクセス トークンに相当します。 ユーザーの Webflow プロジェクトに関する情報 (ページ、アセット、コレクション、フォームのリストなど) にアクセスする必要がある場合は、アクセス トークンが必要になります。このトークンは、ユーザーに代わって Webflow に送信される API リクエストで使用されます。 以下の例では、アクセス トークンをデータベースに保存せずに、ユーザーのプロジェクトに関する情報を表示する単純な Webflow アプリを構築する方法を示します (ただし、実際のシナリオでは、ユーザーに関連付けられたトークンを保存することをお勧めします)。 ステップ 1: 新しい Webflow アプリを作成する Webflow ダッシュボードの「アプリと統合」タブに移動し、新しいアプリを作成します。アプリの名前、説明、ホームページの URL など、アプリに関する一般的な情報を入力します。必要なアクセス許可を指定します。この例ではデータ クライアント アプリを使用し、「サイト」への「読み取り」アクセスを許可します。必要に応じて、これらの権限を後で調整できます。 ここで必要となる重要な情報は、アプリ用に自動的に生成される と です。ここでは、「リダイレクト URL」フィールドを空白のままにしておきます。次のステップでもう一度見てみましょう。 Client ID Client Secret ステップ 2: 新しい Webflow プロジェクトをフロントエンドとして設定する ホームとサイトの 2 つのページを持つ新しい Webflow プロジェクトを作成します。ホーム ページに、「Show Sites」というラベルのボタンを追加します。これにより、Webflow へのアクセス コードのリクエストがトリガーされます。 ボタンの URL を に設定し、 YOUR_CLIENT_ID を前に取得した実際のクライアント ID に置き換えます。アプリに追加の権限が必要な場合は、URL を調整します。 https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread このボタンをクリックすると、ユーザーに権限画面が表示され、アクセスを許可するプロジェクトを選択できます。アプリを承認すると、 リダイレクト URL にリダイレクトされます。忘れずに、[サイト] ページ (作成した 2 番目のページ) の URL をコピーし、アプリの [リダイレクト URL] フィールドに貼り付けてください。 この手順を完了したら、[サイトの表示] をクリックすると、URL にアクセス コードが含まれた状態でユーザーがサイト ページにリダイレクトされます。 ステップ 3: Xano プロジェクトのセットアップと最初の API の作成 Xano で新しいプロジェクトを作成し、[API] タブに移動します。新しい API グループを追加し、そのグループ内に新しい API エンドポイントを追加します。これを「getToken」と呼びます。 「getToken」エンドポイント内: 「accessCode」という名前のテキスト入力を追加して、フロントエンドからアクセス コードを受け取ります。 本体パラメーターを使用して に POST リクエストを作成します。 https://api.webflow.com/oauth/access_token client_id: クライアント ID client_secret: クライアント シークレット 許可タイプ: 認可コード コード: accessCode (入力からの変数を使用) 最初の API リクエストの出力を「accessToken」として定義します。これがユーザーに関連付けられたアクセス トークンになります。 2 番目の API リクエスト (デモンストレーション目的) を実行して、ユーザーのサイト リストを取得します ( への GET リクエスト)。次のヘッダーを含めます。 https://api.webflow.com/v2/sites 受け入れる: アプリケーション/json 認可: accessToken.response.result.access_token 2 番目の API の出力を、Webflow プロジェクトのリストを表す「siteList」として定義します。 応答で「siteList」を返します。 後で使用するために API エンドポイント URL をコピーします。 ステップ 4: Webflow プロジェクトからのフロントエンド リクエストの構成 Webflow プロジェクトに戻り、「サイト」ページを開きます。このページは、ユーザーが Webflow プロジェクトへのアクセスを許可した後にリダイレクトされるページです。ここで、カスタム コード領域の </body> タグの前に次の JavaScript 関数を追加します。 まず、サイトを取得する 関数を作成しましょう。 getSites() function getSites() { const url = window.location.search; const params = new URLSearchParams(url); const accessCode = params.get('code'); const options = { method: 'POST', headers: {accept: 'application/json', 'content-type': 'application/json'}, body: JSON.stringify({accessCode: accessCode}) }; fetch('YOUR_API_ENDPOINT', options) .then(response => response.json()) .then(response => { const siteList = response.response.result.sites; showSites(siteList); }) .catch(err => console.log(err)); } 次に、取得したサイトを表示する 関数を作成しましょう。 showSites() function showSites(sites) { const container = document.querySelector('#result'); sites.forEach(site => { const siteDiv = document.createElement('div'); siteDiv.classList.add('site'); const siteContent = `<h2>${site.displayName}</h2> <p><strong>ID:</strong> ${site.id}</p> <p><strong>Workspace ID:</strong> ${site.workspaceId}</p> <p><strong>Short Name:</strong> ${site.shortName}</p> <p><strong>Time Zone:</strong> ${site.timeZone}</p> <p><strong>Created On:</strong> ${site.createdOn}</p> <p><strong>Last Updated:</strong> ${site.lastUpdated}</p> <p><strong>Last Published:</strong> ${site.lastPublished}</p> <img src="${site.previewUrl}" alt="Preview"> `; siteDiv.innerHTML = siteContent; container.appendChild(siteDiv); }); } 最後に、ページの読み込み時に 関数が実行されることを確認します。 getSites() document.addEventListener('DOMContentLoaded', function() { getSites(); }); そして、それができました！このガイドがノーコーダーの仲間にとって役立つことを願っています。 ご質問がある場合、またはさらに詳しい説明が必要な場合はお気軽にお問い合わせください。コーディングを楽しんでください!
