Nuxt 3 Laravel Sanctum認証：スパとAPIを簡単に保護します

堅牢な認証は、ユーザーデータとアプリケーションの整合性を保護するための最新のWeb開発で最も重要です。 nuxt-sanctum-authenticationモジュールは、Nuxt 3とLaravel Sanctumの間のシームレスな統合を提供し、シングルページアプリケーション（SPA）とAPIトークンベースの認証の複雑さを簡素化します。 このモジュールは、CSRF保護、ベアラートークン管理などのタスクを効率的に処理し、サーバー側のレンダリング（SSR）とクライアント側のレンダリング（CSR）の両方をサポートします。 安全なログインシステムまたはAPI駆動型プロジェクトを構築するかどうかにかかわらず、このモジュールは簡単なソリューションを提供します。

先に進む前に、これらの役立つリソースを調べてください：

• モジュールリポジトリ：nuxt-sanctum-authentication
• ドキュメント：nuxt sanctum認証ドキュメント
• デモリポジトリ：nuxt-sanctum-authentication-demo
Laravel Sanctumをnuxt 3

と統合します

モジュールのインストール

nuxt-sanctum-authenticationモジュールは、Nuxt 3とLaravel Sanctumの統合を合理化し、CSRFトークンの取り扱いやベアラートークンを含むSPAおよびAPI認証の複雑さを管理しています。

nuxt 3アプリケーション内にパッケージをインストールします：

nuxt-sanctum-authentication

の構成

npm install @qirolab/nuxt-sanctum-authentication

インストール後、

：nuxt.config.tsにモジュールを追加します

この構成は、LaravelアプリケーションのAPI URLを指定します。 nuxt.config.tsログイン機能の実装

export default defineNuxtConfig({
  modules: ["@qirolab/nuxt-sanctum-authentication"],
  sanctum: {
    apiUrl: "http://api.yourapp.test",  // Replace with your Laravel API URL
  },
});

ユーザーが資格情報を入力するNUXT 3アプリケーションにログインページを作成します。 ログインリクエストを管理するために

Composableを使用します。 基本的な例：

このフォームは、CSRFトークンを使用した安全な通信を確保するために、Sanctumのログインエンドポイントを介してユーザー資格情報をバックエンドに送信します。

SPA vs. APIトークン認証

useSanctum()モジュールは、CookieベースのSPA認証にデフォルトです。 APIトークン認証の場合は、

：

<template>
  <form>
    <input v-model="form.email" type="email" placeholder="Email">
    <input v-model="form.password" type="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>
</template>

in

を変更します

CORSの問題を解決する

クロスオリジン認証をセットアップする場合、

オリジンリソース共有（CORS）エラーが一般的です。 laravelauthMode：nuxt.config.tsを調整します

sanctum: {
  apiUrl: "http://api.yourapp.test",
  authMode: "token",  // Enables token-based authentication
}

配列にログインエンドポイントを含めて、CORSリクエストを有効にします。

テストとセキュリティ

config/cors.php構成後、ログインページをテストします。 ブラウザの開発者ツール（ネットワークタブ）でログイン要求を検査します。 CORSエラーのない成功した応答は、正しい構成を示します。 Nuxt 3とLaravel Sanctumの組み合わせは、SPAとAPIの両方に堅牢で簡単に実装された認証ソリューションを提供します。

nuxt-sanctum-authentication

の利点 このモジュールは、CSRFトークン、ベアラートークン、SSRとCSRをシームレスにサポートすることにより、Nuxt 3とLaravel Sanctumの間の認証を簡素化します。

結論

Laravel SanctumでNuxt 3アプリケーションを保護することは、

モジュールで簡素化されます。 このガイドは、ユーザーに安全で効率的な認証を実装するための明確なパスを提供します。

以上がNuxt 3 Laravel Sanctum認証：スパとAPIを簡単に保護しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。