신뢰 당사자 측에서 FedCM을 사용하여 ID 솔루션 구현

서드 파티 (RP)는 사이트에서 FedCM을 사용 설정하기 위해 다음 단계를 완료해야 합니다.

  • RP 사이트에서 FedCM 엔드포인트가 허용되어 있는지 확인합니다.
  • FedCM JavaScript API를 사용하여 사용자 인증을 시작합니다.
  • ID 공급자 (또는 Chrome 136부터 여러 ID 공급자)에 메타데이터 (예: 개인정보처리방침 및 서비스 약관 URL)를 제공합니다.
  • [선택사항] UX 모드를 선택하거나, 로그인 또는 도메인 힌트를 제공하거나, 맞춤 매개변수를 전달하거나, 특정 사용자 정보를 요청하거나, 맞춤 오류 메시지를 제공하거나, 사용자를 재인증하는 방법을 선택하여 사용자 환경을 맞춤설정합니다.

신뢰 당사자에서 FedCM API 호출

IdP의 구성과 엔드포인트가 제공되면 RP는 navigator.credentials.get()를 호출하여 사용자가 IdP로 RP에 로그인하도록 허용해 달라고 요청할 수 있습니다.

API를 호출하기 전에 사용자의 브라우저에서 FedCM을 사용할 수 있는지 확인해야 합니다. FedCM을 사용할 수 있는지 확인하려면 FedCM 구현을 이 코드로 래핑하세요.

  if ('IdentityCredential' in window) {
    // If the feature is available, take action
  } else {
    // FedCM is not supported, use a different identity solution
  }

사용자가 FedCM을 사용하여 RP의 IdP에 로그인하도록 허용하려면 RP가 navigator.credentials.get()를 호출하면 됩니다. Chrome 136부터 RP는 단일 navigator.credentials.get() 호출에서 여러 ID 제공업체의 배열을 지정하여 여러 IdP를 지원할 수 있습니다. 예를 들면 다음과 같습니다.

  const credential = await navigator.credentials.get({
      identity: {
        // Specify the IdP (or multiple IdPs, supported from Chrome 136) this Relying Party supports
        providers: [
        {
              configURL: 'https://accounts.idp-1.example/config.json',
              clientId: '********'
        },
        {
          configURL: 'https://accounts.idp-2.example/config.json',
          clientId: '********'
        }]
      }
    },
  );
  const { token } = credential;
  
  // Get the current IdP's configURL to identify which provider the user is signed in with
  const currentIdpConfigUrl = credential.configURL;
  if (currentIdpConfigUrl === 'https://idp1.example/foo.json') {
    // handle the case where the user signed in with idp1
  } else if (currentIdpConfigUrl === 'https://idp2.example/bar.json') {
    // handle the case where the user signed in with idp2
    }

IdP1 및 IdP2로 로그인하여 여러 IdP 기능을 사용해 보세요.

컨텍스트 속성

선택사항인 context 속성을 사용하면 RP가 미리 정의된 인증 컨텍스트를 수용하기 위해 FedCM 대화상자 UI의 문자열 (예: 'rp.example에 로그인', 'idp.example 사용')을 수정할 수 있습니다. context 속성은 다음 값을 가질 수 있습니다.

  • signin(기본)
  • signup
  • use
FedCM 대화상자의 UI 구성요소를 설명하는 다이어그램: 왼쪽 상단에 아이콘이 표시됩니다. 아이콘 오른쪽에는 'IdP로 RP에 로그인'이라는 메시지를 표시하는 컨텍스트 구성요소가 있습니다. 하단에는 맞춤 텍스트와 배경색이 있는 '계속' 버튼이 있습니다.
FedCM 대화상자에 브랜딩이 적용되는 방식

예를 들어 context을 use로 설정하면 다음 메시지가 표시됩니다.

맞춤설정된 컨텍스트 메시지를 표시하는 FedCM 대화상자: 컨텍스트 메시지가 FedCM으로 '로그인'하는 대신 FedCM을 '사용'한다고 표시됩니다.
맞춤설정된 컨텍스트 메시지를 표시하는 FedCM 대화상자

