이 페이지는 Cloud Translation API를 통해 번역되었습니다.

FedCM으로 이전

이 가이드는 Federated Credentials Management API (FedCM)에서 도입한 웹 애플리케이션의 변경사항을 이해하는 데 도움이 됩니다.

FedCM이 사용 설정되면 브라우저에 사용자 메시지가 표시되고 서드 파티 쿠키가 사용되지 않습니다.

개요

웹용 개인 정보 보호 샌드박스 및 Chrome이 웹에서 서드 파티 쿠키를 삭제함에 따라 Google ID 서비스 및 사용자 로그인에 중요한 변경사항이 도입되었습니다.

FedCM은 서드 파티 쿠키를 사용하지 않고도 더 많은 비공개 로그인 과정을 지원합니다. 브라우저에서 사용자 설정을 제어하고 사용자 메시지를 표시하며 명시적인 사용자 동의가 이루어진 후에만 Google과 같은 ID 공급업체에 연락합니다.

대부분의 웹사이트는 이전 버전과 호환되는 Google ID 서비스 JavaScript 라이브러리 업데이트를 통해 원활하게 이전됩니다.

시작하기 전에

브라우저 및 브라우저 버전이 FedCM API를 지원하는지 확인하고 필요한 경우 최신 버전으로 업데이트합니다.

서드 파티 쿠키를 차단한 로그인 흐름을 테스트하기 전에 chrome://flags를 열고 실험용 FedCmWithoutThirdPartyCookies 기능을 사용 설정합니다. 이 단계는 기본값이 될 때까지만 필요합니다. 또한 Chrome에서 서드 파티 로그인 설정을 사용 설정해야 합니다.

웹 앱 이전

다음 단계에 따라 FedCM을 사용 설정하고, 잠재적 마이그레이션 영향을 평가하고, 필요한 경우 기존 웹 애플리케이션을 변경하세요.

다음을 사용하여 초기화할 때 FedCM을 사용 설정하도록 불리언 플래그를 추가합니다.
- HTML에서 data-use_fedcm_for_prompt 속성을 true로 설정합니다.
- JavaScript의 경우 IdConfiguration 객체에서 use_fedcm_for_prompt를 true로 설정합니다.
PromptMomentNotication 객체에서 반환된 opt_out_or_no_session 값 사용을 삭제합니다.

사용자 개인 정보 보호를 개선하기 위해 google.accounts.id.prompt 콜백은 더 이상 사용자 설정 또는 세션 상태와 관련된 결과를 반환하지 않습니다.
사용자 플로우 및 웹사이트 코드를 업데이트하여 isDisplayMoment() 이벤트의 지연된 알림을 처리합니다.

사용자 개인 정보 보호를 개선하기 위해 FedCM이 사용 설정된 경우 디스플레이 모멘트 알림은 의도적으로 임의의 시간 지연됩니다. 실제 이벤트가 발생한 후 최대 1분 동안 알림을 수신할 수 있습니다. isDisplayMoment를 사용하여 조건부 메시지를 표시하거나 사용자 상호작용을 트리거할 때는 UX 디자인의 가변 시간을 신중하게 고려하세요.
data-prompt_parent_id 및 intermediate_iframes에서 position 스타일 속성을 삭제합니다.

브라우저는 사용자 메시지의 크기와 위치를 제어하지만 데스크톱의 원탭 맞춤 위치는 지원되지 않습니다.
필요한 경우 페이지 레이아웃을 업데이트합니다.

브라우저에서 사용자 메시지의 크기와 위치를 제어합니다. 개별 페이지의 레이아웃에 따라 일부 콘텐츠가 오버레이될 수 있습니다.

중요한 정보가 가려질 때 사용자 환경을 개선하기 위해 페이지 레이아웃을 변경합니다.
웹 앱이 교차 출처 iframe에서 원탭 API를 호출하는 경우 allow="identity-credentials-get" 속성을 상위 프레임에 추가합니다.

iframe은 출처가 상위 출처와 정확히 같지 않으면 교차 출처로 간주됩니다. 예를 들어 다음과 같습니다.
- 다른 도메인: https://example1.com 및 https://example2.com
- 다른 최상위 도메인: https://example.uk 및 https://example.jp
- 하위 도메인: https://example.com 및 https://login.example.com
사용자 개인 정보 보호를 개선하기 위해 One Tap API가 교차 출처 iframe에서 호출될 때 모든 상위 프레임 iframe 태그에 allow="identity-credentials-get" 속성을 추가해야 합니다.
```
<iframe src="https://your.cross-origin/onetap.page" allow="identity-credentials-get"></iframe>
```
앱이 다른 iframe이 포함된 iframe을 활용하는 경우 속성이 모든 하위 iframe을 포함한 모든 iframe에 추가되는지 확인해야 합니다.

예를 들어 다음 시나리오를 고려해 보세요.
- 맨 위 문서 (https://www.example.uk)에는 페이지 (https://logins.example.com)를 삽입하는 'Iframe A'라는 iframe이 포함되어 있습니다.
- 이 삽입된 페이지 (https://logins.example.com)에는 'Iframe B'라는 iframe도 포함되어 있으며, 이 iframe에는 원탭을 호스팅하는 페이지 (https://onetap.example2.com)가 추가로 삽입됩니다.
원탭이 제대로 표시되도록 하려면 속성을 iframe A 및 iframe B 태그 모두에 추가해야 합니다.
이러한 명령어를 콘텐츠 보안 정책 (CSP)에 추가합니다.

일부 웹사이트에서는 CSP를 정의하지 않으므로 이 단계는 선택사항입니다.
로그인 관련 Accelerated Mobile Pages (AMP) 지원을 삭제합니다.

AMP의 사용자 로그인 지원은 웹 앱에서 구현한 GIS의 선택적 기능입니다. 이러한 경우

다음에 대한 참조를 삭제합니다.
- amp-onetap-google 맞춤 요소
- <script async custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-0.1.js"></script>
AMP에서 로그인 요청을 웹사이트의 HTML 로그인 흐름으로 리디렉션하는 것이 좋습니다. 관련 Intermediate Iframe Support API는 영향을 받지 않습니다.