NetlifyでのLogtoを使用したフルスタック認証ソリューション：Webアプリとサーバーレス関数の保護
Logto認証を使用してNetlifyのWebアプリとサーバーレス関数を保護する方法を示し、ソースコードの例とライブデモのプレビューを完備。
Developer
Netlifyは、最新のWebプロジェクトをデプロイおよびホスティングするための強力なプラットフォームであり、シームレスなGit連携、自動ビルド、迅速でスケーラブルな開発ワークフローを実現するサーバーレス関数を提供しています。
この包括的なガイドでは、次のことを学びます:
- Vite + Reactの例を使用して、NetlifyでLogtoを利用したシングルページアプリケーション（SPA）に認証を実装
- Logto認証を使用してNetlifyのサーバーレス関数を保護
- リファレンス実装を使用して本番レディのアプリケーションをデプロイ：example-vite-react-logto
オンラインデモプレビューをご覧ください。
前提条件
このチュートリアルを始める前に設定が必要なもの:
- Netlifyアカウント
- Logto Cloudのアカウント、またはセルフホストのLogtoインスタンス
Viteを使用してReactアプリを作成
Viteの開始ガイドに従ってReactアプリを作成します。
作成ガイドに従い、希望するテクノロジースタックを選択します。本記事ではReact + TypeScriptを選びます。
その後、プロジェクトのルートディレクトリに入り、ガイドに従って依存関係をインストールし、アプリケーションを実行します。
Netlifyを使用してアプリをデプロイ
Netlifyで始めるガイドに従ってアプリケーションをデプロイします。
アプリをデプロイしたら、https://<your-site-name>.netlify.appでライブサイトを見ることができます。
このURLを書き留めておいてください。Logtoを設定する際に使用します。
アプリへのLogtoの統合
Logto認証を始めるには：
- Logto Consoleの「アプリケーション」ページにアクセス
- 新しいアプリケーションを作成
- フロントエンドフレームワークを選択（例ではReact）
- 注意: ニーズに基づき任意のシングルページアプリケーション（SPA）またはネイティブアプリを作成可能
- 統合ガイドに従う：
- Logto Consoleの組み込みガイド、または
- 公式のReact認証統合ガイド
- アプリケーション詳細ページで次をメモ：
- アプリケーションID
- Logtoエンドポイント（「エンドポイントと資格情報」セクションで見つけられる。通常は
https://<your-instance>.logto.app/形式） これらの資格情報は後のステップで必要になります。
デモでは、Logtoのサインインリダイレクトを処理するために/callbackルートを使用しています。LogtoのリダイレクトURIはhttps://<your-site-name>.netlify.app/callbackとして設定する必要があります。
ユーザーがログアウトした後、ホームページに戻るので、サインアウト後のリダイレクトURIをhttps://<your-site-name>.netlify.appに設定します。
次に、Netlifyの環境変数に作成したLogtoアプリケーションの情報を設定します（あなたのウェブサイト -> サイト設定 -> 環境変数）：
次に、これらの設定をフロントエンドプロジェクトで使用します：
統合された最終コードはこちらで確認できます: example-vite-react-logto。
Netlifyにデプロイし、Logtoを通じてログインすると、URLが自動的にコールバックページにリダイレクトされないことに注意してください。これは、Netlifyがデフォルトでシングルページアプリケーション（SPA）のクライアントサイドルーティングをサポートしていないためです。
/callbackのようなパスにアクセスすると、Netlifyはサーバー上の対応するファイルを探す代わりにリクエストをReactアプリケーションに転送します。
この 場合、プロジェクトのパブリックディレクトリにある_redirectsファイルを作成して、Netlifyにすべてのリクエストをindex.htmlにリダイレクトさせる必要があります：
または、プロジェクトのルートにnetlify.tomlファイルを作成することもできます：
これでルーティングは正しく動作するはずです。
Netlify関数を使用してバックエンドAPIを作成
Netlify Functionsは、簡単ながら強力な方法でバックエンドAPIを構築できます。Netlify Functionsを使用すれば、従来のサーバー設定やメンテナンスを心配することなくサーバーサイドロジックを書くことができます。
これらの関数は、バージョン管理され、あなたのウェブサイトとともに構築され、デプロイされるため、フロントエンドとバックエンド間の開発とデプロイプロセスがシームレスになります。
Netlify Functionsを使用してバックエンドAPIを構築し始めましょう。
まず、プロジェクトのnetlifyディレクトリにfunctionsディレクトリを作成し、hello.tsファイルを作成します：
https://<your-site-name>.netlify.app/.netlify/functions/helloを訪れると、この関数が呼び出され、「こんにちは世界！」を返します。/.netlify/functions/helloというパスが少し奇妙に見える場合、パブリッ ク_redirectsファイルにリダイレクトルールを追加して、関数を呼び出すためのリダイレクトを設定できます：
これで、https://<your-site-name>.netlify.app/api/helloを訪れると、関数が呼び出され「こんにちは世界！」を返すことになります。これは、Netlify Functionsを使用してAPIを構築する一般的な方法です。
そして、フェッチを使用して、このAPIにフロントエンドプロジェクトの中からアクセスできます：
Netlify関数をLogtoで保護
バックエンドAPIができたので、認証されたユーザーだけがアクセスできるようにする必要があります。Logtoの認証メカニズムを使用してNetlify関数を保護します。
APIエンドポイントを保護するには：
- Logto ConsoleでバックエンドAPIを表すAPIリソースを作成:
- Logto Consoleの「APIリソース」に移動し、新しいAPIを作成
- 名前とAPI識別子を設定（例：
https://api.backend.com） - APIリソース詳細ページでAPI識別子をメモしておきます。後で必要になります。
- Netlify環境変数に識別子を追加して、このAPIリソースをアプリケーションに設定：
- このAPIリソースを含むようにLogto設定を更新します：
- 保護された エンドポイントへのリクエストを行うとき、フロントエンドは有効なアクセストークンを含める必要があります。次に、それをリクエストして使用する方法を示します：
次に、バックエンドでトークン検証を実装して、有効なアクセストークンを持つリクエストだけを処理することを保証します。
最初に、JWTトークンを検証するためにjose依存性をインストールします：
次に、バックエンドにトークン検証を実装します：
次に、Netlify関数を更新してverifyLogtoToken関数を使用します：
これで完了です！Netlify関数がLogtoにより保護され、有効なアクセストークンを持つリクエストのみが処理されます。
デモのテスト
アプリをNetlifyにデプロイして試してみましょう！オンラインデモプレビューはこちらから参照できます。
- ライブサイトにアクセスします：
https://<your-site-name>.netlify.app - ナビゲーションバーで「サインイン」ボタンをクリック
- Logtoユーザーアカウントでサインインするとサインイン状態になります。
- ナビゲーションバーで「プロテクトリソース」タブをクリックすると、保護されたページにリダイレクトされます。
- 「プロテクトリソースを表示」ボタンをクリックすると、
api/helloエンドポイントからの応答データが表示されます。 - ナビゲーションバーで「サインアウト」ボタンをクリックすると、ホームページにリダイレクトされます。
結論
このガイドは、NetlifyにデプロイされたWebアプリケーションにLogto認証を統合する方法を示しています。
LogtoアプリケーションとAPIリソースを設定することで、フロントエンド認証を実装し、Netlify Functionsエンドポイントを保護しました。
より詳細なアクセス制御のためには、Logto Consoleで役割と権限を定義し、Netlify Functions内でユーザーの役割を検証することで、LogtoのRBAC (Role-Based Access Control)機能を活用できます。