설정

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

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

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

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

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

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

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

  1. Google Play Console의 API 및 서비스 섹션에서 OAuth 동의 화면 페이지를 엽니다.
  2. 메시지가 표시되면 방금 만든 프로젝트를 선택합니다.

  3. 'OAuth 동의 화면' 페이지에서 양식을 작성하고 '저장' 버튼을 클릭합니다.

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

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

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

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

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

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

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

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

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

로그인 시 OAuth 설정 표시

FedCM을 사용한 원탭

FedCM을 사용하여 Chrome 원탭에 표시된 OAuth 동의 설정

Chrome에서 사용자 동의 중에 최상위 승인된 도메인이 표시됩니다.

FedCM 없이 원탭

원탭에 표시된 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/를 추가하여 원탭 앤 로그인 버튼 iframe의 상위 URL을 허용합니다.
  • script-src 지시어의 경우 https://accounts.google.com/gsi/client를 추가하여 Google ID 서비스 자바스크립트 라이브러리의 URL을 허용합니다.
  • style-src 지시어의 경우 https://accounts.google.com/gsi/style를 추가하여 Google ID 서비스 스타일시트의 URL을 허용합니다.
  • default-src 지시어(사용된 경우)는 앞의 지시어(connect-src, frame-src, script-src 또는 style-src)가 지정되지 않은 경우 대체 역할을 합니다. 페이지가 Google ID 서비스 서버 측 엔드포인트의 상위 URL을 로드할 수 있도록 https://accounts.google.com/gsi/를 추가합니다.

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 One Tap에서 팝업을 성공적으로 만들려면 Cross-Origin-Opener-Policy (COOP)를 변경해야 할 수 있습니다.

FedCM이 사용 설정되면 브라우저가 팝업을 직접 렌더링하며 변경할 필요가 없습니다.

하지만 FedCM이 사용 중지되면 COOP 헤더를 다음과 같이 설정하세요.

  • 받는 사람: same-origin 및
  • same-origin-allow-popups 포함

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