브라우저는 계정 목록 엔드포인트의 응답에 approved_clients가 있는지에 따라 가입 및 로그인 사용 사례를 다르게 처리합니다. 사용자가 이미 RP에 가입한 경우 브라우저에 '계속하려면 ...'이라는 공개 텍스트가 표시되지 않습니다.
providers 속성은 다음 속성이 있는 IdentityProvider 객체의 배열을 사용합니다.

Providers 속성

providers 속성은 다음 속성이 있는 IdentityProvider 객체의 배열을 사용합니다.

속성 설명
configURL(필수) IdP 구성 파일의 전체 경로입니다.
clientId(필수) IdP에서 발급한 RP의 클라이언트 식별자입니다.
loginHint(선택사항) 계정 엔드포인트에서 제공하는 login_hints 값 중 하나를 지정하면 FedCM 대화상자에 지정된 계정이 선택적으로 표시됩니다.
domainHint(선택사항) 계정 엔드포인트에서 제공하는 domain_hints 값 중 하나를 지정하면 FedCM 대화상자에 지정된 계정이 선택적으로 표시됩니다.
mode(선택사항) FedCM의 UI 모드를 지정하는 문자열입니다. 다음 값 중 하나일 수 있습니다.
  • "active": FedCM 프롬프트는 사용자 상호작용 (예: 버튼 클릭)에 의해 시작되어야 합니다.
  • "passive": 직접적인 사용자 상호작용 없이 FedCM 프롬프트가 시작됩니다.
활성 모드와 수동 모드의 차이점을 자세히 알아보려면 개요 페이지를 참고하세요.

참고: mode 매개변수는 Chrome 132부터 지원됩니다.
fields(선택사항) RP가 IdP에 공유하도록 요청하는 사용자 정보를 지정하는 문자열 배열입니다. 다음 필드는 선택적으로 지정할 수 있습니다.
  • "name"
  • "username"
  • "email"
  • "tel"
  • "picture"
참고: Fields API는 Chrome 132 이상에서 지원됩니다. "username" 및 "tel" 필드는 Chrome 141부터 지원됩니다.
params(선택사항) 추가 키-값 매개변수를 지정할 수 있는 맞춤 객체입니다.
  • scope: RP가 요청해야 하는 추가 권한이 포함된 문자열 값입니다(예: "drive.readonly calendar.readonly").
  • nonce: 이 특정 요청에 대한 응답이 발급되도록 하는 임의의 문자열입니다. 재전송 공격을 방지합니다.
  • 기타 맞춤 키-값 매개변수입니다.

참고: params는 Chrome 132부터 지원됩니다.

활성 모드

FedCM은 다양한 UX 모드 구성을 지원합니다. 수동 모드는 기본 모드이며 개발자가 구성할 필요가 없습니다.

활성 모드에서 FedCM을 사용하려면 다음 단계를 따르세요.

  1. 사용자 브라우저에서 기능 사용 가능 여부를 확인합니다.
  2. 버튼 클릭과 같은 일시적인 사용자 동작으로 API를 호출합니다.
  3. API 호출에 mode 매개변수를 전달합니다.
  let supportsFedCmMode = false;
  try {
    navigator.credentials.get({
      identity: Object.defineProperty(
        // Check if this Chrome version supports the Mode API.
        {}, 'mode', {
          get: function () { supportsFedCmMode = true; }
        }
      )
    });
  } catch(e) {}

  if (supportsFedCmMode) {
    // The button mode is supported. Call the API with mode property:
    return await navigator.credentials.get({
      identity: {
        providers: [{
          configURL: 'https://idp.example/config.json',
          clientId: '123',
        }],
        // The 'mode' value defines the UX mode of FedCM.
        // - 'active': Must be initiated by user interaction (e.g., clicking a button).
        // - 'passive': Can be initiated without direct user interaction.
        mode: 'active'
      }
    });
  }

이 데모를 통해 활성 모드를 사용해 보세요.

