FedCM API로 Google 로그인

<ph type="x-smartling-placeholder">

이 가이드에서는 서드 파티 쿠키 지원 중단이 Google 로그인 플랫폼 라이브러리 주제에는 타임라인, 이전 버전과 호환되는 라이브러리 업데이트의 다음 단계, 방법 영향 평가를 실시하고 사용자 로그인이 계속해서 발생하는지 확인합니다. 필요한 경우 웹 앱을 업데이트하기 위한 안내를 제공합니다. 전환 기간 관리 옵션 및 도움말 보기 방법 살펴보겠습니다

라이브러리 상태

모든 새 웹 앱에서 지원 중단된 Google 로그인 플랫폼을 사용하지 못하도록 차단됩니다. 라이브러리를 사용하는 앱은 추가 공지가 있을 때까지 계속될 수 있습니다. 가 라이브러리의 최종 지원 종료 날짜 (종료)가 설정되지 않았습니다. 자세한 내용은 지원 중단 및 서비스 종료를 참고하세요.

Chrome의 개인 정보 보호 샌드박스 서드 파티 쿠키 차단이 웹 앱에 영향을 미침 로그인 플랫폼 라이브러리를 사용하는 API 기존 동작을 유지하려면 서드 파티 쿠키 사용 없이 이전 버전과 호환되는 업데이트 FedCM API가 이 라이브러리에 추가됩니다. 대부분의 변경은 원활하지만 업데이트로 인해 사용자 동의 메시지, iframe이 permissions-policy콘텐츠 보안 정책 (CSP) 이러한 변경사항 웹 앱에 영향을 줄 수 있으며 애플리케이션 코드 및 사이트를 변경해야 할 수 있습니다. 구성할 수 있습니다

전환 기간 동안 구성 옵션은 FedCM API는 사용자 로그인 시 사용됩니다.

타임라인

최종 업데이트: 2024년 7월

다음은 사용자 로그인 동작에 영향을 미치는 날짜 및 변경사항입니다.

  • 2023년 3월 Google 로그인 플랫폼 지원 지원 중단 있습니다.
  • 2024년 1월 Chrome에서 서드 파티 쿠키의 1% 차단 플랫폼 라이브러리에 서드 파티 쿠키의 일시적인 예외가 부여됨 지원 중단 기능 트라이얼을 통해 차단하세요.
  • 2024년 7월 전환 기간 시작 및 Google 로그인 플랫폼 라이브러리 FedCM API 지원이 추가되었습니다. 기본적으로 Google이 FedCM을 사용한 사용자 로그인 요청 비율 웹 앱이 use_fedcm 매개변수를 사용하여 이 동작을 명시적으로 재정의합니다.
  • Google의 FedCM API 필수 채택 (결정 예정일) 로그인 플랫폼 라이브러리. 이후 use_fedcm 매개변수가 무시됨 모든 사용자 로그인 요청은 FedCM을 사용합니다.

FedCM API로 이동한 후 Google 로그인 플랫폼 라이브러리는 더 이상 사용되지 않습니다 영향을 받지 않습니다. 서드 파티 쿠키 업데이트 Chrome의 개인 정보 보호 샌드박스 타임라인을 참고하세요.

다음 단계

다음과 같은 세 가지 옵션을 선택할 수 있습니다.

  1. 영향 평가를 실시하고 필요한 경우 웹 앱을 업데이트합니다. 이 접근 방식은 웹 앱을 변경해야 하는 기능이 있습니다. 이 가이드의 다음 섹션에 안내가 제공됩니다.
  2. Google ID 서비스 (GIS) 라이브러리로 이동합니다. 최신 버전으로 사용할 것을 적극 권장합니다. 다음을 따라 주세요. 이 안내를 참고하세요.
  3. 아무 조치도 취하지 않습니다. 웹 앱이 자동으로 업데이트되려면 Google 로그인 라이브러리가 사용자 로그인을 위해 FedCM API로 이동합니다. 이것은 하지만 사용자가 로그인할 수 없을 위험이 있습니다. 웹 앱을 만드는 것입니다.

