이 페이지는 Cloud Translation API를 통해 번역되었습니다.

FedCM 업데이트: IdP 로그인 상태 API, 로그인 힌트 등

Chrome 116에서는 Login Hint API, User Info API, RP Context API와 같은 FedCM 기능을 제공하며 IdP Sign-In Status API의 오리진 트라이얼이 시작됩니다.

Chrome 116에서 Chrome은 다음과 같은 세 가지 새로운 Federated Credential Management (FedCM) 기능을 제공합니다.

Login Hint API: 로그인할 기본 사용자 계정을 지정합니다.
User Info API: ID 공급업체 (IdP)가 iframe 내에서 맞춤설정된 로그인 버튼을 렌더링할 수 있도록 재사용자의 정보를 가져옵니다.
RP Context API: FedCM 대화상자에서 '로그인'과 다른 제목을 사용합니다.

또한 Chrome에서는 IdP Sign-In Status API의 오리진 체험판을 시작할 예정입니다. IdP Sign-in Status API는 요구사항이며 출시되면 브레이킹 체인지가 됩니다. 기존에 FedCM을 구현한 경우 오리진 트라이얼에 참여해야 합니다.

FedCM이 호출되면 지정된 ID 공급업체 (IdP)에서 로그인한 계정이 브라우저에 표시됩니다. IdP가 여러 계정을 지원하는 경우 로그인된 모든 계정이 나열됩니다

사용자가 로그인한 후 신뢰 당사자 (RP)가 사용자에게 재인증을 요청하는 경우가 있습니다. 하지만 사용자는 자신이 어떤 계정을 사용하고 있는지 잘 모를 수 있습니다. RP가 로그인할 계정을 지정할 수 있으면 사용자가 계정을 선택하기가 더 쉬워집니다. 로그인 힌트가 Chrome 116에 출시되므로 RP가 목록을 하나로 좁힐 수 있습니다.

이 확장 프로그램은 IdP에서 지원하는 모든 가능한 필터 유형과 함께 IdP의 계정 목록 엔드포인트 응답에 login_hints 배열을 추가합니다. 예를 들어 IdP가 이메일 및 ID를 사용한 필터링을 지원하는 경우 계정 응답은 다음과 같을 수 있습니다.

{
  "accounts": [{
    "id": "demo1",
    "email": "demo1@example.com",
    "name": "John Doe",
    "login_hints": ["demo1", "demo1@example.com"],
    ...
  }, {
    "id": "demo2",
    "email": "demo2@example.com",
    "name": "Jane Doe",
    "login_hints": ["demo2", "demo2@example.com"],
    ...
  }, ...]
}

계정 목록에 login_hints를 전달하면 RP는 다음 코드 샘플과 같이 loginHint 속성으로 navigator.credentials.get()를 호출하여 지정된 계정을 선택적으로 표시할 수 있습니다.

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "123",
      nonce: nonce,
      loginHint : "demo1@example.com"
    }]
  }
});

사용자 정보 API

사용자가 ID 제휴로 로그인할 수 있는 IdP 로고로 장식된 로그인 버튼이 이제 일반적으로 사용됩니다. 그러나 사용자의 프로필 아이콘과 사용자 정보를 사용하여 버튼을 장식하면 특히 사용자가 이전에 IdP를 사용하여 이 웹사이트에 가입한 경우 로그인이 훨씬 더 직관적입니다.

Google 계정으로 로그인 버튼입니다. — Google 계정으로 로그인 버튼

맞춤설정된 Google 계정으로 로그인 버튼입니다. — 맞춤설정된 Google 계정으로 로그인 버튼

문제는 맞춤설정된 버튼이 iframe 내 IdP 도메인에 있는 서드 파티 쿠키를 사용하여 로그인한 사용자를 식별하여 버튼을 렌더링하기 때문에 서드 파티 쿠키가 지원 중단되면 버튼을 사용할 수 없다는 것입니다.

Chrome 116에서 제공되는 User Info API는 IdP가 서드 파티 쿠키에 의존하지 않고 서버에서 재사용자의 정보를 가져올 수 있는 방법을 제공합니다.

API는 사용자 정보를 검색하고 RP 노출 영역의 일부인 것처럼 맞춤설정된 버튼을 렌더링할 수 있도록 RP 웹사이트에 삽입된 iframe 내에서 IdP에서 호출해야 합니다. 브라우저는 API 호출을 통해 계정 목록 엔드포인트에 요청을 보낸 후 다음과 같은 경우 사용자 정보 배열을 반환합니다.

