로그인 및 인증을 위하여 기본적으로 만들어 져 있는 users table 과 User Model을 이용하여 사용자를 추가해 보았다
API를 이용한 register기능을 위해 Book Model과 같은 과정을 거쳤다
1. 기본적으로 만들어져 있는 user table의 구조이다
mysql> desc users;
+-------------------+-----------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+-------------------+-----------------+------+-----+---------+----------------+
| id | bigint unsigned | NO | PRI | NULL | auto_increment |
| name | varchar(255) | NO | | NULL | |
| email | varchar(255) | NO | UNI | NULL | |
| email_verified_at | timestamp | YES | | NULL | |
| password | varchar(255) | NO | | NULL | |
| remember_token | varchar(100) | YES | | NULL | |
| created_at | timestamp | YES | | NULL | |
| updated_at | timestamp | YES | | NULL | |
+-------------------+-----------------+------+-----+---------+----------------+
2. controller 생성
ldw@ldw-bmax:~/laravel/restapi php artisan make:controller --resource
┌ What should the controller be named? ───────────────────────┐
│ UserController │
└────────────────────────────────────────────────┘
INFO Controller [app/Http/Controllers/UserController.php] created successfully.
3. resource 생성
ldw@ldw-bmax:~/laravel/restapi$ php artisan make:resource UserResource
INFO Resource [app/Http/Resources/UserResource.php] created successfully.
<?php
namespace App\Http\Resources;
use Illuminate\Http\Request;
use Illuminate\Http\Resources\Json\JsonResource;
class UserResource extends JsonResource
{
/**
* Transform the resource into an array.
*
* @return array<string, mixed>
*/
public function toArray(Request $request): array
{
//return parent::toArray($request);
return [
'name' => $thisi->name,
'email' => $this->email,
'created_at' => $this->created_at,
'id' => $this->id,
];
}
}
4. router 수정
routers/api.php
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BookController;
use App\Http\Controllers\UserController;
.................
Route::get('/users', [UserController::class, 'index']);
Route::post('/users', [UserController::class, 'store']);
6. controller 수정
store()와 결과를 보여주기 위해 index() 함수를 만들었고,
password는 Hash::make() 함수를 이용 hash해 주었다
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use App\Http\Controllers\UserController;
use App\Http\Resources\UserResource;
use Illuminate\Support\Facades\Hash;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index()
{
$users = User::all();
return UserResource::collection($users);
}
/**
* Store a newly created resource in storage.
*/
public function store(Request $request)
{
$validatedData = $request->validate([
'name' => ['required', 'string', 'unique:users'],
'email' => ['required', 'email', 'unique:users,email'],
'password' => ['required', 'string', 'min:8'],
]);
$validatedData['password'] = Hash::make($validatedData['password']);
$user = User::create($validatedData);
return new UserResource($user);
}
}
7. React 에 register page 작성
Regster.js
import {Button, Container, Table, Form, InputGroup} from 'react-bootstrap'
import axios from "axios"
import { useEffect, useState} from 'react'
export const Register = () => {
const [users, setUsers] = useState([])
const [email, setEmail] = useState('')
const [name, setName] = useState('')
const [password, setPassword] = useState('')
const [createResult, setCreateResult] = useState([])
const [message, setMessage] = useState('')
const getUser = async () => {
try {
const result = await axios.get( "http://localhost:8000/api/users" )
console.log(result.data)
setUsers(result.data.data)
} catch ( err){
console.log( err )
}
}
const createUser = async () => {
try {
const data = {
"name" : name,
"email" : email,
"password" : password,
}
console.log("data to upload", data)
const result = await axios.post("http://localhost:8000/api/users", data)
console.log(result.data)
window.location.reload();
} catch ( err){
if (axios.isAxiosError(err)) {
console.log("Axisos Error ===> " , err)
setCreateResult(err.response.data)
setMessage(err.response.data.message)
} else {
console.log("Other Error", err)
}
}
}
const handleNameChange = (event) => {
setName(event.currentTarget.value)
}
const handleEmailChange = (event) => {
setEmail(event.currentTarget.value)
}
const handlePasswordChange = (event) => {
setPassword(event.currentTarget.value)
}
useEffect( () => {
getUser()
}, [])
return (
<Container>
<Container className='fs-2'>
User
</Container>
<Container>
<Table striped bordered>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{users?.map((user, index) => (
<tr key={index}>
<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.email}</td>
</tr>
))}
</tbody>
</Table>
</Container>
{message && (
<Container>
{message}
</Container>
)}
{createUser && createUser.errors && (
<Container>
{createUser.message}
{Object.keys(createUser.errors).map( (key, index) => {
return <div> {createUser.errors[key][0]} </div>
})}
</Container>
)}
<Container>
<Form className="mb-3">
<InputGroup>
<Form.Control type="text" aria-label="Recipient's username with two button addons"
placeholder="name" onChange={handleNameChange}/>
<Form.Control type="text" aria-label="Recipient's username with two button addons"
placeholder="email" onChange={handleEmailChange}/>
<Form.Control type="text" aria-label="Recipient's username with two button addons"
placeholder="password" onChange={handlePasswordChange}/>
<Button variant="outline-secondary" onClick={createUser}>전송</Button>
</InputGroup>
</Form>
</Container>
</Container>
)
}
8. 결과
정상적으로 users table에 등록 된다
9. mysql 로 조회
mysql> select name, email, password from users;
+------+-------------+--------------------------------------------------------------+
| name | email | password |
+------+-------------+--------------------------------------------------------------+
| ldw | aaa@bbb.ccc | $2y$12$AN9OXwtexAyluoS1HTQpTuTut4YiiULd4HiGdIEs2yM5r.2RnqN4y |
+------+-------------+--------------------------------------------------------------+
1 row in set (0.00 sec)
password 가 hash 되어 저장되어 있다
이제 다음에는 API 에 대한 인증 시스템을 추가해 보겠다