활성 모드의 맞춤 아이콘

활성 모드를 사용하면 IdP가 클라이언트 메타데이터 엔드포인트 응답에 RP의 공식 로고 아이콘을 직접 포함할 수 있습니다. RP는 브랜딩 데이터를 미리 제공해야 합니다.

교차 출처 iframe 내에서 FedCM 호출

상위 프레임에서 허용하는 경우 identity-credentials-get 권한 정책을 사용하여 교차 출처 iframe 내에서 FedCM을 호출할 수 있습니다. 이렇게 하려면 다음과 같이 iframe 태그에 allow="identity-credentials-get" 속성을 추가하세요.

  <iframe src="https://fedcm-cross-origin-iframe.glitch.me" allow="identity-credentials-get"></iframe>

예시에서 실제 작동을 확인할 수 있습니다.

선택적으로 상위 프레임에서 FedCM을 호출할 원본을 제한하려면 허용된 원본 목록과 함께 Permissions-Policy 헤더를 전송합니다.

  Permissions-Policy: identity-credentials-get=(self "https://fedcm-cross-origin-iframe.glitch.me")

권한 정책의 작동 방식에 대한 자세한 내용은 권한 정책으로 브라우저 기능 제어하기를 참고하세요.

Login Hint API

RP는 로그인 힌트를 사용하여 사용자가 로그인해야 하는 계정을 추천할 수 있습니다. 이는 이전에 사용한 계정을 잘 모르는 사용자를 재인증하는 데 유용합니다.

RP는 다음 코드 샘플과 같이 계정 목록 엔드포인트에서 가져온 login_hints 값 중 하나가 있는 loginHint 속성을 사용하여 navigator.credentials.get()를 호출하여 특정 계정을 선택적으로 표시할 수 있습니다.

  return await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: 'https://idp.example/manifest.json',
        clientId: '123',
        // Accounts endpoint can specify a 'login_hints' array for an account.
        // When RP specifies a 'exampleHint' value, only those accounts will be
        // shown to the user whose 'login_hints' array contains the 'exampleHint'
        // value
        loginHint : 'exampleHint'
      }]
    }
  });

loginHint와 일치하는 계정이 없으면 FedCM 대화상자에 로그인 메시지가 표시되어 사용자가 RP에서 요청한 힌트와 일치하는 IdP 계정에 로그인할 수 있습니다. 사용자가 프롬프트를 탭하면 구성 파일에 지정된 로그인 URL이 포함된 팝업 창이 열립니다. 그런 다음 링크에 로그인 힌트와 도메인 힌트 쿼리 매개변수가 추가됩니다.

Domain Hint API

RP는 특정 도메인과 연결된 계정만 선택적으로 표시할 수 있습니다. 이는 회사 도메인으로 제한된 RP에 유용할 수 있습니다.

특정 도메인 계정만 표시하려면 RP는 계정 목록 엔드포인트에서 가져온 domain_hints 값 중 하나가 있는 domainHint 속성을 사용하여 navigator.credentials.get()를 호출해야 합니다. 다음 코드 샘플을 참고하세요.

  return await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: 'https://idp.example/manifest.json',
        clientId: 'abc',
        // Accounts endpoint can specify a 'domain_hints' array for an account.
        // When RP specifies a '@domain.example' value, only those accounts will be
        // shown to the user whose 'domain_hints' array contains the
        // '@domain.example' value
        domainHint : '@domain.example'
      }]
    }
  });

domainHint와 일치하는 계정이 없으면 FedCM 대화상자에 로그인 메시지가 표시되어 사용자가 RP에서 요청한 힌트와 일치하는 IdP 계정에 로그인할 수 있습니다. 사용자가 프롬프트를 탭하면 구성 파일에 지정된 로그인 URL이 포함된 팝업 창이 열립니다. 그런 다음 링크에 로그인 힌트와 도메인 힌트 쿼리 매개변수가 추가됩니다.

도메인 힌트와 일치하는 계정이 없는 경우의 로그인 메시지 예
계정이 domainHint와 일치하지 않는 경우의 로그인 프롬프트 예시

