JSONサーバAuthを用いた模擬ユーザ認証の基本要件

最初のときに初心者として反応アプリを構築すると、あなたのプロジェクトに含めるすべてのこれらのクールなアイデアを持っている可能性がありますが、1つのことを保持するユーザー認証システムでは、あなたのアプリケーションに別のユーザーの情報を格納することができます.たぶんあなたはフロントエンドであなたのスキルを磨くし、ちょうどこれを処理するための広範なバックエンドを構築するためのリソースを持っていない.ここでは、この機能を模擬するために必要なものの最低限を歩いていきます.

ライブラリ
我々の例は、すべての魔法が起こるように、json-serverとjson-server-authライブラリを利用しています.タンデムの両方を使用すると、プロトタイプのように、私たちのフロントエンドアプリケーションを認証のようなシステムを模擬することができます.これらのライブラリは、ローカルのJSONファイルを使用して、サーバーに要求を行っているかのようにすべてのデータを保存します.代わりに、JSONサーバーは、クライアント側で完全にその情報を取得するには、当社のデータベースJSONファイルを監視します.
JSON ServerとJSON Server AUTHをプロジェクトにインストールするには、対応するパッケージマネージャーに応じて対応するコマンドを実行します.

# NPM
npm install -D json-server json-server-auth

# Yarn
yarn add -D json-server json-server-auth

ファイルの設定
あなたのデータを保存したいJSONファイルを含めるようにしてください(我々はこのDB . JSONを呼びます)、そして、それにコレクションを与えてください.そのコレクションの名前は重要で、' register ', ' signup ', ' user 'と呼ばれます.あなたがPOST要求をしているとき、JSON Server Authは正しくルートにこれらを探すでしょう.この例では' user 'を使用します.

{
 "users": []
}

今、あなたはサインアップを作成し、フォームを管理するために必要なユーザーを管理できるように設定されています!JSONサーバーAuthとの反応アプリを実行するには、次のコマンドを1つの端末で実行します.

json-server --watch db.json -m ./node_modules/json-server-auth

次に、適切なコマンドを使用して反応アプリを起動することがあります.

#NPM
npm start

#YARN
yarn start

新しいユーザーの流れを経て、私たちは最初に私たちのフロントエンドに表示されるコンポーネントにサインアップします.ここでは、私たちの新しいユーザー情報を収集するために使用される制御フォームを設定して送信すると、データベース内の新しいユーザーを作成します.

import { useState } from "react"

function Signup() {
    const [formData, setFormData] = useState({
        email: '', // required
        password: '', // required
        username: '' // optional
    })

    function handleSubmit(e) {
        e.preventDefault()
        fetch('http://localhost:3000/users', {
            method: 'POST',
            headers: {'Content-Type' : 'application/json'},
            body: JSON.stringify(formData)
        })
        .then(res => res.json())
        .then(data => console.log(data))
    }

    function handleChange(e) {
        setFormData({...formData, [e.target.name] : e.target.value})
    }

    return (
        <div>
            <h1>Signup Form</h1>
            <form className='login-form' onSubmit={e => handleSubmit(e)}>
                <input type='text' placeholder='Username' value={formData.username} name='username' onChange={e => handleChange(e)} ></input>
                <input type='text' placeholder='Email' value={formData.email} name='email' onChange={e => handleChange(e)} ></input>
                <input type='text' placeholder='Password' value={formData.password} name='password' onChange={e => handleChange(e)} ></input>
                <button className='login-btn' type='submit'>Sign Up</button>
            </form>
        </div>
    )
}

export default Signup

私たちのhandlesubmit関数を見て、私たちは私たちのlocalhostサーバーが実行されている場所の/ユーザにポストリクエストを作りたいです.我々が要求をしているFormData本体は、少なくとも'メール'と'パスワード'を含まなければなりません.
ログインコンポーネントの次のように定義できます.

import { useState } from "react"

function Login() {

    const [formData, setFormData] = useState({
        email: '', // required
        password: '' // required
    })

    function handleSubmit(e) {
        e.preventDefault()
        fetch('http://localhost:3000/login', {
            method: 'POST',
            headers: {'Content-Type' : 'application/json'},
            body: JSON.stringify(formData)
        })
        .then(res => res.json())
        .then(data => console.log(data.user))
    }

    function handleChange(e) {
        setFormData({...formData, [e.target.name] : e.target.value})
    }

    return (
        <div>
            <h1>Login Form</h1>
            <form className='login-form' onSubmit={e => handleSubmit(e)}>
                <input type='text' placeholder='Email' value={formData.email} name='email' onChange={e => handleChange(e)} ></input>
                <input type='text' placeholder='Password' value={formData.password} name='password' onChange={e => handleChange(e)} ></input>
                <button className='login-btn' type='submit'>Login</button>
            </form>
        </div>
    )
}

export default Login

我々は我々のサインアップフォームに非常に類似したポスト要求を持っています、しかし、今回は、我々は我々のデータベースの既存のユーザーを認証するためにユーザーの電子メールとパスワードだけを探しています.また、ログインコレクションを明示的に作成しない場合でも、このインスタンスでのログイン/ログインに注意してください.

フロントエンド
あなたの好みにスタイルをフォームにして、おそらくあなたのアプリケーションの対応するページに適切なルーティングをしたいと思いますが、単純さのために、我々はJSONサーバーAuthを実証するために1ページにそれらをレンダリングします.現在のDOMにコンポーネントをレンダリングする

我々のユーザーは、入力して情報をサインアップし、一度提出し、我々のDBに投稿することができます.JSONファイルを新しいユーザにします

{
  "users": [
    {
      "email": "[email protected]",
      "password": "$2a$10$TGpBQYJF6bQFEipnwaaoiuCRVht/.jAyrOYQnq8Xz5CvXYNu6O2LO",
      "username": "myusername",
      "id": 1
    }
  ]
}

JSON Server Authがユーザーのパスワードを暗号化していることに注意してください.しかし、適切なデータでログインすると、そのユーザーオブジェクトの内容にアクセスできます.一旦我々のユーザーがフォームで彼らのログを提出するならば、我々は我々のフェッチの応答から彼らのデータにアクセスすることができます.上のコンポーネントのログでデータをログ出力します.ユーザとそれには次のようなものがあります.

このデータから、ユーザー名、メール、およびユーザーに与えられたIDにアクセスできます.

ラッピング
アプリケーションの大規模なスケールでは、ユーザーの情報を作成する際に、より多くのオプションフィールドを使用することができます.しかし、一度ユーザーのログインを処理することができます、空はあなたのデータを行うことができます制限です.これはメールとパスワードだけで基本的なレベルで動作しますが、JSONサーバAuthについてもっと読みたい場合は、トークンや認可の流れについてさらなる機能を持っています.