Google ID 서비스 JavaScript 라이브러리 (google.accounts.oauth2)를 사용하여 웹 앱에서 Google API에 대한 액세스를 승인하려면 먼저 다음을 수행해야 합니다.
- OAuth 2.0 클라이언트 ID를 가져옵니다.
- OAuth 동의 화면 및 범위를 구성합니다.
- 클라이언트 라이브러리를 로드합니다.
- 원하는 경우 콘텐츠 보안 정책 (CSP) 및 교차 출처 열기 정책 (COOP)을 설정합니다.
Google API 클라이언트 ID 가져오기
웹사이트에서 Google 계정 승인을 사용 설정하려면 먼저 Google API 클라이언트 ID를 설정해야 합니다. 다음 단계를 완료합니다.
- Google Cloud 콘솔의 클라이언트 페이지를 엽니다.
- Cloud 콘솔 프로젝트를 만들거나 선택합니다. 프로덕션 애플리케이션을 만들 때 여러 프로젝트가 필요할 수 있습니다. 관리하는 각 프로젝트에 대해 이 섹션의 나머지 단계를 반복합니다.
- 클라이언트 만들기를 클릭하고 애플리케이션 유형에서 웹 애플리케이션을 선택하여 새 클라이언트 ID를 만듭니다. 기존 클라이언트 ID를 사용하려면 웹 애플리케이션 유형 중 하나를 선택합니다.
웹사이트의 URI를 승인된 자바스크립트 원본에 추가합니다. URI에는 스키마와 정규화된 호스트 이름만 포함됩니다. 예를 들면
https://www.example.com입니다.ux_mode: 'redirect'와 함께 승인 코드 모델을 사용하거나 백엔드 엔드포인트에서 승인 코드를 교환하는 경우 리디렉션 URI를 승인된 리디렉션 URI에 추가합니다. 리디렉션 URI에는 스키마, 정규화된 호스트 이름, 경로가 포함되며 리디렉션 URI 유효성 검사 규칙을 준수해야 합니다. 예:https://www.example.com/oauth2callback
구성이 완료되면 생성된 클라이언트 ID를 기록해 둡니다.
initCodeClient() 또는 initTokenClient()를 초기화할 때 client_id 속성에 이 값을 전달합니다. (클라이언트 보안 비밀번호도 생성되며, 이 비밀번호는 기밀로 유지하고 서버 측 토큰 교환 작업에만 사용해야 합니다.)
OAuth 동의 화면 구성
웹 앱에서 OAuth 2.0 범위를 사용하여 사용자 데이터에 대한 액세스를 요청하면 Google은 액세스를 요청하는 애플리케이션, 요청된 데이터 범위, 적용되는 약관을 사용자에게 알려주는 동의 화면을 표시합니다.
- Cloud 콘솔의 Google 인증 플랫폼 섹션에서 브랜딩 페이지를 엽니다.
- 메시지가 표시되면 구성한 프로젝트를 선택합니다.
- 브랜딩 양식 (애플리케이션 이름, 애플리케이션 로고, 지원 이메일, 승인된 도메인, 애플리케이션 홈페이지 링크, 개인정보처리방침 링크)을 작성하고 저장을 클릭합니다.
- 데이터 액세스 페이지로 이동하여 애플리케이션에 필요한 Google API 범위를 구성합니다. 미리 요청하는 것이 아니라 액세스가 필요한 시점에 범위를 점진적으로 요청하는 것이 좋습니다.
- 인증 상태를 확인합니다. 애플리케이션에서 민감하거나 제한된 범위를 요청하는 경우 인증을 위해 애플리케이션을 제출합니다. 자세한 내용은 OAuth 인증 요구사항을 참고하세요.
콘텐츠 보안 정책 및 COOP
웹 애플리케이션에서 콘텐츠 보안 정책 (CSP)을 시행하는 경우 다음 Google 아이덴티티 서비스 출처를 허용합니다.
script-src:https://accounts.google.com/gsi/clientframe-src:https://accounts.google.com/gsi/connect-src:https://accounts.google.com/gsi/
팝업 승인 흐름 (ux_mode: 'popup'가 있는 initTokenClient 또는 initCodeClient)의 경우 대화상자 창에서 승인 응답을 페이지에 다시 전달할 수 있도록 Cross-Origin-Opener-Policy (COOP) HTTP 응답 헤더를 same-origin-allow-popups로 구성합니다.
다음 단계
그런 다음 웹페이지에 클라이언트 라이브러리를 로드하여 승인 클라이언트 초기화를 시작합니다.