자세한 내용은 데모를 참고하세요.

맞춤 매개변수

맞춤 매개변수 기능을 사용하면 RP가 ID 어설션 엔드포인트에 추가 키-값 매개변수를 제공할 수 있습니다. RP는 매개변수 API를 사용하여 기본 로그인 외에 리소스에 대한 권한을 요청하기 위해 IdP에 추가 매개변수를 전달할 수 있습니다. 다음과 같은 시나리오에서는 추가 매개변수를 전달하는 것이 유용할 수 있습니다.

  • RP는 청구서 수신 주소 또는 캘린더 액세스와 같이 IdP가 보유한 추가 권한을 동적으로 요청해야 합니다. 사용자는 계속하기 기능을 사용하여 실행되는 IdP 제어 UX 흐름을 통해 이러한 권한을 승인할 수 있으며, IdP는 이 정보를 공유합니다.

API를 사용하려면 RP가 navigator.credentials.get() 호출에서 객체로 params 속성에 매개변수를 추가합니다.

  let {token} = await navigator.credentials.get({
    identity: {
      providers: [{
        clientId: '1234',
        configURL: 'https://idp.example/fedcm.json',
        // Key/value pairs that need to be passed from the
        // RP to the IdP but that don't really play any role with
        // the browser.
        params: {
          IDP_SPECIFIC_PARAM: '1',
          foo: 'BAR'
        }
      },
    }
  });

브라우저가 이를 자동으로 단일 URL 인코딩된 JSON 직렬화 객체로 매개변수를 사용하여 IdP에 대한 POST 요청으로 변환합니다.

  // The assertion endpoint is drawn from the config file
  POST /fedcm_assertion_endpoint HTTP/1.1
  Host: idp.example
  Origin: https://rp.example/
  Content-Type: application/x-www-form-urlencoded
  Cookie: 0x23223
  Sec-Fetch-Dest: webidentity

  // params are translated into urlencoded version of `{"IDP_SPECIFIC_PARAM":"1","foo":"bar"}`
  account_id=123&client_id=client1234&params=%22%7B%5C%22IDP_SPECIFIC_PARAM%5C%22%3A1%2C%5C%22foo%5C%22%3A%5C%22BAR%5C%22%7D%22.

RP에 추가 권한이 필요한 경우 IdP는 리디렉션 링크를 제공할 수 있습니다. 예를 들어 node.js에서는 다음과 같습니다.

  if (rpRequestsPermissions) {
    // Response with a URL if the RP requests additional permissions
    return res.json({
      continue_on: '/example-redirect',
    });
  }

필드

RP는 IdP가 자신과 공유해야 하는 사용자 정보를 지정할 수 있습니다. 여기에는 이름, 이메일 주소, 사용자 이름, 전화번호, 프로필 사진의 조합이 포함될 수 있습니다. 요청된 정보는 FedCM 대화상자의 공개 UI에 포함됩니다.

가입하는 사용자에게는 사용자가 가입을 선택하면 idp.example에서 요청된 정보를 rp.example와 공유한다는 알림 메시지가 표시됩니다. 계정 엔드포인트의 응답에 RP가 요청한 필드가 포함되지 않으면 공개 텍스트에 이 필드가 포함되지 않습니다. IdP는 ID 어설션 엔드포인트에서 요청된 모든 필드를 학습하고 계속 진행하기 위해 추가 사용자 권한을 수집해야 하는지 결정합니다.

다음 공개 UI 텍스트가 포함된 FedCM 대화상자: &#39;계속하려면 fedcm-idp-demo.localhost에서 내 사용자 이름과 전화번호를 이 사이트와 공유해야 합니다.&#39;
공개 메시지: RP는 IdP에 사용자 이름과 전화번호만 공유하도록 요청합니다.

필드 기능을 사용하려면 RP가 navigator.credentials.get() 호출에 fields 배열을 추가해야 합니다. 필드에는 name, email, tel, username, picture과 같은 속성이 포함될 수 있습니다. 향후 더 많은 값을 포함하도록 확장될 수 있습니다. fields가 포함된 요청은 다음과 같습니다.

   let { token } = await navigator.credentials.get({
    identity: {
      providers: [{
        // RP requests the IdP to share only username and profile picture
        fields: [ 'username', 'picture'],
        clientId: '1234',
        configURL: 'https://idp.example/fedcm.json',
      },
    }
  });

브라우저는 이를 RP 지정 fields 매개변수가 포함된 ID 어설션 엔드포인트에 대한 HTTP 요청으로 자동 변환하며, 브라우저가 사용자에게 공개한 필드는 disclosure_shown_for 매개변수에 포함됩니다. 이전 버전과의 호환성을 위해 브라우저는 공개 텍스트가 표시되고 요청된 필드에 'name', 'email', 'picture' 세 필드가 모두 포함된 경우 disclosure_text_shown=true도 전송합니다. Chrome 141부터 disclosure_text_shown 값은 공개 텍스트가 사용자에게 실제로 표시되었는지 여부를 나타내지 않습니다.

  POST /id_assertion_endpoint HTTP/1.1
  Host: idp.example
  Origin: https://rp.example/
  Content-Type: application/x-www-form-urlencoded
  Cookie: 0x23223
  Sec-Fetch-Dest: webidentity

  // The RP only requested to share email and picture. The browser will send `disclosure_text_shown=false`, as the 'name' field value is missing
  account_id=123&client_id=client1234&disclosure_text_shown=false&fields=email,picture&disclosure_shown_for=email,picture

fields가 빈 배열이면 사용자 에이전트는 공개 UI를 건너뜁니다.

공개 UI 메시지를 표시하지 않는 FedCM 수동 모드 대화상자
수동 모드에서는 정보 공개 메시지가 표시되지 않습니다. 버튼 흐름에서는 공개 UI가 완전히 건너뜁니다.

계정 엔드포인트의 응답에 approved_clients의 RP와 일치하는 클라이언트 ID가 포함되지 않은 경우에도 마찬가지입니다.

이 경우 ID 어설션 엔드포인트로 전송된 disclosure_text_shown는 HTTP 본문에서 false입니다.

  POST /id_assertion_endpoint HTTP/1.1
  Host: idp.example
  Origin: https://rp.example/
  Content-Type: application/x-www-form-urlencoded
  Cookie: 0x23223
  Sec-Fetch-Dest: webidentity

  account_id=123&client_id=client1234&nonce=234234&disclosure_text_shown=false

오류 메시지 표시

클라이언트가 승인되지 않았거나 서버를 일시적으로 사용할 수 없는 경우와 같이 정당한 이유로 IdP가 토큰을 발급하지 못할 수 있습니다. IdP가 'error' 응답을 반환하면 RP가 이를 포착할 수 있고 Chrome은 IdP에서 제공한 오류 정보와 함께 브라우저 UI를 표시하여 사용자에게 알릴 수 있습니다.

사용자의 로그인 시도가 실패한 후 오류 메시지를 표시하는 FedCM 대화상자 문자열은 오류 유형과 연결됩니다.
사용자의 로그인 시도가 실패한 후 오류 메시지를 표시하는 FedCM 대화상자 문자열은 오류 유형과 연결됩니다.
  try {
    const cred = await navigator.credentials.get({
      identity: {
        providers: [
          {
            configURL: 'https://idp.example/manifest.json',
            clientId: '1234',
          },
        ],
      }
    });
  } catch (e) {
    const code = e.code;
    const url = e.url;
  }

초기 인증 후 사용자를 자동으로 다시 인증

FedCM 자동 재인증('자동 재인증'이라고도 함)을 사용하면 사용자가 자동으로 재인증할 수 있습니다. 사용자를 자동으로 다시 인증하려면 다음 조건을 충족해야 합니다.

  • 사용자가 이전에 FedCM을 사용하여 초기 인증을 수행했습니다. 여기서 '초기 인증'은 사용자가 동일한 브라우저 인스턴스에서 FedCM의 로그인 대화상자에서 '다음으로 계속' 버튼을 처음 탭하여 계정을 만들거나 RP의 웹사이트에 로그인하는 것을 의미합니다.
  • 사용자에게 하나의 복귀 계정만 있습니다. 여러 IdP에 대해 반환되는 계정이 있는 경우 사용자가 자동으로 다시 인증되지 않습니다.

명시적 사용자 환경은 사용자가 추적을 방지하기 위해 제휴 계정을 만들기 전에는 타당하지만 (FedCM의 주요 목표 중 하나임) 사용자가 한 번 거친 후에는 불필요하게 번거롭습니다. 사용자가 RP와 IdP 간의 통신을 허용하는 권한을 부여한 후에는 이전에 이미 확인한 사항에 대해 다른 명시적 사용자 확인을 강제하는 데 개인 정보 보호 또는 보안 이점이 없습니다.

자동 재인증을 사용하면 navigator.credentials.get() 호출 시 mediation에 지정한 옵션에 따라 브라우저의 동작이 변경됩니다.

  const cred = await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: 'https://idp.example/fedcm.json',
        clientId: '1234',
      }],
    },
    mediation: 'optional', // this is the default
  });

  // `isAutoSelected` is `true` if auto-reauthn was performed.
  const isAutoSelected = cred.isAutoSelected;