영향 평가 실시

다음 안내에 따라 웹 앱을 원활하게 업데이트할 수 있는지 확인하세요. 이전 버전과 호환되는 업데이트를 통해 또는 Google 로그인 플랫폼 라이브러리 전체를 사용할 때 사용자가 로그인할 수 없음 FedCM API를 채택했습니다

설정

브라우저 API와 최신 버전의 Google 로그인 플랫폼 라이브러리는 다음과 같습니다. 사용자 로그인 중 FedCM을 사용하는 데 필요합니다.

계속하기 전에:

  • 데스크톱용 Chrome을 최신 버전으로 업데이트합니다. Android용 Chrome 에는 버전 M128 이상이 필요하며 이전 버전으로는 테스트할 수 없습니다.
  • chrome://flags를 열고 다음 특성을 이러한 값으로 설정합니다.

    • #fedcm-authz 사이트에서 콘텐츠 보안 정책을 사용하는 경우 사용 설정됨 이는 https://accounts.google.com/gsi/ottoken를 차단하는 역할을 합니다.
    • #tracking-protection-3pcd 사용 설정됨
    • #third-party-cookie-deprecation-trial 사용 중지됨
    • #tpcd-metadata-grants 사용 중지됨
    • #tpcd-heuristics-grants 사용 중지됨

    Chrome을 다시 실행합니다.

  • Google 로그인 플랫폼을 초기화할 때 use_fedcmtrue로 설정합니다. 포함되어 있습니다. 일반적으로 초기화는 다음과 같습니다.

    • gapi.client.init({use_fedcm: true}) 또는
    • gapi.auth2.init({use_fedcm: true}) 또는
    • gapi.auth2.authorize({use_fedcm: true}).
  • Google 로그인 플랫폼 라이브러리의 캐시된 버전을 무효화합니다. 일반적으로 이 단계는 필요하지 않습니다. 최신 버전의 라이브러리가 api.js, client.js 또는 <script src> 태그의 platform.js (요청에서 번들 이름).

  • OAuth 클라이언트 ID의 OAuth 설정을 확인합니다.

    1. Google API Console의 사용자 인증 정보 페이지를 엽니다.
    2. 웹사이트 URI가 승인된 JavaScript 원본. URI는 스키마와 정규화된 호스트 이름만 사용할 수 있습니다. 예를 들면 https://www.example.com입니다.

    3. 원하는 경우 엔드포인트로의 리디렉션을 사용하여 사용자 인증 정보가 반환될 수 있습니다. 직접 호스팅해야 합니다. 이러한 경우 리디렉션 URI가 승인된 리디렉션 URI에 포함되어 있는지 확인합니다. 리디렉션 URI에는 스키마, 정규화된 호스트 이름, 경로가 포함됨 리디렉션 URI 유효성 검사 규칙을 준수해야 합니다. 예로 https://www.example.com/auth-receiver를 들 수 있습니다.

테스트

설정의 안내를 따른 후 다음 단계를 따르세요.

Google 로그인 라이브러리 요청 찾기

permissions-policy콘텐츠 보안 정책 변경사항이 적용되는지 확인 Google 로그인 플랫폼 라이브러리 요청을 검사하여 API를 구현할 수 있습니다 이렇게 하려면 라이브러리의 이름과 출처를 사용하여 요청을 찾습니다.

  • Chrome에서 DevTools Network 패널을 열고 페이지를 새로고침합니다.
  • 도메인이름 열의 값을 사용하여 라이브러리를 찾습니다. 요청: <ph type="x-smartling-placeholder">
      </ph>
    • 도메인은 apis.google.com이며
    • 이름은 api.js, client.js 또는 platform.js입니다. 특정 Name 값은 문서에서 요청한 라이브러리 번들에 따라 다릅니다.

