FedCM 업데이트: Domain Hint API

Chrome 123부터 Federated Credential Management API (FedCM)와 함께 도메인 힌트를 사용할 수 있습니다. Domain Hint API를 사용하면 개발자는 수락하는 도메인의 제휴 로그인 계정만 표시하여 더 나은 사용자 환경을 제공할 수 있습니다.

도메인 힌트 API

FedCM을 사용하면 사용자가 ID 공급업체 (IdP)에서 제공하는 계정 정보를 사용하여 신뢰 당사자 (RP, 웹사이트 참조)에 더 쉽게 로그인할 수 있습니다. 하지만 RP가 특정 도메인에 연결된 계정만 사이트에 로그인할 수 있다는 것을 이미 알고 있는 경우도 있습니다. 이는 액세스하는 사이트가 회사 도메인으로 제한된 기업 시나리오에서 특히 일반적입니다. 더 나은 사용자 환경을 제공하기 위해 FedCM API는 RP가 RP에 로그인하는 데 사용할 수 있는 계정만 표시하도록 허용합니다. 이렇게 하면 사용자가 회사 도메인 외부의 계정을 사용하여 RP에 로그인하려고 할 때 올바른 유형의 계정이 사용되지 않아 나중에 오류 메시지가 표시되거나 로그인이 작동하지 않는 시나리오가 방지됩니다.

Domain Hint API를 사용하면 RP는 FedCM API 호출에서 domainHint 속성을 지정하여 사용자와 일치하는 계정만 표시할 수 있습니다. IdP는 계정 목록 엔드포인트의 응답의 일부로 domain_hints 속성을 제공하여 계정이 연결된 도메인을 나타낼 수 있습니다. 이렇게 하면 브라우저에서 요청된 도메인 힌트를 IdP에 공개하지 않고도 일치하는 계정을 표시할 수 있습니다.

계정 목록 엔드포인트의 JSON 응답 예시는 다음과 같습니다.

{
 "accounts": [{
   "id": "1234",
   "given_name": "John",
   "name": "John Doe",
   "email": "john_doe@idp.example",
   "picture": "https://idp.example/profile/123",
   "approved_clients": ["123", "456", "789"],
  }, {
   "id": "5678",
   "given_name": "Johnny",
   "name": "Johnny",
   "email": "johnny@idp.example",
   "picture": "https://idp.example/profile/456"
   "approved_clients": ["abc", "def", "ghi"],
   "domain_hints": ["corp.example"]
  }]
}

RP는 domainHint 속성과 함께 navigator.credentials.get()를 호출하여 계정을 필터링할 수 있습니다. 예를 들어 사용자가 corp-partner.example를 방문하여 corp.example의 계정으로 로그인한다고 가정해 보겠습니다. 사이트는 다음과 같이 API를 호출합니다.

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "abc",
      nonce: nonce,
      domainHint : "corp.example"
    }]
  }
});

domainHint 값은 서버 측 필터링을 위해 계정 목록 엔드포인트로 전송되지 않습니다. 이는 IdP에 대한 디지털 지문 수집 벡터가 될 수 있기 때문입니다. 대신 Chrome은 평소와 같이 FedCM 요청을 실행하고 navigator.credentials.get() 호출에서 지정된 domainHint 값과 일치하지 않는 계정을 필터링합니다. 그런 다음 Chrome은 새 계정 목록이 있는 사용자에게 FedCM 대화상자를 표시합니다. 이 접근 방식은 Login Hint API와 비슷하지만 이 두 API는 서로 다른 질문에 답합니다. Login Hint API는 '내가 원하는 사용자의 식별자는 무엇인가?'를 묻고, 도메인 힌트는 '이 계정이 어떤 기업 또는 서버에 속해야 하는가?'에 답하는 것을 목표로 합니다.

domainHint: "any"가 사용되면 Chrome은 도메인이 없는 계정을 필터링합니다 (즉, domain_hints가 전달되지 않았거나 비어 있음). 예를 들어 RP가 가입 프로세스에서 관리 계정만 허용하는 사용 사례가 허용됩니다.

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

domainHint와 일치하는 계정이 없을 때 표시되는 로그인 프롬프트의 예
domainHint와 일치하는 계정이 없을 때 표시되는 로그인 메시지 예시