mediation는 인증 관리 API의 속성으로, PasswordCredential 및 FederatedCredential과 동일한 방식으로 작동하며 PublicKeyCredential에서도 부분적으로 지원됩니다. 이 속성은 다음 네 가지 값을 허용합니다.

  • 'optional'(기본값): 가능한 경우 자동 재인증, 불가능한 경우 미디에이션 필요 로그인 페이지에서 이 옵션을 선택하는 것이 좋습니다.
  • 'required': 계속하려면 항상 중재가 필요합니다(예: UI에서 '계속' 버튼 클릭). 사용자가 인증이 필요할 때마다 명시적으로 권한을 부여해야 하는 경우 이 옵션을 선택하세요.
  • 'silent': 가능한 경우 자동 재인증하고, 그렇지 않은 경우 미디에이션을 요구하지 않고 자동으로 실패합니다. 전용 로그인 페이지가 아니지만 사용자가 로그인 상태를 유지하도록 하려는 페이지(예: 배송 웹사이트의 상품 페이지 또는 뉴스 웹사이트의 기사 페이지)에서 이 옵션을 선택하는 것이 좋습니다.
  • 'conditional': WebAuthn에 사용되며 현재 FedCM에는 사용할 수 없습니다.

이 호출을 사용하면 다음과 같은 조건에서 자동 재인증이 발생합니다.

  • FedCM을 사용할 수 있습니다. 예를 들어 사용자가 설정에서 전역으로 또는 RP에 대해 FedCM을 사용 중지하지 않았습니다.
  • 사용자가 FedCM API가 있는 하나의 계정만 사용하여 이 브라우저에서 웹사이트에 로그인했습니다.
  • 사용자가 해당 계정으로 IdP에 로그인합니다.
  • 최근 10분 이내에 자동 재인증이 발생하지 않았습니다.
  • RP가 이전 로그인 후 navigator.credentials.preventSilentAccess()를 호출하지 않았습니다.

