More than 1 year has passed since last update.

タスク管理ツールをReact + ASP.Coreで作る017クライアントに登録・認証機能を追加

Last updated at 2022-11-12Posted at 2022-11-07

ガイド

全体Index：タスク管理ツールをReact + ASP.Coreで作る - Index

認証機能追加の一連の流れ

概要

前回までで、サーバーサイドに認証機能関連のパッケージとコードの追加を実施しました。
サーバー側で認証状態による各APへのアクセス制御をまだ組み込んでいないので、今のところ動作に違いはありません。またアクセス制御を有効にする前にクライアント側に「ユーザー登録」、「ログイン」などの機能を作っておく必要があるので、今回はそれらを実装していきます。

構築

本記事で実施する内容のサマリー

登録・ログインのための入力・結果取得用の機能追加。

コード追加

以下の場所にコードを追加します。

Login.tsx

import React, { SyntheticEvent, useState } from 'react';

const Login = (
    ) => 
{
    
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [resultcode, setResultcode] = useState(0);
    const [resultTitle, setResultTitle] = useState('');



    const submit = async (e: SyntheticEvent) => {
        e.preventDefault();
        const response = await fetch('https://localhost:5001/account/login',
        {
            method : 'POST',
            headers:{'Content-Type' : 'application/json'},
            body: JSON.stringify({
                email,
                password
            })
        });
        const content = await response.json();
        const status = await response.status

        setResultcode(status);
        setResultTitle(content.title);
        if(status==200){
            setName(content.username);

        }

    }

    
    return (
        <>
        <form onSubmit={submit}>
            <h2>Sign in</h2>

            <ul>

                <li>
                    <label>email</label>
                    <input type="email" placeholder="name@example.com" required 
                        onChange = {e => setEmail(e.target.value)}            
                    />
                </li>

                <li>                    
                    <label>password</label>
                    <input type="password" placeholder="Password" required 
                        onChange = {e => setPassword(e.target.value)}            
                    />
                </li>
            </ul>

            <button type="submit">Sign in</button>

        </form>
        
        <h2>Response</h2>

        <ul>
            <li>
                {resultcode!=0 && <>{resultcode==200 ? <>Login Success</> : <>Login Fail</>}</>}
            </li>

            <li>
                {resultcode==200 && <>Name:{name}</>}
            </li>

            <li>
                {resultcode!=0 && <>Code:{resultcode}</>}
            </li>

            <li>
                {resultcode!=0 && <>msg:{resultTitle}</>}
            </li>
        </ul>
        </>
    );

}

export default Login;

Register.tsx

import React, { SyntheticEvent, useState } from 'react';

const Register = () => {
    
    const [username, setName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [resultcode, setResultcode] = useState(0);
    const [resultTitle, setResultTitle] = useState('');

    const submit = async (e: SyntheticEvent) => {
        e.preventDefault();
        const response = await fetch('https://localhost:5001/account/register',
        {
            method : 'POST',
            headers:{'Content-Type' : 'application/json'},
            body: JSON.stringify({
                email,
                username,
                password
            })
        });
        const content = await response.json();
        const status = await response.status

        setResultcode(status);
        setResultTitle(content.title);
    }

    
    return (
        <>
        <form onSubmit={submit}>
            <h2>Register</h2>

            <ul>
                <li>
                    <label>Name</label>
                    <input placeholder="Name" required
                        onChange = {e => setName(e.target.value)}            
                    />
                </li>

                <li>
                    <label>email</label>
                    <input type="email" placeholder="name@example.com" required 
                        onChange = {e => setEmail(e.target.value)}            
                    />
                </li>

                <li>                    
                    <label>password</label>
                    <input type="password" placeholder="Password" required 
                        onChange = {e => setPassword(e.target.value)}            
                    />
                </li>
            </ul>

            <button type="submit">Register</button>

        </form>
        
        <h2>Response</h2>

        <ul>
            <li>
                {resultcode!=0 && <>{resultcode==200 ? <>Register Success</> : <>Register Fail</>}</>}
            </li>

            <li>
                {resultcode!=0 && <>Code:{resultcode}</>}
            </li>

            <li>
                {resultcode!=0 && <>msg:{resultTitle}</>}
            </li>
        </ul>
        </>
    );

}

export default Register;

App.tsx


import React from 'react';
import logo from './logo.svg';
import './App.css';
import { WeatherForecast } from './WeatherForecast';
+import Register from './Account/Register';
+import Login from './Account/Login';

function App() {
  return (
    <div>
+      <Login />
+      <hr />
+      <Register />
+      <hr />
      <WeatherForecast />
    </div>
  );
}

export default App;