자바스크립트 fetch API와 OAuth를 사용한 외부 서비스 인증

10 Sep 2023

javascript

인터넷은 현재 많은 애플리케이션들이 사용하는 외부 서비스와의 연동을 필요로 합니다. 외부 서비스로의 연동은 사용자 인증(authentication)과 데이터 교환(exchange)을 포함합니다. 이를 간편하게 처리하기 위해 자바스크립트 fetch API와 OAuth를 함께 사용해 보겠습니다.

OAuth란 무엇인가?

OAuth는 웹 서비스와 응용 프로그램 사이에서 사용자 인증을 위한 개방형 프로토콜입니다. 이 프로토콜을 사용하여 당신의 애플리케이션으로 사용자가 다른 서비스에 연결하고, 해당 서비스의 API에 접근할 수 있는 권한을 부여할 수 있습니다.

OAuth 프로토콜은 3개의 주요한 역할로 구성됩니다:

Resource Owner(리소스 소유자): 사용자로서, 외부 서비스에 로그인한 개인 또는 애플리케이션입니다.
Client(클라이언트): 인증 서버(외부 서비스)에서 접근 권한을 얻기 위해 요청하는 애플리케이션입니다.
Authorization Server(인증 서버): 외부 서비스의 인증 및 권한 부여를 관리하는 서버입니다.

OAuth 프로토콜은 사용자의 비밀 정보를 애플리케이션에게 공유하지 않아도 안전하게 외부 서비스를 사용할 수 있는 기능을 제공합니다.

자바스크립트 Fetch API로 OAuth 인증 처리

Fetch API는 최신 웹 브라우저에서 기본적으로 제공되는 네트워크 통신 API입니다. 이를 사용하여 OAuth 인증 처리를 간편하게 수행할 수 있습니다.

다음은 Fetch API를 사용하여 OAuth 인증 토큰을 얻어오는 예제 코드입니다:

const fetchAuthToken = async () => {
  const response = await fetch('https://oauth-server.com/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      grant_type: 'client_credentials',
      client_id: 'your_client_id',
      client_secret: 'your_client_secret',
    }),
  });

  const data = await response.json();
  const authToken = data.access_token;

  return authToken;
};

위의 코드 예제에서는 POST 메서드를 사용하여 OAuth 인증 서버에 요청을 보내고, 응답으로 받은 데이터에서 액세스 토큰을 얻어옵니다. 이렇게 얻어온 토큰은 향후 API 요청에서 함께 전송하여 인증을 처리합니다.

Fetch API로 외부 서비스 API 호출하기

OAuth 인증 토큰을 얻은 후에는 이를 사용하여 외부 서비스의 API를 호출할 수 있습니다. 다음은 Fetch API를 사용하여 OAuth 인증 토큰을 헤더에 실어서 API를 호출하는 예제 코드입니다:

const fetchUserData = async () => {
  const authToken = await fetchAuthToken();

  const response = await fetch('https://api.service.com/user', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${authToken}`,
    },
  });

  const userData = await response.json();

  return userData;
}

fetchUserData()
  .then((userData) => {
    console.log(userData);
  })
  .catch((error) => {
    console.error(error);
  });

위의 코드 예제에서는 GET 메서드를 사용하여 외부 서비스의 user API를 호출하고, 헤더에 OAuth 인증 토큰을 함께 전달합니다. 응답으로 받은 데이터를 JSON 형식으로 파싱하여 사용할 수 있습니다.

이와 같이 자바스크립트 Fetch API와 OAuth를 함께 사용하면 외부 서비스와의 연동을 간단하게 처리할 수 있습니다. 이를 응용하여 애플리케이션에서 다양한 외부 서비스와의 데이터 교환을 구현할 수 있습니다.