설정

웹사이트에 Google 계정으로 로그인, 원탭 또는 자동 로그인을 추가하기 전에 OAuth 구성을 설정하고 원하는 경우 사이트 콘텐츠 보안 정책을 구성합니다.

Google API 클라이언트 ID 가져오기

웹사이트에서 Google 계정으로 로그인을 사용 설정하려면 먼저 Google API 클라이언트 ID를 설정해야 합니다. 그러려면 다음 단계를 완료하세요.

1. 의 을 엽니다.
2. 프로젝트를 만들거나 선택합니다. Google 계정으로 로그인 버튼 또는 Google One Tap 프로젝트가 이미 있는 경우 기존 프로젝트와 웹 클라이언트 ID를 사용합니다. 프로덕션 애플리케이션을 만들 때는 여러 프로젝트가 필요할 수 있습니다. 관리하는 각 프로젝트에 대해 이 섹션의 나머지 단계를 반복합니다.
3. 클라이언트 만들기를 클릭하고 애플리케이션 유형에서 웹 애플리케이션을 선택하여 새 클라이언트 ID를 만듭니다. 기존 클라이언트 ID를 사용하려면 웹 애플리케이션 유형 중 하나를 선택합니다.

4. 승인된 JavaScript 출처에 웹사이트의 URI를 추가합니다. URI에는 스키마와 정규화된 호스트 이름만 포함됩니다. 예를 들면 https://www.example.com입니다.

5. 원하는 경우 JavaScript 콜백이 아닌 호스팅하는 엔드포인트로의 리디렉션을 사용하여 사용자 인증 정보를 반환할 수 있습니다. 이 경우 리디렉션 URI를 승인된 리디렉션 URI에 추가합니다. 리디렉션 URI에는 스키마, 정규화된 호스트 이름, 경로가 포함되며 리디렉션 URI 유효성 검사 규칙을 준수해야 합니다. 예로 https://www.example.com/auth-receiver를 들 수 있습니다.

OAuth 동의 화면 구성

Google 계정으로 로그인 및 원탭 인증에는 모두 사용자에게 데이터 액세스를 요청하는 애플리케이션, 요청되는 데이터의 종류, 적용되는 약관을 알리는 동의 화면이 포함됩니다.

1. 의 Google 인증 플랫폼 섹션에서 를 엽니다.
2. 메시지가 표시되면 방금 만든 프로젝트를 선택합니다.

3. 에서 양식을 작성하고 '저장' 버튼을 클릭합니다.

   1. 애플리케이션 이름: 동의를 요청하는 애플리케이션의 이름입니다. 이름은 애플리케이션을 정확하게 반영하고 사용자가 다른 곳에서 보는 애플리케이션 이름과 일치해야 합니다.

   2. 애플리케이션 로고: 사용자가 앱을 알아볼 수 있도록 동의 화면에 표시되는 이미지입니다. 로고는 Google 계정으로 로그인 동의 화면과 계정 설정에 표시되지만 원탭 대화상자에는 표시되지 않습니다.

   3. 지원 이메일: 사용자 지원을 위한 동의 화면과 사용자의 애플리케이션 액세스를 평가하는 G Suite 관리자에게 표시됩니다. 이 이메일 주소는 사용자가 애플리케이션 이름을 클릭할 때 Google 계정으로 로그인 동의 화면에 표시됩니다.

   4. 승인된 도메인: 나와 내 사용자를 보호하기 위해 Google에서는 OAuth를 사용하여 인증하는 애플리케이션만 승인된 도메인을 사용할 수 있도록 허용합니다. 애플리케이션 링크는 승인된 도메인에서 호스팅되어야 합니다. 자세히 알아보기

   5. 애플리케이션 홈페이지 링크: Google 계정으로 로그인 동의 화면 및 '계정으로 계속' 버튼 아래의 원탭 GDPR 규정 준수 면책 조항 정보에 표시됩니다. 승인된 도메인에서 호스팅되어야 합니다.

   6. 애플리케이션 개인정보처리방침 링크: Google 계정으로 로그인 동의 화면 및 '계정으로 계속' 버튼 아래의 원탭 GDPR 규정 준수 면책 조항 정보에 표시됩니다. 승인된 도메인에서 호스팅되어야 합니다.

   7. 애플리케이션 서비스 약관 링크 (선택사항): Google 계정으로 로그인 동의 화면 및 '계정으로 계속' 버튼 아래의 원탭 GDPR 규정 준수 면책 조항 정보에 표시됩니다. 승인된 도메인에서 호스팅되어야 합니다.

