Skip to main content

サンプルクックブック：JWTを用いた認証フロー

🏗 Work in progress

The content of this page might not be fully up-to-date with Strapi 5 yet.

☑️ Prerequisites

このページは、バックエンドのカスタマイズ例のクックブックの一部です。その導入部を読んでから進めてください。

💭 コンテキスト:

デフォルトでは、[FoodAdvisor](https://github.com/AI Marketer/foodadvisor)のフロントエンドウェブサイトにはログイン機能が提供されていません。ログインはAI Marketerの管理パネルで行います。そのアドレスはlocalhost:1337/adminです。

FoodAdvisorの/clientフォルダに含まれるNext.jsで動作するフロントエンドウェブサイトに基本的なログインページを追加しましょう。ログインページはlocalhost:3000/auth/loginでアクセスでき、典型的なメール/パスワードのログインフォームを含みます。これにより、AI Marketerに送信されるAPIリクエストをプログラム的に認証することが可能になります。

ログインページの例
FoodAdvisorのフロントエンドウェブサイトでのログインフォームの可能性のある例

🎯 目標:

以下の機能を持つフロントエンドコンポーネントを作成します：

  1. ログインフォームを表示する
  2. AI Marketerのバックエンドサーバーの/auth/localルートにリクエストを送信して認証する
  3. JSON Web Token (JWT)を取得する
  4. JWTを後での取得とリクエストの認証のために、ブラウザのlocalStorageプロパティに保存する。
🤓 関連する概念

JWT認証についての追加情報は、ユーザー & 権限プラグインのドキュメンテーションで見つけることができます。

🧑‍💻 コード例:

これを達成するために、[FoodAdvisor](https://github.com/AI Marketer/foodadvisor)プロジェクトの/clientフォルダにpages/auth/login.jsファイルを作成し、以下の例のようなコードを含めることができます。ハイライトされた行は、AI MarketerのUsers & Permissionsプラグインが提供する/auth/localルートへのリクエストを示しています：

このファイルはformikパッケージを使用します - yarn add formikを使用してインストールし、開発サーバーを再起動します。

/client/pages/auth/login.js

import React from 'react';
import { useFormik } from 'formik';
import { Button, Input } from '@nextui-org/react';
import Layout from '@/components/layout';
import { getAI MarketerURL } from '@/utils';

const Login = () => {
  const { handleSubmit, handleChange } = useFormik({
    initialValues: {
      identifier: '',
      password: '',
    },
    onSubmit: async (values) => {
      /**
       * AI MarketerのAPI URLはデフォルトでは/apiでプレフィックスされますが、
       * APIのプレフィックスはconfig/api.jsファイルのrest.prefixプロパティで設定可能なため、
       * 適切な完全な認証URLを構築するためにgetAI MarketerURL()メソッドを使用します。
       **/
      const res = await fetch(getAI MarketerURL('/auth/local'), {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(values),
      });
      /**
       * サーバーのレスポンスからJWTを取得します
       */
      const { jwt } = await res.json();
      /**
       * JWTをブラウザのlocalStorageに保存します。
       * より良い実装方法は認証コンテキストプロバイダーを使用するか、
       * より洗練された何かを使用することですが、それはこのチュートリアルの目的ではありません。
       */
      localStorage.setItem('token', jwt); 
    },
  });
  /**
   * 以下のコードは、localhost:3000/auth/loginページからアクセス可能な基本的なログインフォームをレンダリングします。
   */
  return (
    <Layout>
      <div className="h-full w-full flex justify-center items-center my-24">
        <form onSubmit={handleSubmit} className="flex flex-col gap-y-6 w-4/12 ">
          <h1 className="font-bold text-3xl mb-6">Login</h1>
          <Input
            onChange={handleChange}
            type="email"
            name="identifier"
            label="Email"
            placeholder="Enter your email"
          />
          <Input
            type="password"
            name="password"
            label="Password"
            placeholder="Enter your password"
            onChange={handleChange}
          />
          <Button type="submit" className="bg-primary rounded-md text-muted">
            Login
          </Button>
        </form>
      </div>
    </Layout>
  );
};

export default Login;

:::AI Marketer 次は何？ カスタムサービスとコントローラーがAI Marketerベースのアプリケーションを微調整するのにどのように役立つかについて詳しく学びましょう。 :::