Google 로그인과 구글 드라이브의 파일과 비디오를 업로드하는 기능을 맡아 구현하게 되었다. Google 로그인은 물론 구글 드라이브를 연결해본 경험은 없었다. 호기롭게 시작했지만 많은 오류와 시련을 겪었다..
변명아닌 변명을 해보자면
1. google 공식문서라고 믿으면 안된다.. (믿는 도끼에 큰 코 다친다고 공식문서는 업데이트도 되지 않았었고, 구글 로그인 관련된 코드를 관리하는 웹과 구글 드라이브 관련 코드를 관리하는 웹이 서로 다른 코드를 예제로 들고 있었다.)
2. svelte로 작성된 코드가 없었기 때문에 JS 샘플코드만 가지고 svelte화 시키는 과정에서 시간이 소요되었다.
3. TS로 작성된 코드도 없었기 때문에 타입 지정하는데 어려움을 겪었다.
어쨌든 결과적으로 혼자서 Google 로그인과 구글 드라이브를 연동하여 비디오를 업로드하는 기능까지 구현할 수 있었다. 순정의 끝은 결국 공식문서였고, 공식문서의 도움을 정말 많이 받았다. 밉지만 너뿐이다!
구글 로그인 기본 단계
기본적인 로그인 단계를 설명하자면 아래와 같다. 이런 흐름이구나를 알고 이어서 더 깊게 설명하도록 하겠다.
1. 프론트에서 Google OAuth 로그인을 요청한다.
2. 구글 서버에서 인가코드를 발행한다. (access_token)
3. 구글에서 받은 인가코드를 백에게 보내준다.
4. 백은 인가코드를 이용하여 구글 서버에 사용자의 정보를 요청한다.
5. 올바른 인가코드를 받은 구글 서버는 해당 사용자의 정보를 백에게 제공한다.
6. 백은 프론트에게 사용자 정보를 전달한다.
참고로 최초 구글 연동시 refresh_token은 1회 발급되고 만료기간은 6개월이다. 그 이후에는 refresh_token이 만료되기 전까지 access token만 발급된다.
실제 구현 과정
참고로 구글 로그인 서비스를 설정하는 방법은 따로 작성하지 않았습니다.
구글 로그인 서비스를 구현하기 위해서는 https://console.cloud.google.com/home/dashboard 에서 일부 설정을 통해 키와 비밀번호를 발급받아야 합니다.
이 블로그에서 자세하게 설명되어 있어서 참고하시면 좋을 것 같습니다.
1. 구글 로그인 버튼 클릭 시 Google API Console에서 OAuth 2.0 사용자 인증 정보를 가져오게 된다.
2. 이때 Google API를 사용하여 데이터에 엑세스하려면 access token을 가져와야 한다.
그러기 위해서는 사용자를 Google OAuth 2.0 서버로 리다이렉션이 필요하기 때문에 https://accounts.google.com/o/oauth2/v2/auth 에서 Google OAuth 2.0 엔드포인트의 엑세스를 요청하는 URL을 생성한다.
URL에는 sope와 code 등(쿼리 매개변수를 사용하여 필요한 API 엑세스 유형 식별)이 포함되어 있고, 이를 통해 승인 코드가 생성된다.
참고로 scope는 엑세스 토큰에서 허용하는 리소스 및 작업 집합을 제어한다.
로그인을 하면 권한 동의를 얻는 메세지가 사용자에게 표시되는데, 동의하면 Google 승인 서버가 애플리케이션에 엑세스하는 토큰 및 해당 토큰이 부여하는 엑세스 범위 목록을 보낸다. 만약 권한을 동의하지 않으면 서버에서 오류를 반환한다.
동의 후에는 OAuth 2.0 서버가 엑세스 토큰 요청에 지정된 redirect_URI로 응답을 전송한다.
예를 들어 엑세스 토큰 응답은 아래와 같다.
https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600
3. 사용자가 부여한 엑세스 범위를 검토하고 백에게 JWT, redirect URL에서 추출한 code와 scope를 Post한다.
엑세스 토큰을 얻은 후에 API에 필요한 엑세스 범위가 부여되면 토큰을 사용해 특정 사용자 계정을 대신하여 Google API를 호출할 수 있다.
4. 백은 인가코드(access_token)를 이용하여 구글 서버에 사용자의 정보를 요청한다.
5. 올바른 인가코드를 받은 구글 서버는 해당 사용자의 정보를 백에게 제공한다.
6. 백은 프론트에게 사용자 정보를 전달한다.
구현 코드 살펴보기
const initCodeClient = () => {
window.google.accounts.oauth2
.initCodeClient({
client_id: CLIENT_ID,
scope: SCOPE.join(' '), // scope가 여러개인 경우 배열 안에 값을 추가하여 join
redirect_uri: '리다이렉트 URL'
ux_mode: 'redirect',
})
.requestCode();
};
아래는 scope 예시다. google drive에 대한 권한 허용을 위해 drive를 추가했다.
export const SCOPE = ['https://www.googleapis.com/auth/drive.readonly', 'profile'];
참고자료
'JavaScript > 그 외' 카테고리의 다른 글
| ES Module 동작 방식 (0) | 2024.01.11 |
|---|
댓글