ASP.NET Core+React+Typerscript를 통해 인증된 웹 애플리케이션의 초기 형태 ④ 고객에게 등록, 인증 기능 추가

개요

저번까지 서버 측에 사용자 로그인 및 ID, 비밀번호 입력 후 OK/NG 반환 기능을 설치했습니다.
단지 이 점만으로는 로그인 기능이 완전하지는 않지만 동작을 확인할 수 있도록 클라이언트를 구축하고 브라우저의 조작을 통해 사용자 로그인을 하고 싶습니다.
클라이언트 추가 기능의 절차는 다음과 같다.이번에는 비교적 간단하다.

등록/로그인을 위한 입력/결과 획득 기능을 추가합니다.

코드 추가

다음 위치에 코드를 추가합니다.

Login.tsx

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="[email protected]" 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

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="[email protected]" 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

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;

동작 확인

결과에 따라 화면 마이그레이션 등 고급 처리를 하지 않고 같은 화면에서'로그인'과'아이디·비밀번호의 결과 확인'으로 구성한다.
실행하면 화면이 다음과 같이 이동합니다.
등록을 확인하기 전에 WheatherForcast 정보가 표시되는지 확인하십시오.
표시되면 서버와 통신할 수 있습니다.

사용자 등록

먼저 사용자를 등록하세요.
등록에 성공하면 다음과 같은 성공적인 결과를 얻을 수 있습니다.
겸사겸사 말씀드리지만 비밀번호는 "AB 234XX.asf"입니다.

SQLite 확장이 있으면 저쪽에서 표를 보면 사용자가 추가되었는지 확인할 수 있습니다.
(이미지에는 이 글에 확인 동작을 등록한 것 외에 일부 사용자가 추가되었다.)

로그인 성공 시

로그인에 성공한 사용자의 전자 메일 주소와 암호를 로그인 화면에 입력한 결과는 다음과 같습니다.

로그인 실패 시

등록되지 않은 ID와 잘못된 비밀번호를 입력하면 실패한 응답 결과를 되돌려줍니다 (아래 그림은 잘못된 이메일 주소입니다)

이번에는 이 정도.