예를 들어 도메인 열에서 apis.google.com을 필터링하고 platform.js이름 열에 입력합니다.

iframe 권한 정책 확인

사이트가 교차 출처 내에서 Google 로그인 플랫폼 라이브러리를 사용할 수 있음 있습니다. 이 경우 업데이트가 필요합니다.

Google 로그인 라이브러리 요청 찾기를 수행한 후 DevTools에서 Google 로그인 라이브러리 요청을 Network 패널에서 Sec-Fetch-Site 헤더를 헤더 탭의 요청 헤더 섹션 헤더의 값이 다음과 같습니다.

  • same-site또는 same-origin인 경우 교차 출처 정책이 적용되지 않으며 변경할 수 있어야 합니다
  • iframe을 사용 중인 경우 cross-origin를 변경해야 할 수도 있습니다.

iframe이 있는지 확인하려면 다음 단계를 따르세요.

  • Chrome DevTools에서 Elements 패널을 선택합니다.
  • Ctrl-F를 사용하여 문서에서 iframe을 찾습니다.

iframe이 발견되면 문서를 검사하여 gapi.auth2에 대한 호출이 있는지 확인합니다. Google 로그인 라이브러리를 로드하는 함수 또는 script src 지시문 삽입해야 합니다. 이러한 경우,

문서의 모든 iframe에 대해 이 프로세스를 반복합니다. iframe은 중첩될 수 있으므로 allow 지시어를 주변의 모든 상위 iframe에 추가해야 합니다.

컨텐츠 보안 정책 확인

사이트에서 콘텐츠 보안 정책을 사용하는 경우 CSP를 다음과 같이 업데이트해야 할 수 있습니다. Google 로그인 라이브러리 사용을 허용합니다.

Google 로그인 라이브러리 요청 찾기를 수행한 후 DevTools에서 Google 로그인 라이브러리 요청을 Network 패널에서 Content-Security-Policy 헤더를 헤더 탭의 응답 헤더 섹션

헤더를 찾을 수 없는 경우 변경할 필요가 없습니다. 그렇지 않은 경우 이러한 CSP 지시문은 CSP 헤더에 정의되어 있으며 다음을 통해 업데이트합니다.

  • https://apis.google.com/js/, https://accounts.google.com/gsi/ 추가, 및 https://acounts.google.com/o/fedcm/를 임의의 connect-src, default-src 또는 frame-src 지시어

  • https://apis.google.com/js/bundle-name.jsscript-src에 추가 중 지시어를 사용합니다. bundle-name.jsapi.js, client.js 또는으로 바꿉니다. platform.js문서가 요청하는 라이브러리 번들에 기반합니다.

사용자 프롬프트 변경사항 확인

사용자 프롬프트 동작에는 몇 가지 차이점이 있지만, FedCM은 사용자 활성화 요구사항을 업데이트합니다.

FedCM 모달 대화상자 이미지

사이트의 레이아웃을 검사하여 기본 콘텐츠가 브라우저의 모달 대화상자에 의해 일시적으로 가려집니다. 만약 일부 요소의 레이아웃이나 위치를 조정해야 할 수 있습니다. 확인할 수 있습니다

사용자 활성화

FedCM에 업데이트된 사용자 활성화 요구사항이 포함되어 있습니다. 버튼을 누르거나 링크 클릭은 제3자 출처의 액세스를 허용하는 사용자 동작의 예입니다. 데이터를 저장하는 데 사용됩니다. FedCM을 사용하면 브라우저에 다음과 같은 경우 사용자 동의를 얻습니다.

  • 사용자가 새 브라우저 인스턴스를 사용하여 웹 앱에 처음 로그인할 때
  • GoogleAuth.signIn가 호출됩니다.