사용자가 이전에 동일한 브라우저 인스턴스에서 FedCM을 통해 IdP를 사용하여 RP에 로그인했으며 데이터가 삭제되지 않았습니다.
사용자가 동일한 브라우저 인스턴스에서 IdP에 로그인했습니다.

// Iframe displaying a page from the https://idp.example origin
const user_info = await IdentityProvider.getUserInfo({
    configUrl: "https://idp.example/fedcm.json",
    clientId: "client1234"
});

// IdentityProvider.getUserInfo returns an array of user information.
if (user_info.length > 0) {
  // Chrome puts returning accounts first, so the first account received is guaranteed to be a returning account.
  const name = user_info[0].name;
  const given_name = user_info[0].given_name;
  const display_name = given_name ? given_name : name;
  const picture = user_info[0].picture;
  const email = user_info[0].email;
  // Renders the personalized sign-in button with the information above.
}

IdP와 동일한 출처인 iframe 내에서 IdentityProvider.getUserInfo() 호출을 허용하려면 삽입 HTML이 identity-credentials-get 권한 정책을 사용하여 이를 명시적으로 허용해야 합니다.

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

https://fedcm-rp-demo.glitch.me/button에서 실제 동작을 확인할 수 있습니다.

RP 컨텍스트 API

Chrome 116에 제공되는 RP Context API를 사용하면 RP가 FedCM 대화상자 UI에서 문자열을 수정하여 사전 정의된 인증 컨텍스트를 수용할 수 있습니다. 다양한 옵션은 다음 스크린샷을 참고하세요.

FedCM 대화상자 렌더링: — '****에 로그인'으로 렌더링된 FedCM 대화상자. RP 컨텍스트가 지정되지 않은 경우 기본 옵션입니다.

사용법은 간단합니다. identity.context 속성에 "signin"(기본값), "signup", "use", "continue" 중 하나를 제공합니다.

const credential = await navigator.credentials.get({
  identity: {
    // "signin" is the default, "signup", "use" and "continue" 
    // can also be used
    context: "signup", 
    providers: [{
      configURL: "https://idp.example/fedcm.json",
      clientId: "1234",
    }],
  }
});

Chrome에서는 Chrome 116부터 데스크톱의 IdP Sign-In Status API 오리진 트라이얼을 Chrome 116부터 시작하며 이후 Android Chrome도 지원합니다. 오리진 트라이얼을 통해 신규 또는 실험용 기능에 액세스하여 모든 사용자에게 기능이 제공되기 전에 사용자가 제한된 기간 동안 사용해 볼 수 있는 기능을 빌드할 수 있습니다.

IdP Sign-In Status API는 IdP에서 사용자의 IdP에서의 사용자 로그인 상태를 브라우저에 알리는 메커니즘입니다. 이 API를 사용하면 브라우저에서 IdP에 대한 불필요한 요청을 줄이고 잠재적인 타이밍 공격을 완화할 수 있습니다.

참고: FedCM은 계정 목록 엔드포인트에 인증된 요청을 도입합니다. 이 요청은 요청자를 식별하는 데이터를 전송하지 않으며 RP에서 제공한 데이터 전달을 허용하지도 않습니다. 그러나 브라우저가 RP 정보가 포함된 사용자 인증 정보가 없는 요청을 client_metadata_endpoint에 별도로 실행한 다음, IdP 서버는 타이밍 또는 기타 디지털 지문 데이터를 사용하여 사용자 인증 정보가 없는 요청을 사용자 인증 정보가 확인된 요청과 (확률적으로) 연결할 수 있습니다. 자세한 내용은 이 슬라이드를 참고하세요.

브라우저에 사용자의 로그인 상태 알림

IdP는 사용자가 IdP에 로그인했을 때 또는 사용자가 모든 IdP 계정에서 로그아웃했을 때 HTTP 헤더를 전송하거나 JavaScript API를 호출하여 사용자의 로그인 상태를 브라우저에 알릴 수 있습니다. 브라우저는 상태를 '로그인', '로그아웃' 또는 '알 수 없음' (기본값) 중 하나로 기록합니다.

사용자가 로그인되었음을 알리려면 최상위 탐색 또는 동일 출처 하위 리소스 요청에서 IdP-SignIn-Status: action=signin HTTP 헤더를 전송합니다.

IdP-SignIn-Status: action=signin

