日本語
NetlifyでのLogtoを使用したフルスタック認証ソリューション：Webアプリとサーバーレス関数の保護
Logto認証を使用してNetlifyのWebアプリとサーバーレス関数を保護する方法を示し、ソースコードの例とライブデモのプレビューを完備。
Yijun
Developer
Developer
Logto認証を使用してNetlifyのWebアプリとサーバーレス関数を保護する方法を示し、ソースコードの例とライブデモのプレビューを完備。
Netlifyは、最新のWebプロジェクトをデプロイおよびホスティングするための強力なプラットフォームであり、シームレスなGit連携、自動ビルド、迅速でスケーラブルな開発ワークフローを実現するサーバーレス関数を提供しています。
この包括的なガイドでは、次のことを学びます:
オンラインデモプレビューをご覧ください。
このチュートリアルを始める前に設定が必要なもの:
Viteの開始ガイドに従ってReactアプリを作成します。
作成ガイドに従い、希望するテクノロジースタックを選択します。本記事ではReact + TypeScriptを選びます。
その後、プロジェクトのルートディレクトリに入り、ガイドに従って依存関係をインストールし、アプリケーションを実行します。
Netlifyで始めるガイドに従ってアプリケーションをデプロイします。
アプリをデプロイしたら、https://<your-site-name>.netlify.appでライブサイトを見ることができます。
このURLを書き留めておいてください。Logtoを設定する際に使用します。
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 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にフロントエンドプロジェクトの中からアクセスできます：
バックエンドAPIができたので、認証されたユーザーだけがアクセスできるようにする必要があります。Logtoの認証メカニズムを使用してNetlify関数を保護します。
APIエンドポイントを保護するには：
https://api.backend.com）次に、バックエンドでトークン検証を実装して、有効なアクセストークンを持つリクエストだけを処理することを保証します。
最初に、JWTトークンを検証するためにjose依存性をインストールします：
次に、バックエンドにトークン検証を実装します：
次に、Netlify関数を更新してverifyLogtoToken関数を使用します：
これで完了です！Netlify関数がLogtoにより保護され、有効なアクセストークンを持つリクエストのみが処理されます。
アプリをNetlifyにデプロイして試してみましょう！オンラインデモプレビューはこちらから参照できます。
https://<your-site-name>.netlify.appapi/helloエンドポイントからの応答データが表示されます。このガイドは、NetlifyにデプロイされたWebアプリケーションにLogto認証を統合する方法を示しています。
LogtoアプリケーションとAPIリソースを設定することで、フロントエンド認証を実装し、Netlify Functionsエンドポイントを保護しました。
より詳細なアクセス制御のためには、Logto Consoleで役割と権限を定義し、Netlify Functions内でユーザーの役割を検証することで、LogtoのRBAC (Role-Based Access Control)機能を活用できます。