클라이언트 ID란 무엇입니까?
Google 클라이언트 ID(또는 ClientID)는 애플리케이션/사용자에게 할당되는 고유 식별자입니다. OAuth(Auth 2.0)를 사용하여 클라이언트와 서버를 인증하는 데 사용됩니다.

Google 클라이언트 ID를 얻으려면 Google Cloud Console을 열고 새 프로젝트를 시작하세요. 이 튜토리얼에서는 프로젝트 이름을 "GoogleReact Sign-In"으로 지정하지만 원하는 이름을 선택할 수 있습니다.

프로젝트를 생성한 후 API 및 서비스 메뉴의 자격 증명 섹션으로 이동합니다. 여기서 왼쪽 상단 Google Cloud 로고 근처에 현재 프로젝트 이름이 표시되는 대시보드가 ​​있습니다.

이제 자격 증명을 만들기 전에 OAuth 동의 화면으로 이동하여 동의 화면을 설정해 보겠습니다.

Google 로그인 동의 화면을 설정하세요.

동의 화면은 이름에서 알 수 있듯이 사용자가 외부 또는 타사 라이브러리를 통해 로그인해야 하는 페이지입니다. 이 팝업은 사용자에게 앱의 루트 페이지를 떠나 타사 페이지에 대한 액세스 권한을 부여함을 알립니다. 아래에 표시된 Google 로그인 동의 화면의 예

간단히 말하면, 승인을 위해 OAuth 2.0을 활용하면 앱은 사용자에게 Google 계정을 사용하여 하나 이상의 액세스 범위를 승인하도록 요청합니다. 액세스 범위에는 앱이 사용자 계정에 액세스하거나 수행하도록 승인된 모든 정보 또는 활동이 포함됩니다.

React 앱에 대한 Google 동의 페이지를 설정하려면 Google Cloud Console의 왼쪽 메뉴에 있는 'OAuth 동의 화면' 탭으로 이동하세요.

이 탭에서 Google이 인증한 회사나 애플리케이션을 사용하지 않는 한 허용되는 유일한 옵션인 '외부'를 선택한 다음 '만들기' 버튼을 클릭하여 동의 화면을 생성하세요.

다음으로 같은 페이지에서 지원서 이름과 프로젝트 상태에 대한 업데이트를 받을 이메일 주소를 입력하세요.

지금은 나머지 요구 사항과 옵션을 비워 둘 수 있지만, 사용 가능한 세부 정보가 있는 경우 이 단계에서 추가할 수 있습니다.

당분간 나머지 등록 섹션은 건너뛰셔도 됩니다. 각 섹션에서 아래로 스크롤하고 저장을 클릭한 후 완료되면 대시보드로 돌아갑니다.

OAuth 동의 페이지를 디자인한 후 앱을 실험하거나 인증이 작동하는지 확인하기 전에 앱을 게시해야 합니다. 기본적으로 상태는 '테스트 중'이며 게시 후 프로덕션으로 이동됩니다.

앱을 '프로덕션 중'으로 표시하면 Google 계정이 있는 모든 사람이 앱에 액세스할 수 있습니다.

웹 클라이언트 ID를 생성합니다.

이제 웹 클라이언트 ID를 생성할 수 있는 페이지에 액세스하기 위한 자격 증명 옵션으로 돌아가겠습니다.
화면 상단의 CREATE CREDENTIALS를 선택한 후 OAuth 클라이언트 ID를 클릭하세요.

아래와 같이 애플리케이션 유형을 선택하라는 메시지가 표시됩니다. 웹 애플리케이션으로 이동 React에 대해 다음 단계를 따르는 경우(웹에서는 Google 클라이언트 ID를 사용하고 있습니다).

다음으로 단일 앱에 대한 특정 ID 링크를 식별하거나 지정하기 위해 클라이언트 ID의 이름을 선택합니다. 이 이름이 사용됩니다. 웹, iOS, Android ID를 구분하기 위해 명명 규칙에 '웹 ID', 'Android ID', 'iOS ID' 등을 넣을 수 있습니다.

다음에는 승인된 JavaScript 원본과 승인된 리디렉션 URL이라는 두 가지 유형의 URL을 소개합니다.

'승인된 JavaScript 원본 URL'은 애플리케이션이 로그인하는 URL입니다. React 개발자의 경우 localhost(localhost:3000)이거나 앱을 호스팅한 경우 호스팅된 URL입니다.

'승인된 리디렉션 URL'은 사용자가 성공적으로 로그인한 후 Google에서 사용자에게 반환하는 링크입니다. 예를 들어 사용자를 원래 링크로 반환하거나 다른 링크로 리디렉션할 수 있습니다. 여기에 URL을 추가해야 합니다.

승인된 javaScript 원본과 승인된 리디렉션 URL에 다음 URL을 각각 추가합니다: http://localhost:3000 및 http://localhost:

웹 클라이언트 ID를 생성하려면 '생성' 버튼을 클릭해야 합니다. 새로 생성된 자격 증명을 볼 수 있는 홈페이지로 돌아갑니다. 새 웹 클라이언트 ID를 복사하려면 복사 아이콘을 누르세요.

이제 웹 클라이언트 ID를 성공적으로 구축했으므로 React 앱으로 이동하여 클라이언트 ID를 .env 파일에 추가합니다.