지금은 사용자가 이전에 웹사이트에 로그인한 적이 있는 경우 Google 로그인 라이브러리를 초기화할 때 사용자의 로그인 정보 추가 사용자 상호작용 없이 gapi.auth2.init 사용

서드 파티 쿠키 지원 중단으로 인해 사용자가 먼저 FedCM 로그인 과정을 한 번 이상 진행했습니다.

FedCM을 선택하고 다음에 동일한 경우 GoogleAuth.signIn를 호출합니다. 사용자가 웹사이트를 방문하면 gapi.auth2.init에서 사용자의 로그인을 가져올 수 있습니다. 초기화 중에 사용자 상호작용 없이 정보를 수집합니다.

일반적인 사용 사례

Google 로그인 라이브러리의 개발자 문서에는 가이드와 코드가 포함되어 있습니다. 샘플이 준비되어 있습니다. 이 섹션에서는 FedCM이 고객의 비즈니스 관행에 확인할 수 있습니다

  • 웹 앱에 Google 로그인 통합

    demo에서는 <div> 요소와 클래스가 버튼을 렌더링합니다. 이미 로그인한 사용자의 경우 페이지 onload 이벤트에서 사용자가 반환 사용자 인증 정보를 제공합니다 로그인하고 새 계정을 설정하려면 사용자 상호작용이 필요합니다. 세션입니다.

    라이브러리 초기화는 다음을 호출하는 g-signin2 클래스에 의해 실행됩니다. gapi.loadgapi.auth2.init.

    사용자 동작(<div> 요소 onclick 이벤트)이 auth2.signIn를 호출합니다. (로그인 시 또는 로그아웃 시 auth2.signOut)

  • 맞춤 Google 로그인 버튼 빌드

    데모 1에서는 맞춤 속성을 사용하여 로그인 버튼, 이미 로그인한 사용자의 경우 페이지 onload 이벤트 사용자 인증 정보를 반환합니다. 로그인하려면 사용자 상호작용이 필요하며 새 세션을 설정합니다.

    라이브러리 초기화는 onload 이벤트를 통해 실행됩니다. platform.js 라이브러리와 버튼은 gapi.signin2.render에 의해 표시됩니다.

    로그인 버튼을 누르는 사용자 동작은 auth2.signIn를 호출합니다.

    데모 2에서는 <div> 요소, CSS 스타일, 맞춤 그래픽이 로그인 버튼의 모양을 제어하는 데 사용됩니다. 현재 사용자 상호작용 새 세션을 설정하는 데 필요합니다.

    라이브러리 초기화는 시작 함수를 사용하여 문서 로드 시 실행됩니다. 이 코드는 gapi.load, gapi.auth2.init, gapi.auth2.attachClickHandler입니다.

    사용자 동작(<div> 요소 onclick 이벤트)이 auth2.signIn를 호출합니다. 로그인할 때 auth2.attachClickHandler 또는 auth2.signOut 사용 있습니다.

  • 사용자의 세션 상태 모니터링

    demo에서는 버튼 누르기가 사용자 로그인 및 로그아웃에 사용됩니다. 로그인하고 새 세션을 설정하려면 사용자 상호작용이 필요합니다.

    라이브러리 초기화는 gapi.load를 직접 호출하여 실행됩니다. gapi.auth2.init, 이후 gapi.auth2.attachClickHandler() platform.jsscript src를 사용하여 로드됩니다.

    사용자 동작(<div> 요소 onclick 이벤트)이 auth2.signIn를 호출합니다. 로그인할 때 auth2.attachClickHandler 또는 auth2.signOut 사용 있습니다.

  • 추가 권한 요청

    demo에서는 버튼 누르기를 사용하여 추가 OAuth 2.0을 요청합니다. 새 액세스 토큰을 얻고, 이미 로그인한 사용자의 경우에는 페이지 onload 이벤트는 사용자 인증 정보를 반환합니다. 사용자 상호작용은 필수 항목입니다. 로그인하고 새 세션을 설정해야 합니다.

    라이브러리 초기화는 onload 이벤트에 의해 실행됩니다. gapi.signin2.render 호출을 통해 platform.js 라이브러리에 액세스할 수 있습니다.

    <button> 요소를 클릭하는 사용자 동작은 googleUser.grant 또는 auth2.signOut를 사용하는 추가 OAuth 2.0 범위 있습니다.

  • 리스너를 사용하여 Google 로그인 통합

    demo에서는 이미 로그인한 사용자의 페이지 onload 이벤트 사용자 인증 정보를 반환합니다. 로그인하려면 사용자 상호작용이 필요하며 새 세션을 설정합니다.

    라이브러리 초기화는 시작 함수를 사용하여 문서 로드 시 실행됩니다. 이 코드는 gapi.load, gapi.auth2.init, gapi.auth2.attachClickHandler입니다. 다음으로 auth2.isSignedIn.listenauth2.currentUser.listen은(는) 다음에 대한 변경사항 알림을 설정하는 데 사용됩니다. 세션 상태를 유지합니다. 마지막으로 auth2.SignIn가 호출되어 사용자 인증 정보를 반환합니다. 표시됩니다.

    사용자 동작(<div> 요소 onclick 이벤트)이 auth2.signIn를 호출합니다. 로그인할 때 auth2.attachClickHandler 또는 auth2.signOut 사용 있습니다.

  • 서버 측 앱용 Google 로그인

    demo에서는 OAuth 2.0 인증 코드를 요청할 때 사용자 동작을 사용합니다. JS 콜백이 AJAX 호출을 수행하여 백엔드로 응답을 보냅니다. 확인할 수 있습니다.

    라이브러리 초기화는 platform.jsonload 이벤트를 사용하여 실행됩니다. 시작 함수를 사용하여 gapi.load를 호출하고 gapi.auth2.init입니다.

    <button> 요소를 클릭하는 사용자 동작은 auth2.grantOfflineAccess를 호출하여 승인 코드를 생성합니다.

  • 교차 플랫폼 SSO

    FedCM에서는 Android 사용자를 포함한 모든 브라우저 인스턴스에 대해 동의를 요구합니다. 로그인한 경우 일회성 동의가 필요합니다.

