Javascript & Typescript

자바스크립트 HTTPS 기반 API 요청 가이드

0

현대 웹 개발에서는 외부 API로 데이터를 주고받는 작업이 필수적입니다. 특히 HTTPS를 사용하는 보안된 API 요청은 웹 애플리케이션의 핵심 기능으로 자리 잡았습니다. 오늘은 자바스크립트를 활용해 HTTPS 기반의 API 요청을 보내는 방법을 살펴보겠습니다. 간단한 예시부터, 안전하게 인증 정보를 전송하는 법까지 알아보면서, 실제 개발에 쉽게 적용할 수 있도록 도와드리겠습니다.

API 요청을 위한 기본 코드 예시

HTTPS API로 데이터를 요청하는 가장 기본적인 방법은 `fetch` API를 사용하는 것입니다. 아래는 GET 요청을 보내는 기본 코드입니다.

// API 엔드포인트 URL
const apiUrl = 'https://api.example.com/data';

// API 요청 옵션 설정
const options = {
  method: 'GET', // 요청 방법 (GET, POST, PUT, DELETE 등)
  headers: {
    'Content-Type': 'application/json', // JSON 형식으로 데이터 요청
    'Authorization': 'Bearer your_access_token' // 인증 토큰 포함 (OAuth2 예시)
  }
};

// API 요청 보내기
fetch(apiUrl, options)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json(); // JSON 응답으로 변환
  })
  .then(data => {
    console.log(data); // 응답 데이터 처리
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

이 코드에서 눈여겨볼 부분은 인증 방식과 오류 처리입니다. 먼저 `Authorization` 헤더에서 Bearer 토큰 방식으로 인증을 진행하고, 오류 발생 시 적절한 메시지를 출력하는 `catch` 문을 통해 에러를 다루고 있습니다.

`fetch` API 사용의 주요 특징

  • 간단한 비동기 요청: `fetch` 함수는 비동기 방식으로 동작하므로 요청이 완료될 때까지 페이지가 멈추지 않습니다.
  • 보안된 통신: HTTPS를 사용하여 데이터를 안전하게 주고받습니다.
  • 오류 처리: `response.ok`로 서버 응답 상태를 확인한 후 적절히 처리합니다.

보안된 API를 활용하는 개발에서 매우 중요한 점은 인증 정보가 적절히 보호되고 있는지 확인하는 것입니다. 이 점을 염두에 두고, 아래에서 두 가지 주요 인증 방법을 살펴보겠습니다.

인증 방법 1: Basic Authentication

Basic Authentication은 API 요청 시 ID와 비밀번호를 `Base64`로 인코딩하여 헤더에 담아 전송하는 방식입니다.

// API 엔드포인트 URL
const apiUrl = 'https://api.example.com/data';

// 사용자 ID와 비밀번호
const username = 'your_username';
const password = 'your_password';

// Base64로 인코딩된 인증 정보 생성
const encodedCredentials = btoa(`${username}:${password}`);

// API 요청 옵션 설정
const options = {
  method: 'GET', // 요청 방법
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Basic ${encodedCredentials}` // Basic 인증 헤더
  }
};

// API 요청 보내기
fetch(apiUrl, options)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

이 코드에서는 `btoa` 함수를 사용해 사용자 이름과 비밀번호를 Base64로 인코딩하여 요청을 보냅니다. 하지만 이 방식은 자칫 잘못 사용하면 보안 취약점이 발생할 수 있기 때문에, 반드시 HTTPS로 전송해야 합니다.

Basic Authentication의 장단점

  • 장점: 구현이 간단하고 표준적인 방식입니다.
  • 단점: 민감한 정보를 Base64로 인코딩할 뿐 암호화되지 않기 때문에, HTTPS 사용이 필수입니다.

인증 방법 2: POST 요청을 사용한 ID와 비밀번호 전송

두 번째 방법은 POST 요청의 본문에 인증 정보를 포함하는 방식입니다. 이 방식은 주로 로그인 요청에 사용되며, 서버에서 세션 또는 토큰을 발급받아 이후 요청에 사용하게 됩니다.

// API 엔드포인트 URL
const apiUrl = 'https://api.example.com/authenticate';

// 사용자 ID와 비밀번호
const credentials = {
  username: 'your_username',
  password: 'your_password'
};

// API 요청 옵션 설정
const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(credentials) // 본문에 인증 정보 포함
};

// API 요청 보내기
fetch(apiUrl, options)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    console.log(data); // 응답 데이터 처리
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

이 코드에서는 ID와 비밀번호를 JSON 형태로 본문에 포함시켜 API에 전송합니다. 이 방식은 보안 토큰을 발급받기 위한 일반적인 절차입니다.

POST 방식의 장단점

  • 장점: API 설계에 따라 로그인 후 토큰 발급 등의 세션 유지가 가능합니다.
  • 단점: 매 요청마다 본문에 인증 정보를 포함하는 것은 비효율적일 수 있습니다. 인증 후에는 토큰을 사용하여 인증하는 것이 일반적입니다.

결론

HTTPS 기반의 API 요청은 웹 애플리케이션에서 필수적인 기능입니다. `fetch` API를 사용하여 데이터를 요청하고, 인증 정보는 헤더나 본문에 포함시키는 다양한 방식이 존재합니다. 특히 HTTPS를 통해 안전한 통신이 이루어져야 하며, 인증 후에는 토큰을 사용한 세션 유지를 고려하는 것이 좋습니다.

Leave a Reply