이러한 조건이 충족되면 FedCM navigator.credentials.get()가 호출되는 즉시 사용자를 자동으로 다시 인증하려는 시도가 시작됩니다.

mediation: optional인 경우 브라우저만 아는 이유로 자동 재인증이 사용 불가능할 수 있습니다. RP는 isAutoSelected 속성을 검사하여 자동 재인증이 실행되는지 확인할 수 있습니다.

이는 API 성능을 평가하고 그에 따라 UX를 개선하는 데 유용합니다. 또한 사용할 수 없는 경우 사용자에게 명시적 사용자 미디에이션(mediation: required가 있는 흐름)으로 로그인하라는 메시지가 표시될 수 있습니다.

FedCM을 통해 자동 재인증하는 사용자

preventSilentAccess()로 미디에이션 시행

사용자가 로그아웃한 직후에 자동으로 다시 인증하는 것은 사용자 환경에 좋지 않습니다. 이러한 동작을 방지하기 위해 FedCM에는 자동 재인증 후 10분의 무음 기간이 있습니다. 즉, 사용자가 10분 이내에 다시 로그인하지 않는 한 자동 재인증은 10분마다 최대 한 번 발생합니다. 사용자가 로그아웃 버튼을 클릭하는 등 명시적으로 RP에서 로그아웃할 때 RP는 navigator.credentials.preventSilentAccess()를 호출하여 브라우저에 자동 재인증을 사용 중지하도록 명시적으로 요청해야 합니다.

  function signout() {
    navigator.credentials.preventSilentAccess();
    location.href = '/signout';
  }

