web/react

전자정부 누리집 사업자번호 조회 API

개똥마요 2024. 8. 26. 14:23

요즘 업데이트가 너무 없어서 작업하는걸 조금씩 올려볼까 한다

https://www.data.go.kr/data/15081808/openapi.do#/%EC%82%AC%EC%97%85%EC%9E%90%EB%93%B1%EB%A1%9D%EC%A0%95%EB%B3%B4%20%EC%A7%84%EC%9C%84%ED%99%95%EC%9D%B8%20API/validate

 

국세청_사업자등록정보 진위확인 및 상태조회 서비스

국세청에서 제공하는 사업자등록정보 진위확인 및 사업자등록 상태조회 API 서비스입니다.

www.data.go.kr

 

이번에 들어간 프로젝트에 사업자 회원가입을 위해 사업자 정보 조회 api가 필요하여 
전자정부 누리집 이라는 국가 공식 api 서비스를 이용해야 한다

 

 

api의 key가 필요하기때문에 저 활용신청버튼을 눌러 key를 받아야한다 

회원가입은 정말 간편하다 

 

그럼 이런 key를 받을 수 있는데 사용법에 나와있듯

 

var data = {
    "b_no": ["xxxxxxx"] // 사업자번호 "xxxxxxx" 로 조회 시,
   }; 
   
$.ajax({
  url: "https://api.odcloud.kr/api/nts-businessman/v1/status?serviceKey=xxxxxx",  // serviceKey 값을 xxxxxx에 입력
  type: "POST",
  data: JSON.stringify(data), // json 을 string으로 변환하여 전송
  dataType: "JSON",
  contentType: "application/json",
  accept: "application/json",
  success: function(result) {
      console.log(result);
  },
  error: function(result) {
      console.log(result.responseText); //responseText의 에러메세지 확인
  }
});

이런식으로 쓰면된다

스웨거도 지원하니 편하게 볼 수 있다

다만 정확한 확인을 위해 포스트맨에서 한번더 확인하게 되면 

음 굳

 

일부러 숫자를 하나 빼서 틀리게 입력하엿을때도 잘된다 
그럼 이걸 지금 하고있는 nextjs에 넣어보자 

 

"use client";

import React, { useState } from "react";
import { useRouter } from "next/navigation";
import ky from "ky";

const API_KEY = "당신의 API 키";

export default function BusinessVerification() {
  const [businessNumber, setBusinessNumber] = useState("");
  const [companyName, setCompanyName] = useState("");
  const [isVerified, setIsVerified] = useState(false);
  const router = useRouter();

  const handleVerify = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const url = `https://api.odcloud.kr/api/nts-businessman/v1/status?serviceKey=${API_KEY}`;
      const response: any = await ky.post(url, {
        json: {
          b_no: [businessNumber]
        },
        headers: {
          'Content-Type': 'application/json'
        }
      }).json();

      if (response.status_code === "OK" && response.data[0]?.b_stt === "계속사업자") {
        setIsVerified(true);
        alert("사업자 확인이 완료되었습니다. 업체명을 입력해주세요.");
      } else {
        alert("유효하지 않은 사업자 번호입니다.");
      }
    } catch (error) {
      console.error("API 요청 중 오류 발생:", error);
      alert("사업자 확인 중 오류가 발생했습니다. 다시 시도해주세요.");
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (isVerified && companyName) {
      // TODO: state에 저장후 다음 페이지로 이동기능을 해야할까?
      router.push("/login/signUp/details");
    } else {
      alert("사업자 확인을 완료하고 업체명을 입력해주세요.");
    }
  };

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-2xl font-bold mb-4">사업자 회원가입</h1>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label htmlFor="businessNumber" className="block mb-2">
            사업자 등록번호
          </label>
          <input
            type="text"
            id="businessNumber"
            value={businessNumber}
            onChange={(e) => setBusinessNumber(e.target.value)}
            required
            className="w-full p-2 border rounded"
            disabled={isVerified}
          />
        </div>
        {!isVerified && (
          <button
            type="button"
            onClick={handleVerify}
            className="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
          >
            사업자 확인
          </button>
        )}
        {isVerified && (
          <div>
            <label htmlFor="companyName" className="block mb-2">
              업체명
            </label>
            <input
              type="text"
              id="companyName"
              value={companyName}
              onChange={(e) => setCompanyName(e.target.value)}
              required
              className="w-full p-2 border rounded"
            />
          </div>
        )}
        {isVerified && (
          <button
            type="submit"
            className="w-full bg-green-500 text-white p-2 rounded hover:bg-green-600"
          >
            다음
          </button>
        )}
      </form>
    </div>
  );
}

아주 잘된다