[WONTUBE] Youtube API 갖고놀기 (1)

뭔가 혼자서 만들어볼만한게 없을까 생각하다가. Youtube API를 이용해서 뭐라도 만들어보자! 라는 생각으로 시작했다.

 

우선 해볼것은 내가 구독하고있는 구독리스트를 불러오는 것.

단순히 인증절차 없이 가장 인기있는 동영상 데이터를 가져올수도 있지만, 별도의 회원관리가 없이 Google Oauth를 통해서 로그인하고, 그 데이터로 로그인 유지, 토큰관리등을 해보려고 인증이 필요한 데이터 위주로 Youtube API에서 가져올 생각이다.

 

API 문서나 구글링해보면 많은사람들이 Google Cloud Platform에서 OAuth 인증을 구현하기 위한 글이 많다. 상세한 것들은 검색을 통해서 ...

 

처음엔 Google API문서를 참고해서 구현할 작정이었으나 ... 생각보다 너무 방대하고 불친절하다... 아는 지식선안에서 Google API 문서를 따라했다.

 

초기 설정

API 문서에 따르면 클라이언트 측 (자바스크립트) 애플리케이션은 아래와 같은 흐름으로 인증이 진행된다고한다.

 

Google Cloud Platform 부터 간단하게 요약해보면 아래와 같다.

1. Google Cloud Platform
2. 콘솔로 이동
3. 프로젝트 선택
4. 사용자 인증 정보 만들기
5. OAuth 클라이언트 ID 만들기
   1. 애플리케이션 유형 선택
   2. 이름 작성
   3. 승인된 자바스크립트 원본 uri 주소 추가 (http://localhost:5173)
   4. 승인된 리다이렉트 uri 주소 추가 (http://localhost:5173/redirect)
   5. 만들기

나는 CRA로 리액트앱을 만들지 않고 Vite를 이용해서 만들어서 기본 포트가 5173이다.

 

Youtube API 라이브러리 사용하는 방법은 아래와 같다.

1. 콘솔로 이동
2. 프로젝트 생성 또는 선택
3. 대시보드로 이동
4. 라이브러리 선택 (youtube data api v3)
5. OAuth 동의화면 생성
   1. 앱 이름, 사용자 지원 이메일, 개발자 이메일 필수
   2. 앱 이름에 WONTUBE가 불가능했다. 아마 YOUTUBE랑 유사해서 그런듯
6. 사용자 인증 정보 만들기
   1. API KEY 생성

 

dotenv 설정

자 중요한 API Key와 Google Client ID를 숨기기위해 dotenv를 이용해서 해당 데이터를 숨겨주자.

CRA도 마찬가지지만, Vite 역시 dotenv 라이브러리가 따로 필요하지 않다. 하지만 "CRA의 REACT_APP_" prefix와 달리 "VITE_"를 prefix로 설정해주어야 한다. 자세한 설명은 vite 공식문서를 참고하자.  

https://vitejs-kr.github.io/guide/env-and-mode.html

Vite