사용자는 설정에서 자동 재인증을 선택 해제할 수 있습니다.

사용자는 설정 메뉴에서 자동 재인증을 선택 해제할 수 있습니다.

  • 데스크톱 Chrome에서 chrome://password-manager/settings > 자동으로 로그인으로 이동합니다.
  • Android Chrome에서 설정 > 비밀번호 관리자를 열고 오른쪽 상단의 톱니바퀴를 탭한 다음 자동 로그인합니다.

사용자는 전환 버튼을 사용 중지하여 자동 재인증 동작을 모두 선택 해제할 수 있습니다. 이 설정은 사용자가 Chrome 인스턴스에서 Google 계정에 로그인하고 동기화가 사용 설정된 경우 기기 간에 저장되고 동기화됩니다.

RP에서 IdP 연결 해제

사용자가 이전에 FedCM을 통해 IdP를 사용하여 RP에 로그인한 경우 관계는 연결된 계정 목록으로 브라우저에 로컬로 저장됩니다. RP는 IdentityCredential.disconnect() 함수를 호출하여 연결을 해제할 수 있습니다. 이 함수는 최상위 RP 프레임에서 호출할 수 있습니다. RP는 IdP를 연결 해제하기 위해 configURL, IdP에서 사용하는 clientId, accountHint를 전달해야 합니다. 계정 힌트는 연결 해제 엔드포인트가 계정을 식별할 수 있는 한 임의의 문자열일 수 있습니다(예: 계정 목록 엔드포인트에서 제공한 계정 ID와 반드시 일치하지는 않는 이메일 주소 또는 사용자 ID).

  // Disconnect an IdP account 'account456' from the RP 'https://idp.com/'. This is invoked on the RP domain.
  IdentityCredential.disconnect({
    configURL: 'https://idp.com/config.json',
    clientId: 'rp123',
    accountHint: 'account456'
  });

IdentityCredential.disconnect()에서 Promise를 반환합니다. 이 약속은 다음과 같은 이유로 예외를 발생시킬 수 있습니다.

  • 사용자가 FedCM을 통해 IdP를 사용하여 RP에 로그인하지 않았습니다.
  • API가 FedCM 권한 정책 없이 iframe 내에서 호출됩니다.
  • configURL이 잘못되었거나 연결 해제 엔드포인트가 누락되었습니다.
  • 콘텐츠 보안 정책 (CSP) 확인이 실패합니다.
  • 대기 중인 연결 해제 요청이 있습니다.
  • 사용자가 브라우저 설정에서 FedCM을 사용 중지했습니다.

IdP의 연결 해제 엔드포인트가 응답을 반환하는 경우 RP와 IdP가 브라우저에서 연결 해제되고 프로미스가 해결됩니다. 연결 해제된 계정의 ID는 연결 해제 엔드포인트의 응답에 지정됩니다.

다음 단계

ID 공급업체 측에서 FedCM을 사용하여 ID 솔루션을 구현하는 방법을 검토하세요.
사용자와 개발자가 플랫폼과 사이트에서 FedCM 참여(선택 또는 선택 해제 포함)를 관리하는 방법을 알아보세요.