reactjs에서 php백엔드와 로그인 처리

ReactJS와 PHP를 연동하여 로그인 처리를 하려면 다음과 같은 과정이 필요합니다:

ReactJS 애플리케이션에서 로그인 폼을 구성합니다.
ReactJS 애플리케이션에서 서버에 로그인 요청을 보냅니다.
PHP 서버에서 로그인 요청을 수신하고, 사용자 인증을 수행합니다.
PHP 서버에서 ReactJS 애플리케이션으로 응답을 보냅니다.
ReactJS 애플리케이션에서 PHP 서버의 응답을 받아 결과를 표시합니다.

아래는 ReactJS와 PHP를 사용한 로그인 처리의 예시 코드입니다:

ReactJS:

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

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('http://your-server.com/api/login', {
        username,
        password,
      });
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="submit">Login</button>
    </form>
  );
};

export default Login;

PHP에서는 ReactJS 애플리케이션에서 보낸 로그인 요청을 처리하기 위해, 다음과 같은 과정이 필요합니다:

$_POST 또는 $_GET 변수를 사용하여 ReactJS에서 보낸 데이터를 수신합니다.
수신한 데이터(사용자 이름과 비밀번호)를 이용하여 사용자 인증을 수행합니다.
사용자 인증에 성공하면, 결과(예를 들어, JWT 토큰)를 JSON 형식으로 응답합니다.

아래는 PHP로 ReactJS에서 보낸 로그인 요청을 처리하는 예시 코드입니다:

<?php
header("Content-Type: application/json");

$username = $_POST['username'];
$password = $_POST['password'];

// Authenticate user
// ...

if ($authenticated) {
  $token = generateToken();
  echo json_encode(array("token" => $token));
} else {
  http_response_code(401);
  echo json_encode(array("error" => "Incorrect username or password"));
}

function generateToken() {
  // Generate a JWT token
  // ...
}

ReactJS에서 JWT 토큰을 처리하려면, 다음과 같은 과정이 필요합니다:

로그인 API에서 사용자 인증에 성공하면, 수신한 JWT 토큰을 브라우저의 localStorage에 저장합니다.
그 다음 API 호출에서, 저장한 JWT 토큰을 Authorization 헤더에 포함하여 요청을 전송합니다.

// Store the token in local storage after a successful login
localStorage.setItem("token", response.data.token);

// Attach the token to subsequent API requests
axios.defaults.headers.common["Authorization"] = `Bearer ${localStorage.getItem("token")}`;

PHP에서 JWT 토큰을 처리하려면, 다음과 같은 과정이 필요합니다:

API 요청에서 Authorization 헤더를 수신합니다.
헤더에서 JWT 토큰을 추출하고, 검증(예를 들어, 만료 여부, 서명)을 수행합니다.
JWT 토큰이 유효하면, 토큰에서 포함된 정보(예를 들어, 사용자 ID)를 사용하여 요청을 처리합니다.

아래는 PHP에서 JWT 토큰을 검증하는 예시 코드입니다:

<?php
try {
  // HTTP 헤더에서 Authorization 헤더를 가져옵니다.
  $headers = apache_request_headers();
  $authorizationHeader = $headers["Authorization"] ?? "";
  $token = str_replace("Bearer ", "", $authorizationHeader);

  // 토큰을 비밀 키를 사용하여 디코딩합니다.
  $secretKey = "당신의_비밀_키";
  $decodedToken = JWT::decode($token, $secretKey, array("HS256"));

  // 디코딩된 토큰 데이터를 사용하여 API 요청을 처리합니다.
  $userId = $decodedToken->data->userId;
  // ...

} catch (Exception $e) {
  // 토큰이 유효하지 않으면 오류 응답을 반환합니다.
  http_response_code(401);
  echo json_encode(array("message" => "인증되지 않음"));
  exit();
}

JWT 토큰을 인코딩/디코딩하는 PHP 라이브러리, 예를 들어 firebase/php-jwt를 설치해야 한다는 점에 주의하세요.

reactjs에서 php백엔드와 로그인 처리

답글 남기기 응답 취소