전환 기간 관리

전환 기간 동안 사용자 로그인의 일정 비율에서 FedCM을 사용할 수 있으며, 정확한 비율은 다를 수 있으며 시간이 지남에 따라 변경될 수 있습니다. 기본적으로 Google은 FedCM을 사용하는 로그인 요청 수 전환 기간에 FedCM을 활용 전환 기간 종료 시 FedCM은 필수가 되어 모든 로그인 요청에 사용됩니다.

선택을 선택하면 사용자는 FedCM 로그인 과정을 거치며, 동시에 사용자는 사용자가 기존의 로그인 과정을 거치게 됩니다. 이 동작은 use_fedcm 매개변수를 사용하여 제어됩니다.

선택

Gmail 계정에 대한 로그인을 전부 또는 일부로 FedCM API를 사용합니다 이렇게 하려면 초기화할 때 use_fedcmtrue로 설정하세요. 확인할 수 있습니다 이 경우 사용자 로그인 요청은 FedCM API를 사용합니다.

선택 해제

전환 기간 동안 사이트 로그인을 시도하는 사용자의 비율 기본적으로 FedCM API를 사용합니다. 앱에서 FedCM API 사용을 일시적으로 거부할 수 있습니다. 이렇게 하려면 플랫폼 라이브러리를 초기화할 때 use_fedcm에서 false로 사용자 로그인 요청은 FedCM API를 사용하지 않습니다.

필수 채택이 완료되면 모든 use_fedcm 설정은 Google 로그인 플랫폼 라이브러리

도움말 보기

google-signin 태그를 사용하여 StackOverflow에서 검색하거나 질문하세요.