4. 로 이동하여 앱의 범위를 구성합니다.

   1. Google API 범위: 범위를 사용하면 애플리케이션이 사용자의 비공개 데이터에 액세스할 수 있습니다. 인증의 경우 기본 범위 (이메일, 프로필, openid)로 충분하며 민감한 범위를 추가할 필요가 없습니다. 일반적으로 액세스가 필요한 시점에 범위를 점진적으로 요청하는 것이 가장 좋습니다.

5. '인증 상태'를 확인합니다. 애플리케이션에 인증이 필요한 경우 '인증을 위해 제출' 버튼을 클릭하여 인증을 위해 애플리케이션을 제출합니다. 자세한 내용은 OAuth 인증 요구사항을 참고하세요.

로그인 중 OAuth 설정 표시

그림 1. Chrome의 원탭으로 표시되는 OAuth 동의 설정

콘텐츠 보안 정책 : 콘텐츠 보안 정책(CSP)

선택사항이지만 앱을 보호하고 교차 사이트 스크립팅 (XSS) 공격을 방지하려면 콘텐츠 보안 정책을 사용하는 것이 좋습니다. 자세한 내용은 CSP 소개 및 CSP 및 XSS를 참고하세요.

콘텐츠 보안 정책에는 connect-src, frame-src, script-src, style-src, default-src와 같은 지시어가 하나 이상 포함될 수 있습니다.

CSP에 다음이 포함된 경우:

• connect-src 디렉티브에 https://accounts.google.com/gsi/를 추가하여 페이지가 Google ID 서비스 서버 측 엔드포인트의 상위 URL을 로드하도록 허용합니다.
• frame-src 디렉티브에 https://accounts.google.com/gsi/를 추가하여 원탭 및 Google 계정으로 로그인 버튼 iframe의 상위 URL을 허용합니다.
• script-src 디렉티브에 https://accounts.google.com/gsi/client를 추가하여 Google ID 서비스 JavaScript 라이브러리의 URL을 허용합니다.
• style-src 디렉티브에 https://accounts.google.com/gsi/style를 추가하여 Google ID 서비스 스타일시트의 URL을 허용합니다.
• default-src 지시어는 사용되는 경우 앞의 지시어 (connect-src, frame-src, script-src 또는 style-src)가 지정되지 않은 경우 대체입니다. https://accounts.google.com/gsi/를 추가하여 페이지가 Google ID 서비스 서버 측 엔드포인트의 상위 URL을 로드하도록 허용합니다.

connect-src를 사용할 때 개별 GIS URL을 나열하지 마세요. 이렇게 하면 GIS가 업데이트될 때 실패를 최소화할 수 있습니다. 예를 들어 https://accounts.google.com/gsi/status를 추가하는 대신 GIS 상위 URL https://accounts.google.com/gsi/을 사용합니다.

다음 응답 헤더 예시를 사용하면 Google ID 서비스가 성공적으로 로드되고 실행됩니다.

Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

교차 출처 오프너 정책

Google 계정으로 로그인 버튼과 Google 원탭을 사용하려면 팝업을 성공적으로 만들기 위해 Cross-Origin-Opener-Policy (COOP)를 변경해야 할 수 있습니다.

FedCM이 사용 설정된 경우 브라우저에서 팝업을 직접 렌더링하므로 변경할 필요가 없습니다.

하지만 FedCM이 사용 중지된 경우 다음과 같이 COOP 헤더를 설정합니다.

• 받는사람: same-origin 및
• same-origin-allow-popups를 포함합니다.

적절한 헤더를 설정하지 않으면 창 간의 통신이 중단되어 빈 팝업 창 또는 유사한 버그가 발생합니다.