이 가이드는 웹 애플리케이션의 변경사항을 이해하는 데 도움이 됩니다. 도입으로 Federated Credentials Management API (FedCM).
FedCM이 사용 설정되면 브라우저에 서드 파티가 표시되지 않고 사용자 메시지가 표시됩니다. 쿠키를 사용합니다
개요
FedCM은 서드 파티 쿠키. 브라우저가 사용자 설정을 제어하고, 사용자 프롬프트를 표시하며, Google과 같은 ID 공급업체에 제공할 수 있습니다.
대부분의 웹사이트에서 이전 버전과의 호환성을 통해 원활하게 이전이 이루어집니다. Google ID 서비스 JavaScript 라이브러리로 업데이트됩니다.
자동 로그인 기능 관련 업데이트 소식
Google ID 서비스용 Federated Credential Management (FedCM) 베타 는 2023년 8월에 출시되었습니다. 많은 개발자가 API를 테스트하여 의견을 제공합니다.
Google에서 개발자로부터 들은 답변 중 하나는 FedCM 자동 로그인에 관한 것입니다 사용자 동작 요구사항을 충족해야 합니다 개인 정보 보호를 강화하기 위해 Chrome에서 사용자에게 다음 사항을 요구합니다. 로그인할 때마다 Google 계정으로 웹사이트에 로그인할지 사용자가 FedCM 이전에 웹사이트를 승인한 경우에도 Chrome 인스턴스 있습니다 이 일회성 재확인은 사용자의 로그인 의도를 보여주는 원탭 메시지 이 변경사항으로 인해 일부 웹사이트의 자동 로그인 전환율에 발생한 초기 오류
최근 M121에서는 Chrome에서 FedCM 자동 로그인을 변경했습니다. 흐름 UX가 있습니다. 재확인은 서드 파티 쿠키가 다음과 같은 경우에만 필요합니다. 제한됩니다. 이는 다음을 의미합니다.
FedCM 자동 로그인에서는 재확인을 할 필요가 없습니다. 사용자가 FedCM UI로 재확인하면 이 재확인은 사용자 동작 요구사항을 준수해야 합니다.
FedCM 자동 로그인은 재확인 상태를 확인합니다. 서드 파티 쿠키가 현재 사용자에 의해 수동으로 제한되거나 향후 Chrome에서 사용할 수 있습니다.
이번 변경사항에 따라 모든 자동 로그인 개발자는 FedCM으로 마이그레이션할 것을 권장합니다. 자동 로그인 전환율의 차질을 줄이기 위해 최대한 빠른 시일 내에 시행
자동 로그인 과정의 경우 GIS JavaScript가 이전 기기에서 FedCM을 트리거하지 않습니다. Chrome (M121 이전), 웹사이트에서 FedCM을 선택한 경우에도 마찬가지입니다.
사용자 여정 차이
FedCM을 사용하는 것과 FedCM을 사용하지 않은 원탭 환경은 약간의 차이가 있을 수 있습니다
단일 세션 신규 사용자
FedCM을 사용하는 경우 원탭에 애플리케이션 이름 대신 도메인 이름이 표시됩니다.
| FedCM 사용 | FedCM이 없는 경우 |
|---|---|
|
|
단일 세션 재사용자 (자동 로그인 사용 중지)
FedCM을 사용하는 경우 원탭에 애플리케이션 이름 대신 도메인 이름이 표시됩니다.
| FedCM 사용 | FedCM이 없는 경우 |
|---|---|
|
|
단일 세션 재사용자 (자동 로그인 사용 설정)
FedCM을 사용하면 사용자가 5일 이내에 X를 클릭하여 자동 로그인을 취소할 수 있습니다. 취소 버튼을 클릭하는 대신 몇 초를 기다려야 합니다.
| FedCM 사용 | FedCM이 없는 경우 |
|---|---|
|
|
다중 세션
FedCM을 사용하는 경우 원탭에 애플리케이션 이름 대신 도메인 이름이 표시됩니다.
| FedCM 사용 | FedCM이 없는 경우 |
|---|---|
|
|
시작하기 전에
브라우저 설정과 버전이 FedCM API를 지원하는지 확인합니다. 최신 버전으로 업데이트하는 것이 좋습니다.
FedCM API는 Chrome 117 이상에서 사용할 수 있습니다.
Chrome에서 서드 파티 로그인 설정을 사용 설정합니다.
Chrome 브라우저 버전이 119 이하인 경우
chrome://flags를 열고 실험용FedCmWithoutThirdPartyCookies기능을 사용 설정합니다. 이 단계 Chrome 브라우저 버전 120 이상에서는 필요하지 않습니다.
웹 앱 이전
다음 단계에 따라 FedCM을 사용 설정하고 잠재적 마이그레이션 영향을 평가하세요. 기존 웹 애플리케이션을 변경할 수 있습니다.
1. 다음을 사용하여 초기화할 때 FedCM을 사용 설정하는 불리언 플래그를 추가합니다.
HTML을 사용하려면
data-use_fedcm_for_prompt속성을true로 설정합니다.JavaScript의 경우 다음에서
use_fedcm_for_prompt를true로 설정합니다.IdConfiguration객체
2. 코드에서 isDisplayMoment(), isDisplayed(), isNotDisplayed(), getNotDisplayedReason() 메서드 사용을 삭제합니다.
사용자 개인 정보 보호를 개선하기 위해 google.accounts.id.prompt 콜백은
더 이상
PromptMomentNotication 객체. 종속된 모든 코드를 삭제합니다.
모멘트 관련 메서드를 표시합니다. isDisplayMoment(), isDisplayed()입니다.
isNotDisplayed(), getNotDisplayedReason() 메서드를 사용합니다.
3. 코드에서 getSkippedReason() 메서드 사용을 삭제합니다.
건너뛰기 모먼트인 isSkippedMoment()는 여전히
PromptMomentNotication의 google.accounts.id.prompt 콜백
객체에 대한 자세한 이유가 제공되지 않습니다. 종속된 모든 코드를 삭제합니다.
getSkippedReason() 메서드를 호출합니다.
닫은 활동 알림, isDismissedMoment(),
관련 세부 이유 메서드 getDismissedReason()는 변경되지 않습니다.
FedCM이 사용 설정된 경우
4. data-prompt_parent_id 및 intermediate_iframes에서 position 스타일 속성을 삭제합니다.
브라우저에서 사용자 프롬프트의 크기와 위치, 맞춤 위치를 제어합니다. 원탭 사용은 지원되지 않습니다.
5. 필요한 경우 페이지 레이아웃을 업데이트하세요.
브라우저에서 사용자 프롬프트의 크기와 위치를 제어합니다. 다음에 따라 다름
개별 페이지의 레이아웃에 따라, 일부 콘텐츠는 맞춤형으로 오버레이될 수 있음
데스크톱의 원탭 위치는
스타일 속성, data-prompt_parent_id
intermediate_iframes, 맞춤설정된 iframe 및 기타 창의적인 방식을 사용해 보세요.
중요한 정보가 표시될 때 사용자 환경을 개선하기 위해 페이지 레이아웃을 변경합니다. 가려져 있습니다. 다음과 같은 가정이 있더라도 원탭 프롬프트를 중심으로 UX를 빌드하지 마세요. 기본 위치에 있습니다. FedCM API는 브라우저에서 중재되므로 다른 브라우저 공급업체에 따라 프롬프트의 위치가 약간 표시될 수 있습니다. 다르게 보일 수 있습니다.
6. 웹 앱이 교차 출처 iframe에서 One Tap API를 호출하는 경우 상위 프레임에 allow="identity-credentials-get" 속성을 추가합니다.
iframe이 origin은 상위 출처입니다. 예를 들어 다음과 같습니다.
- 서로 다른 도메인:
https://example1.com및https://example2.com - 서로 다른 최상위 도메인:
https://example.uk및https://example.jp 하위 도메인:
https://example.com및https://login.example.com사용자 개인 정보 보호를 개선하기 위해 교차 출처 iframe에서 One Tap API가 호출될 때 추가해야 합니다.
allow="identity-credentials-get"드림 속성을iframe태그에 포함해야 합니다.<iframe src="https://your.cross-origin/onetap.page" allow="identity-credentials-get"></iframe>앱에서 다른 iframe이 포함된 iframe을 사용하는 경우 속성이 모든 하위 iframe을 포함하여 모든 iframe에 추가되도록 합니다.
예를 들어 다음 시나리오를 고려해 보세요.
상단 문서 (
https://www.example.uk)에 'iframe'이라는 iframe이 포함되어 있습니다. A'로 시작하고 페이지 (https://logins.example.com)를 삽입합니다.삽입된 페이지 (
https://logins.example.com)에도 iframe이 포함되어 있습니다. 'iframe B'로 지정되었으며 추가로 페이지 (https://onetap.example2.com)를 삽입합니다. 원탭을 호스팅하는 Google Cloud 콘솔입니다원탭이 올바르게 표시되도록 하려면 속성을 Iframe A 및 Iframe B 태그에 모두 적용됩니다.
표시되지 않은 원탭 프롬프트의 문의에 대해 준비합니다. 출처가 다른 다른 사이트에서 원탭을 호스팅하는 내 페이지를 삽입할 수 있습니다. 사용할 수 있습니다. 더 많은 지원 티켓을 받을 수 있습니다. 원탭이 최종 사용자 또는 다른 사이트 소유자에게 표시되지 않는 문제 동안 해당 페이지의 사이트 소유자만 업데이트를 할 수 있습니다. 다음과 같은 조치를 취하세요.
iframe 설정 방법을 포함하도록 개발자 문서 업데이트 사이트를 호출할 수 있습니다. 문서에 이 페이지를 연결할 수 있습니다.
해당하는 경우 개발자 FAQ 페이지를 업데이트하세요.
지원팀에 예정된 변경사항을 알리고 대응에 대비하세요 전달할 수 있습니다
문제가 발생한다면 영향을 받는 파트너, 고객 또는 사이트 소유자에게 원활하게 전환할 수 있습니다
7. 이러한 지시어를 콘텐츠 보안 정책 (CSP)에 추가합니다.
일부 웹사이트에서는 CSP를 정의하지 않으므로 이 단계는 선택사항입니다.
웹사이트에서 CSP를 사용하지 않는 경우 변경할 필요가 없습니다.
CSP가 현재 원탭에서 작동하고
connect-src를 사용하지 않는 경우frame-src,script-src,style-src또는default-src변경사항 없음 확인할 수 있습니다또는 이 가이드에 따라 CSP를 설정하세요. 적절한 CSP가 없는 경우 FedCM 원탭이 사이트에 표시되지 않습니다.
8. 로그인에 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는 다음과 같습니다. 있습니다
마이그레이션 테스트 및 확인
이전 단계에 따라 필요한 사항을 변경한 후 확인합니다
브라우저가 FedCM을 지원하는지, 기존 Google 계정이 있는지 확인합니다. 계정 세션
애플리케이션의 원탭 페이지로 이동합니다.
원탭 프롬프트가 표시되고 그 아래에 안전하게 오버레이되는 것을 확인합니다. 있습니다.
엔드포인트 또는 콜백 메서드로 올바른 사용자 인증 정보가 반환되는지 확인하기 원탭을 사용하여 애플리케이션에 로그인할 때.
자동 로그인이 사용 설정된 경우 취소가 작동하고 올바른지 확인합니다. 올바른 사용자 인증 정보가 엔드포인트 또는 콜백 메서드로 반환됩니다.
원탭 쿨다운 기간
원탭 클릭 를 누르면 프롬프트가 닫히고 쿨다운 기간이 시작됩니다. 원탭 프롬프트가 일시적으로 표시되지 않도록 억제합니다. Chrome에서 대기 기간이 끝나기 전에 원탭 프롬프트를 다시 표시하려면 주소 표시줄의 자물쇠 아이콘을 클릭하여 쿨다운 상태를 재설정할 수 있습니다. 권한 재설정 버튼을 클릭합니다.
자동 로그인 대기 기간
FedCM을 사용하여 원탭 자동 로그인을 테스트할 때는 10분 자동 로그인 시도 사이에 대기 시간을 줄일 수 있습니다. 대기 기간은 재설정합니다. 10분 정도 기다리거나 다른 Google 계정을 사용해야 합니다. 자동 로그인을 다시 트리거할 수 있습니다.
유용한 리소스
개인 정보 보호 샌드박스 분석 도구 (PSAT)는 Chrome DevTools 확장 프로그램입니다. FedCM과 같은 대체 API의 채택을 지원할 수 있습니다. 작동 방식: 사이트에서 영향을 받는 기능이 있는지 검사하고 있습니다.