또는 IdP 출처에서 JavaScript API IdentityProvider.login()를 호출합니다.

IdentityProvider.login()

그러면 사용자의 로그인 상태가 '로그인'으로 기록됩니다. 사용자의 로그인 상태가 '로그인'으로 설정되면 FedCM을 호출하는 PR이 IdP의 계정 목록 엔드포인트에 요청을 보내고 사용 가능한 계정을 FedCM 대화상자에서 사용자에게 표시합니다.

사용자가 모든 계정에서 로그아웃되었음을 알리려면 최상위 탐색 또는 동일 출처 하위 리소스 요청에서 IdP-SignIn-Status: action=signout-all HTTP 헤더를 전송합니다.

IdP-SignIn-Status: action=signout-all

또는 IdP 출처에서 JavaScript API IdentityProvider.logout()를 호출합니다.

IdentityProvider.logout()

그러면 사용자의 로그인 상태가 '로그아웃'으로 기록됩니다. 사용자의 로그인 상태가 '로그아웃'인 경우 FedCM 호출은 IdP의 계정 목록 엔드포인트에 대한 요청 없이 자동으로 실패합니다.

기본적으로 IdP 로그인 상태는 '알 수 없음'으로 설정됩니다. 이 상태는 IdP가 IdP Sign-In Status API를 사용하여 신호를 보내기 전에 사용됩니다. Google이 이 API를 제공할 때 사용자가 이미 IdP에 로그인했을 수 있고 FedCM이 처음 호출될 때까지 IdP가 브라우저에 이를 알리지 못할 수 있으므로 전환을 개선하기 위해 이 상태를 도입합니다. 이 경우 IdP의 계정 목록 엔드포인트에 요청을 전송하고 계정 목록 엔드포인트의 응답에 따라 상태를 업데이트합니다.

엔드포인트에서 활성 계정 목록을 반환하면 상태를 '로그인'으로 업데이트하고 FedCM 대화상자를 열어 해당 계정을 표시합니다.
엔드포인트에서 계정을 반환하지 않는 경우 상태를 '로그아웃'으로 업데이트하고 FedCM 통화에 실패합니다.

사용자 세션이 만료되면 어떻게 되나요? 사용자가 동적 로그인 흐름을 통해 로그인하도록 허용

IdP가 계속해서 브라우저에 사용자의 로그인 상태를 알리지만 세션이 만료될 때와 같이 동기화되지 않은 상태일 수 있습니다. 로그인 상태가 '로그인'일 때 브라우저는 사용자 인증 정보가 있는 요청을 계정 목록 엔드포인트로 전송하려고 시도하지만 세션을 더 이상 사용할 수 없으므로 서버에서 거부합니다. 이러한 시나리오에서는 브라우저가 팝업 창을 통해 사용자가 IdP에 로그인하도록 동적으로 허용할 수 있습니다.

FedCM 대화상자에 다음 이미지와 같은 메시지가 표시됩니다.

IdP에 로그인하도록 제안하는 FedCM 대화상자 — IdP 로그인을 제안하는 FedCM 대화상자

Continue 버튼을 클릭하면 브라우저에서 IdP의 로그인 페이지로 사용자를 안내하는 팝업 창이 열립니다.

로그인 페이지 URL (IdP의 출처여야 함)은 IdP 구성 파일의 일부로 signin_url를 사용하여 지정할 수 있습니다.

{
  "accounts_endpoint": "/auth/accounts",
  "client_metadata_endpoint": "/auth/metadata",
  "id_assertion_endpoint": "/auth/idtokens",
  "signin_url": "/signin"
  }
}

팝업 창은 퍼스트 파티 쿠키를 사용하는 일반 브라우저 창입니다. 콘텐츠 기간 내에서 발생하는 모든 작업은 IdP에서 결정하지만 RP 페이지에 교차 출처 통신 요청을 하는 데 사용할 수 있는 창 핸들이 없습니다. 사용자가 로그인한 후 IdP는 다음을 수행해야 합니다.

IdP-SignIn-Status: action=signin 헤더를 전송하거나 IdentityProvider.login() API를 호출하여 사용자가 로그인되었음을 브라우저에 알립니다.
IdentityProvider.close()를 호출하여 자신을 닫습니다 (팝업 창).

// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
  // Signal to the browser that the user has signed in.
  IdentityProvider.close();
}

사용자가 FedCM을 사용하여 IdP에 로그인한 후 RP에 로그인함

