FedCM을 구현하도록 개발 환경 설정

FedCM 구현을 시작하도록 환경을 설정하려면 Chrome의 IdP와 RP 모두에 안전한 컨텍스트 (HTTPS 또는 localhost)가 필요합니다.

타사 쿠키 차단

Chrome에서 서드 파티 쿠키 없이 FedCM이 작동하는 방식을 테스트할 수 있습니다. 서드 파티 쿠키를 차단하려면 시크릿 모드를 사용하거나 데스크톱 설정에서 chrome://settings/cookies 또는 모바일에서 설정 > 사이트 설정> 쿠키로 이동하여 '서드 파티 쿠키 차단'을 선택합니다.

데스크톱에서 디버그

Google은 DevTools를 사용한 FedCM 디버깅 환경을 개선하기 위해 노력하고 있습니다. 이러한 기능이 개발 중인 동안 chrome://net-export 네트워크 요청 로그를 사용할 수 있습니다.

1. chrome://net-export로 이동합니다.

2. '원시 바이트 포함'을 선택하고 '디스크에 로깅 시작'을 클릭합니다. 메시지가 표시되면 로그를 저장할 위치를 선택합니다.

   

3. FedCM을 호출하는 페이지(예: demo RP)를 엽니다.

4. 디버그할 FedCM 흐름 (예: 사용자 가입)을 완료합니다.

5. chrome://net-export로 이동하여 '로그 중지'를 누릅니다.

   

6. 원하는 로그 보기 도구(예: NetLog 뷰어)를 사용하여 로그를 엽니다.

7. NetLog 뷰어를 사용하는 경우 왼쪽 패널에서 Events를 선택하고 type:URL_REQUEST 필터를 적용합니다.

이 예시에서 로그는 계정 엔드포인트에 두 개의 요청이 전송되었음을 보여줍니다. 이는 사용자가 페이지를 처음 방문할 때 IdP로 로그인하지 않았기 때문에 발생합니다. URL_REQUEST_JOB_FILTERED_BYTES_READ는 서버가 응답 본문 { error: "not signed in." }에 오류 메시지로 응답했음을 나타냅니다.

두 번째 /accounts 요청이 성공했고 IdP가 계정 데이터로 응답했습니다.

다음 단계