참고: 이 동적 로그인 환경은 명시적인 로그아웃 없이 IdP 세션이 만료되어 브라우저의 로그인 상태가 실제 상태와 충돌하는 경우에 사용하기 위한 것입니다. 아직 IdP에 로그인하지 않은 사용자의 경우 트리거되지 않습니다. 이 새로운 흐름은 브라우저에서 사용자의 IdP 로그인 상태가 '로그인'이지만 IdP의 계정 목록 엔드포인트에서 계정을 반환하지 않는 경우를 처리하기 위해 설계되었습니다.

IdP Sign-In Status API가 즉시 호출된다고 가정하면 FedCM이 호출될 때 다음과 같은 상황이 발생할 수 있습니다.

브라우저가 사용자의 로그인 상태 ('알 수 없음')를 모르면 계정 목록 엔드포인트의 IdP 응답에 따라 상태가 업데이트됩니다('로그인' 또는 '로그아웃'). 동적 로그인 흐름이 트리거되지 않습니다.
사용자가 브라우저에서 IdP에 로그인 ('로그인')한 다음 IdP에서 명시적으로 로그아웃 ('로그아웃')한 경우 동적 로그인 흐름이 트리거되지 않습니다.
사용자가 브라우저에서 IdP에 로그인 ('로그인')했지만 명시적인 로그아웃 없이 세션이 만료되면 동적 로그인 흐름이 트리거됩니다.

IdP Sign-In Status API는 RP가 IdP에 로그인하지 않은 사용자에게 'IdP에 로그인' 대화상자를 표시하는 기능을 제공하지 않습니다. 이는 별도의 기능으로 향후 추가될 수 있습니다.

데모에서 IdP 로그인 상태 API 동작을 사용해 볼 수 있습니다. 이 세션은 데모 IdP에 로그인한 후 3분 후에 만료됩니다. 그러면 팝업 창 동작을 통해 IdP에 로그인하는 과정을 관찰할 수 있습니다.

오리진 트라이얼 참여

Chrome 116 이상에서 Chrome
플래그 chrome://flags#fedcm-idp-signin-status-api를 사용 설정하여
IdP Sign-In Status API를 로컬에서 사용해 볼 수 있습니다.

오리진 트라이얼을 두 번 등록하여 IdP Sign-In Status API를 사용 설정할 수도 있습니다.

IdP의 오리진 트라이얼을 등록합니다.
RP에 서드 파티 오리진 트라이얼을 등록합니다.

오리진 트라이얼을 통해 새로운 기능을 사용해 보고 웹 표준 커뮤니티에서의 사용성, 실용성, 효과에 관한 의견을 제공할 수 있습니다. 자세한 내용은 웹 개발자를 위한 오리진 트라이얼 가이드를 참고하세요.

IdP Sign-In Status API 오리진 트라이얼은 Chrome 116~Chrome 119에서 사용할 수 있습니다.

IdP의 오리진 트라이얼 등록

오리진 트라이얼 등록 페이지로 이동합니다.
등록 버튼을 클릭하고 양식을 작성하여 토큰을 요청합니다.
IdP의 출처를 Web Origin으로 입력합니다.
제출을 클릭합니다.
IdentityProvider.close()를 사용하는 페이지 헤드에 origin-trial <meta> 태그를 추가합니다. 예를 들어 다음과 같이 표시될 수 있습니다.
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">

경고: 이 API에서는 Origin-Trial HTTP 헤더를 전송할 수 없습니다.

RP에 서드 파티 오리진 트라이얼 등록

오리진 트라이얼 등록 페이지로 이동합니다.
등록 버튼을 클릭하고 양식을 작성하여 토큰을 요청합니다.
IdP의 출처를 Web Origin으로 입력합니다.
타사 일치를 선택하여 다른 출처에 JavaScript를 사용하여 토큰을 삽입합니다.
제출을 클릭합니다.
발급된 토큰을 서드 파티 웹사이트에 삽입합니다.

서드 파티 웹사이트에 토큰을 삽입하려면 IdP의 출처에서 제공되는 JavaScript 라이브러리 또는 SDK에 다음 코드를 추가합니다.

const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);

TOKEN_GOES_HERE를 자체 토큰으로 바꿉니다.

참여 및 의견 공유

의견이 있거나 테스트 중에 문제가 발생하면 crbug.com에서 공유할 수 있습니다.

사진: 댄 크리스티안 파두레치(Unsplash 제공)