Federated Credential Management API 개발자 가이드

개인 정보를 보호하는 ID 제휴에 FedCM을 사용하는 방법을 알아봅니다.

FedCM (Federated Credential Management)은 개인 정보를 보호합니다. '... 계정으로 로그인' 등 제휴 ID 서비스에 대한 접근 방식 사용자는 자신의 개인 정보를 Google 계정에 공유하지 않고도 사용자를 식별할 수 있습니다.

FedCM 사용 사례, 사용자 플로우, API 로드맵에 대한 자세한 내용은 FedCM API 소개를 참조하세요.

FedCM 개발 환경

Chrome의 IdP 및 RP 모두에 보안 컨텍스트 (HTTPS 또는 localhost)가 필요합니다. FedCM을 사용하세요

Android의 Chrome에서 코드 디버그

서버를 로컬에서 설정하고 실행하여 FedCM 코드를 디버그합니다. 다음과 같은 작업을 할 수 있습니다. 이 서버에 액세스 포트가 있는 USB 케이블로 연결된 Android 기기의 Chrome 있습니다.

다음 단계에 따라 데스크톱에서 DevTools를 사용하여 Android에서 Chrome을 디버그할 수 있습니다. 원격 디버그 Android 기기를 참고하세요.

Chrome에서 서드 파티 쿠키 차단하기

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

</ph>

출시 전에 Chrome에서 서드 파티 쿠키 없이 FedCM이 작동하는 방식을 테스트할 수 있습니다 실제로 시행됩니다

서드 파티 쿠키를 차단하려면 시크릿 모드를 사용하세요. 모드를 선택하거나 '차단'을 서드 파티 쿠키' 데스크톱 설정의 chrome://settings/cookies 또는 에서 모바일에서 설정 > 사이트 설정 > 쿠키.

FedCM API 사용

잘 알려진 파일을 만들어 FedCM과 통합합니다. 계정용 구성 파일 및 엔드포인트 목록, 어설션 발급 및 원하는 경우 클라이언트 메타데이터를 사용할 수 있습니다.

여기에서 FedCM은 RP가 서명을 위해 사용할 수 있는 JavaScript API를 노출합니다. 로그인합니다.

잘 알려진 파일 만들기

추적 도구가 API를 사용하는 경우 잘 알려진 파일은 의 /.well-known/web-identity에서 제공 eTLD+1 IdP

예를 들어 IdP 엔드포인트가 https://accounts.idp.example/)는 다음 위치에 잘 알려진 파일을 제공해야 합니다. https://idp.example/.well-known/web-identity 및 IdP 구성 파일을 참고하세요. 다음은 잘 알려진 파일 콘텐츠의 예입니다.

{
  "provider_urls": ["https://accounts.idp.example/config.json"]
}

JSON 파일에는 IdP 배열과 함께 provider_urls 속성이 포함되어야 합니다. config 파일 URL을 RP에 의한 navigator.credentials.get의 configURL. 개수 배열의 URL 문자열은 1개로 제한되지만 의견을 보내 주세요.

IdP 구성 파일 및 엔드포인트 만들기

IdP 구성 파일은 브라우저에 필요한 엔드포인트 목록을 제공합니다. IdPs 에서 이 구성 파일과 필수 엔드포인트 및 URL을 호스팅합니다. 모든 JSON 응답은 application/json 콘텐츠 유형으로 제공되어야 합니다.

구성 파일의 URL은 RP에서 navigator.credentials.get 호출이 실행되었습니다.

const credential = await navigator.credentials.get({
  identity: {
    context: 'signup',
    providers: [{
      configURL: 'https://accounts.idp.example/config.json',
      clientId: '********',
      nonce: '******'
    }]
  }
});
const { token } = credential;

IdP 구성 파일 위치의 전체 URL을 configURL로 지정합니다. 날짜 브라우저인 RP에서 navigator.credentials.get()가 호출됩니다. Origin 헤더나GET Referer 헤더 요청에 쿠키가 없고 리디렉션을 따르지 않습니다. 이렇게 하면 IdP가 누가 요청을 했고 어떤 요청을 했는지 알 수 없습니다. RP에서 연결을 시도 중입니다. 예를 들면 다음과 같습니다.

GET /config.json HTTP/1.1
Host: accounts.idp.example
Accept: application/json
Sec-Fetch-Dest: webidentity

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

브라우저에 다음을 포함한 IdP의 JSON 응답이 필요합니다. 속성:

속성	설명
accounts_endpoint(필수)	계정 엔드포인트의 URL입니다.
client_metadata_endpoint(선택사항)	클라이언트 메타데이터 엔드포인트의 URL입니다.
id_assertion_endpoint(필수)	ID 어설션 엔드포인트의 URL입니다.
disconnect(선택사항)	연결 해제 엔드포인트의 URL입니다.
login_url(필수)	사용자가 IdP에 로그인할 때 사용하는 로그인 페이지 URL입니다.
branding(선택사항)	다양한 브랜드 옵션을 포함하는 객체입니다.
branding.background_color(선택사항)	'다음으로 계속'의 배경 색상을 설정하는 브랜드 옵션 버튼을 클릭합니다. 관련 CSS 문법, 즉 hex-color님, hsl(), rgb() 또는 named-color.
branding.color(선택사항)	'다음으로 계속'의 텍스트 색상을 설정하는 브랜드 옵션 버튼을 클릭합니다. 관련 CSS 문법, 즉 hex-color님, hsl(), rgb() 또는 named-color.
branding.icons(선택사항)	아이콘 객체를 설정하는 브랜딩 옵션으로, 로그인 대화상자에 표시됩니다. icon 객체는 두 개의 매개변수가 있는 배열입니다. <ph type="x-smartling-placeholder"> </ph> url (필수): 아이콘 이미지의 URL입니다. SVG 이미지는 지원되지 않습니다. size (선택사항): 애플리케이션에서 정사각형 및 단일 해상도라고 가정하는 아이콘 크기입니다. 이 숫자는 25 이상이어야 합니다.

RP는 identity.context 값을 통해 FedCM 대화상자 UI의 문자열을 수정할 수 있음 navigator.credentials.get()에서 사전 정의된 인증을 수용하도록 있습니다. 선택적 속성은 "signin" (기본값), "signup" "use" 또는 "continue"입니다.

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

</ph>

다음은 IdP의 응답 본문의 예입니다.

{
  "accounts_endpoint": "/accounts.php",
  "client_metadata_endpoint": "/client_metadata.php",
  "id_assertion_endpoint": "/assertion.php",
  "disconnect_endpoint": "/disconnect.php",
  "login_url": "/login",
  "branding": {
    "background_color": "green",
    "color": "#FFEEAA",
    "icons": [{
      "url": "https://idp.example/icon.ico",
      "size": 25
    }]
  }
}

브라우저가 구성 파일을 가져오면 후속 요청을 IdP 엔드포인트:

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

</ph>

계정 엔드포인트

IdP의 계정 엔드포인트는 사용자가 확인할 수 있습니다 IdP에서 여러 계정을 지원하는 경우 엔드포인트는 로그인된 모든 계정을 반환합니다.

브라우저가 SameSite=None를 사용하여 쿠키를 포함하는 GET 요청을 보내지만 client_id 매개변수, Origin 헤더 또는 Referer 헤더 이 IdP가 사용자가 서명하려는 RP를 학습하지 못하도록 효과적으로 방지합니다. 하세요. 예를 들면 다음과 같습니다.

GET /accounts.php HTTP/1.1
Host: accounts.idp.example
Accept: application/json
Cookie: 0x23223
Sec-Fetch-Dest: webidentity

요청을 수신하면 서버는 다음을 실행해야 합니다.

1. 요청에 Sec-Fetch-Dest: webidentity HTTP 헤더가 포함되어 있는지 확인합니다.
2. 세션 쿠키를 이미 로그인한 계정의 ID와 일치시킵니다.
3. 계정 목록을 포함하여 응답합니다.

브라우저에 accounts 속성이 포함된 JSON 응답이 필요합니다. 다음 속성이 포함된 계정 정보의 배열로 구성됩니다.

속성	설명
id(필수)	사용자의 고유 ID입니다.
name(필수)	사용자의 성과 성
email(필수)	사용자의 이메일 주소입니다.
given_name(선택사항)	사용자의 이름입니다.
picture(선택사항)	사용자 아바타 이미지의 URL입니다.
approved_clients(선택사항)	사용자가 등록한 RP 클라이언트 ID의 배열입니다.
login_hints(선택사항)	IdP에서 지정할 수 있는 모든 가능한 필터 유형의 배열입니다. 계정을 만들 수 있습니다. RP는 navigator.credentials.get()를 호출할 수 있습니다. loginHint 속성으로 다음을 실행합니다. 지정된 계정을 선택적으로 표시합니다.
domain_hints(선택사항)	계정이 연결된 모든 도메인의 배열입니다. RP는 navigator.credentials.get()에 전화 걸기 domainHint 속성을 사용하여 있습니다.

응답 본문 예시:

{
  "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"],
    "login_hints": ["demo1", "demo1@idp.example"]
  }, {
    "id": "5678",
    "given_name": "Johnny",
    "name": "Johnny",
    "email": "johnny@idp.example",
    "picture": "https://idp.example/profile/456",
    "approved_clients": ["abc", "def", "ghi"],
    "login_hints": ["demo2", "demo2@idp.example"],
    "domain_hints": ["corp.example"]
  }]
}

사용자가 로그인 상태가 아니라면 HTTP 401 (승인되지 않음)로 응답합니다.

반환된 계정 목록은 브라우저에서 사용되므로 있습니다.

클라이언트 메타데이터 엔드포인트

IdP의 클라이언트 메타데이터 엔드포인트는 RP의 개인정보처리방침 및 서비스 약관을 준수해야 합니다. RP는 개인정보처리방침 및 서비스 약관을 미리 IdP에 제공합니다. 이러한 링크는 사용자가 RP에 등록하지 않은 경우 확인해야 합니다

브라우저는 GET 요청을 client_id 쿠키가 없는 navigator.credentials.get. 예를 들면 다음과 같습니다.

GET /client_metadata.php?client_id=1234 HTTP/1.1
Host: accounts.idp.example
Origin: https://rp.example/
Accept: application/json
Sec-Fetch-Dest: webidentity

요청을 수신하면 서버는 다음을 실행해야 합니다.

1. client_id의 RP를 결정합니다.
2. 클라이언트 메타데이터로 응답합니다.

클라이언트 메타데이터 엔드포인트의 속성은 다음과 같습니다.

속성	설명
privacy_policy_url(선택사항)	RP 개인정보처리방침 URL입니다.
terms_of_service_url(선택사항)	RP 서비스 약관 URL입니다.

브라우저에서 엔드포인트로부터 JSON 응답을 예상합니다.

{
  "privacy_policy_url": "https://rp.example/privacy_policy.html",
  "terms_of_service_url": "https://rp.example/terms_of_service.html",
}

반환된 클라이언트 메타데이터는 브라우저에서 사용되며 사용할 수 있습니다

ID 어설션 엔드포인트

IdP의 ID 어설션 엔드포인트는 로그인한 사용자의 어설션을 반환합니다. 사용자가 navigator.credentials.get()을(를) 사용하여 RP 웹사이트에 로그인하는 경우 호출이되면 브라우저가 POST 쿠키와 함께 SameSite=None 및 콘텐츠 유형 application/x-www-form-urlencoded 이 엔드포인트에 다음 정보를 포함합니다

속성	설명
client_id(필수)	RP의 클라이언트 식별자입니다.
account_id(필수)	로그인하는 사용자의 고유 ID입니다.
nonce(선택사항)	RP에서 제공하는 요청 nonce입니다.
disclosure_text_shown	그 결과 부울이 아닌 "true" 또는 "false"의 문자열이 반환됩니다. 공개 문구가 표시되지 않은 경우 결과는 "false"입니다. 이는 RP의 클라이언트 ID가 계정 엔드포인트 응답의 approved_clients 속성 목록에 포함되었거나 이전에 브라우저에서 approved_clients 없이 가입 순간을 감지한 경우 발생합니다.
is_auto_selected	RP에서 자동 재인증이 수행되면 is_auto_selected는 "true"를 나타냅니다. 그렇지 않은 경우 "false"입니다. 이는 더 많은 보안 관련 기능을 지원하는 데 유용합니다. 예를 들어 일부 사용자는 인증 시 명시적인 사용자 중재가 필요한 더 높은 보안 등급을 선호할 수 있습니다. IdP에서 이러한 중재 없이 토큰 요청을 받으면 요청을 다르게 처리할 수 있습니다. 예를 들어 RP가 mediation: required를 사용하여 FedCM API를 다시 호출할 수 있도록 오류 코드를 반환합니다.

HTTP 헤더 예:

POST /assertion.php HTTP/1.1
Host: accounts.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=Ct60bD&disclosure_text_shown=true&is_auto_selected=true

요청을 수신하면 서버는 다음을 실행해야 합니다.

1. CORS (Cross-Origin Resource)로 요청에 응답 공유)를 선택합니다.
2. 요청에 Sec-Fetch-Dest: webidentity HTTP 헤더가 포함되어 있는지 확인합니다.
3. Origin 헤더를 client_id에서 결정한 RP 출처와 일치시킵니다. 일치하지 않으면 거부합니다.
4. account_id를 이미 로그인한 계정의 ID와 일치시킵니다. 거부 조건 일치하지 않습니다.
5. 토큰으로 응답합니다. 요청이 거부되면 오류로 응답합니다. 응답을 참조하세요.

를 통해 개인정보처리방침을 정의할 수 있습니다.

토큰이 발급되는 방식은 IdP에 따라 다르지만 일반적으로 계정 ID, 클라이언트 ID, 발급기관 출처, nonce 등의 정보를 생성하여 RP가 토큰이 진짜인지 확인할 수 있습니다.

브라우저에 다음 속성이 포함된 JSON 응답이 필요합니다.

속성	설명
token(필수)	토큰은 인증에 대한 클레임이 포함된 문자열입니다.

{
  "token": "***********"
}

반환된 토큰은 브라우저에서 RP로 전달되므로 인증의 유효성을 검사합니다.

오류 응답 반환

id_assertion_endpoint도 '오류'를 반환할 수 있습니다. 두 개의 선택적 필드가 있는 응답입니다.

• code: IdP는 OAuth 2.0의 알려진 오류 중 하나를 선택할 수 있습니다. 지정된 오류 목록 (invalid_request, unauthorized_client, access_denied, server_error 및 temporarily_unavailable) 또는 임의의 문자열을 사용합니다. 후자의 경우 Chrome은 일반 오류 메시지로 오류 UI를 렌더링하고 코드를 RP에 전달합니다.
• url: 다음에 관한 정보가 포함된 사람이 읽을 수 있는 웹페이지를 식별합니다. 오류에 대한 추가 정보를 사용자에게 제공합니다. 이 입력란 브라우저는 리치 미디어 형식으로 다양한 오류 메시지를 네이티브 UI를 제공합니다. 예: 다음 단계 링크, 고객 서비스 연락처 확인할 수 있습니다. 사용자가 오류 세부정보에 관해 자세히 알고 싶어 하는 경우 브라우저 UI에서 제공된 페이지를 방문하여 확인하세요. URL은 IdP configURL과 동일한 사이트에 있어야 합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

// id_assertion_endpoint response
{
  "error" : {
     "code": "access_denied",
     "url" : "https://idp.example/error?type=access_denied"
  }
}

엔드포인트 연결 해제

IdentityCredential.disconnect()를 호출하면 브라우저에서 SameSite=None 및 콘텐츠 유형이 포함된 쿠키가 포함된 POST 요청 이 연결 해제 엔드포인트에 application/x-www-form-urlencoded를 다음 정보를 참조하세요.

속성	설명
account_hint	IdP 계정에 대한 힌트
client_id	RP의 클라이언트 식별자입니다.

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

account_hint=account456&client_id=rp123

요청을 수신하면 서버는 다음을 실행해야 합니다.

1. CORS (Cross-Origin Resource)로 요청에 응답 공유)를 선택합니다.
2. 요청에 Sec-Fetch-Dest: webidentity HTTP 헤더가 포함되어 있는지 확인합니다.
3. Origin 헤더를 client_id에서 결정한 RP 출처와 일치시킵니다. 일치하지 않으면 거부합니다.
4. account_hint를 이미 로그인한 계정의 ID와 일치시킵니다.
5. RP에서 사용자 계정의 연결을 해제합니다.
6. JSON 형식으로 식별된 사용자 계정 정보로 브라우저에 응답 형식으로 입력합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

응답 JSON 페이로드의 예시는 다음과 같습니다.

{
  "account_id": "account456"
}

대신 IdP에서 브라우저가 RP에서 계정 ID와 일치하지 않는 문자열을 전달합니다(예: "*").

로그인 URL

IdP는 Login Status API를 사용하여 사용자에게 브라우저 로그인 상태를 변경할 수 있습니다. 하지만 다음과 같이 상태가 동기화되지 않을 수 있습니다. 세션이 만료될 때 이러한 시나리오에서는 브라우저는 사용자가 로그인 페이지를 통해 IdP에 로그인하도록 동적으로 idp 구성 파일의 login_url로 지정된 URL입니다.

FedCM 대화상자에는 확인할 수 있습니다

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

</ph>

사용자가 Continue 버튼을 클릭하면 브라우저에서 팝업 창이 열립니다. 을 입력합니다.

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

</ph>

를 통해 개인정보처리방침을 정의할 수 있습니다.

이 대화상자는 자사 쿠키가 포함된 일반 브라우저 창입니다. 모두 IdP에 따라 결정되며 창 핸들을 사용할 수 없음 RP 페이지에 교차 출처 통신을 요청합니다. 사용자가 로그인하면 IdP는 다음 작업을 수행해야 합니다.

• Set-Login: logged-in 헤더를 전송하거나 navigator.login.setStatus("logged-in") API를 사용하여 브라우저에 사용자가 로그인했습니다.
• IdentityProvider.close()를 호출하여 대화상자를 닫습니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

</ph>

브라우저에 ID 공급업체의 사용자 로그인 상태 알림

Login Status API는 메커니즘입니다. 웹사이트, 특히 IdP가 브라우저에 사용자의 로그인 상태를 알려줍니다. 연결됩니다 이 API를 사용하면 브라우저에서 IdP 및 잠재적인 타이밍 공격을 완화할 수 있습니다.

IdP는 HTTP 헤더를 전송하여 브라우저에 사용자의 로그인 상태를 알릴 수 있습니다. 또는 사용자가 IdP에 로그인했거나 사용자가 모든 IdP 계정에서 로그아웃됩니다. 각 IdP( config URL) 브라우저가 로그인 상태를 나타내는 3가지 상태 변수를 유지함 가능한 값 logged-in, logged-out, unknown를 포함합니다. 기본 상태 unknown입니다.

사용자가 로그인되었음을 알리려면 Set-Login: logged-in HTTP 헤더를 전송합니다. 최상위 탐색 또는 IdP에서의 동일 사이트 하위 리소스 요청 출처:

Set-Login: logged-in

또는 JavaScript API navigator.login.setStatus("logged-in")를 호출합니다. 최상위 탐색의 IdP 출처에서 다음을 수행합니다.

navigator.login.setStatus("logged-in")

이러한 호출은 사용자의 로그인 상태를 logged-in로 기록합니다. 사용자가 로그인할 때 상태가 logged-in로 설정되면 FedCM을 호출하는 RP가 계정 엔드포인트를 사용하여 FedCM의 사용자에게 사용 가능한 계정을 표시합니다. 대화상자

사용자가 모든 계정에서 로그아웃되었음을 알리려면 최상위 탐색 또는 동일 사이트 하위 리소스에 Set-Login: logged-out HTTP 헤더를 전송합니다. 요청을 IdP 원본에서 가져옵니다.

Set-Login: logged-out

또는 JavaScript API navigator.login.setStatus("logged-out")를 호출합니다. 최상위 탐색의 IdP 출처에서 다음을 수행합니다.

navigator.login.setStatus("logged-out")

이러한 호출은 사용자의 로그인 상태를 logged-out로 기록합니다. 사용자의 logged-out로, FedCM을 호출할 때 요청을 IdP의 계정 엔드포인트로 보냅니다

unknown 상태는 IdP가 로그인 상태를 사용하여 신호를 보내기 전에 설정됩니다. API에 액세스할 수 있습니다. Unknown는 더 나은 전환을 위해 도입되었습니다. 이 API가 제공되었을 때 이미 IdP에 로그인되어 있어야 합니다. IdP에 FedCM이 처음 호출될 때까지 브라우저에 이를 알릴 수 있습니다. 이 Chrome이 IdP의 계정 엔드포인트에 요청하고 계정 엔드포인트의 응답에 따라 다음과 같이 상태가 표시됩니다.

• 엔드포인트가 활성 계정 목록을 반환하면 상태를 다음으로 업데이트합니다. logged-in하고 FedCM 대화상자를 열어 해당 계정을 표시합니다.
• 엔드포인트에서 계정을 반환하지 않는 경우 상태를 logged-out로 업데이트하고 FedCM 호출에 실패합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

사용자가 동적 로그인 흐름을 통해 로그인하도록 허용하기

IdP는 사용자의 로그인 상태를 브라우저에 계속 알려주지만 세션이 만료되는 경우와 같이 동기화되지 않을 수 있습니다. 브라우저에서 로그인 상태가 logged-in, 세션이 더 이상 유효하지 않으므로 서버에서 계정을 반환하지 않습니다. 있습니다. 이러한 시나리오에서는 브라우저가 동적으로 사용자의 로그인을 IdP에 연결할 수 있습니다.

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

ID 공급업체를 통해 신뢰 당사자에 로그인

IdP의 구성과 엔드포인트를 사용할 수 있게 되면 RP는 navigator.credentials.get(): 사용자의 RP 로그인을 허용하도록 요청 연결할 수 있습니다

API를 호출하기 전에 [FedCM을 '사용자 브라우저]' FedCM을 사용할 수 있는지 확인하려면 FedCM 구현:

if ('IdentityCredential' in window) {
  // If the feature is available, take action
}

사용자가 RP에서 IdP에 로그인하도록 허용하려면 다음을 수행합니다. 예를 들면 다음과 같습니다.

const credential = await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: 'https://accounts.idp.example/config.json',
      clientId: '********',
      nonce: '******'
    }]
  }
});
const { token } = credential;

providers 속성은 IdentityProvider의 배열을 사용합니다. 객체가 다음 속성이 포함됩니다.

속성	설명
configURL(필수)	IdP 구성 파일의 전체 경로입니다.
clientId(필수)	IdP에서 발급한 RP의 클라이언트 식별자입니다.
nonce(선택사항)	이 특정 요청에 대한 응답이 발행되도록 하기 위한 임의의 문자열입니다. 재생 공격을 방지합니다.
loginHint(선택사항)	다음을 통해 제공된 login_hints 값 중 하나를 지정합니다. FedCM에서는 계정 엔드포인트를 지정된 계정이 선택적으로 표시됩니다.
domainHint(선택사항)	다음을 통해 제공된 domain_hints 값 중 하나를 지정합니다. FedCM에서는 계정 엔드포인트를 지정된 계정을 선택적으로 표시하는 대화상자가 표시됩니다.

브라우저는 가입 및 로그인 사용 사례를 계정 목록의 응답에 approved_clients 존재 엔드포인트입니다. 브라우저에 정보 공개 문구가 표시되지 않음 사용자가 이미 RP에 가입한 경우 "To continue with ...."라는 텍스트가 표시됩니다.

가입 상태는 다음 조건에 해당하는지 여부에 따라 결정됩니다. 처리 여부:

• approved_clients에 RP의 clientId가 포함된 경우
• 브라우저에서 사용자가 이미 RP에 가입했음을 기억하는 경우

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

</ph>

RP가 navigator.credentials.get()를 호출하면 다음 활동이 실행됩니다. 장소:

1. 브라우저가 요청을 보내고 여러 문서를 가져옵니다. <ph type="x-smartling-placeholder">
   </ph>
   1. 잘 알려진 파일 및 IdP 구성 파일을 만듭니다.
   2. 계정 목록.
   3. 선택사항: RP의 개인정보처리방침 및 서비스 약관 URL 클라이언트 메타데이터 엔드포인트에서 검색됩니다.
2. 브라우저에 사용자가 로그인하는 데 사용할 수 있는 계정 목록이 표시됩니다. 서비스 약관 및 개인정보처리방침(있는 경우)
3. 사용자가 로그인할 계정을 선택하면 ID 어설션 엔드포인트가 IdP로 전송되어 토큰입니다.
4. RP는 토큰의 유효성을 검사하여 사용자를 인증할 수 있습니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

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

RP는 FedCM을 지원하지 않는 브라우저를 지원해야 하므로 사용자는 FedCM이 아닌 기존의 로그인 프로세스를 사용할 수 있어야 합니다. 종료 서드 파티 쿠키는 완전히 단계적으로 폐지되어 있습니다.

RP 서버에서 토큰을 검증하면 RP가 사용자 또는 로그인하고 새로운 세션을 시작하도록 하세요.

로그인 힌트 API

사용자가 로그인한 후 신뢰 당사자 (RP)가 사용자에게 다음을 요청하는 경우가 있습니다. 다시 인증합니다. 하지만 사용자는 자신이 어떤 계정을 사용하고 있는지 모를 수 있습니다. RP가 로그인할 계정을 지정할 수 있는 경우 사용자가 계정을 선택할 수 있습니다.

RP는 다음 중 하나가 포함된 loginHint 속성이 있는 navigator.credentials.get() 계정 목록에서 login_hints개의 값을 가져왔습니다. 엔드포인트를 사용하도록 설정합니다.

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

loginHint와 일치하는 계정이 없으면 FedCM 대화상자에 로그인 프롬프트가 표시됩니다. 이를 통해 사용자는 있습니다. 사용자가 프롬프트를 탭하면 config 파일에 지정된 로그인 URL. 이 링크는 로그인 힌트와 도메인 힌트 쿼리 매개변수가 추가됩니다.

도메인 힌트 API

RP가 이미 특정 사이트에 로그인할 수 있습니다. 이는 특히 기업 시나리오에 액세스 가능한 사이트를 있습니다. 더 나은 사용자 환경을 제공하기 위해 FedCM API는 RP가 RP에 로그인하는 데 사용할 수 있는 계정을 표시합니다. 이렇게 하면 사용자가 회사 외부 계정을 사용하여 RP에 로그인하려고 시도하는 경우 나중에 오류 메시지 (또는 올바른 유형의 계정이 사용되지 않았기 때문에 로그인이 작동하지 않음)가 표시됩니다.

RP는 다음 중 하나가 포함된 domainHint 속성이 있는 navigator.credentials.get() 계정 목록에서 domain_hints개의 값을 가져왔습니다. 엔드포인트를 사용하도록 설정합니다.

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

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

domainHint와 일치하는 계정이 없으면 FedCM 대화상자에 로그인 프롬프트가 표시됩니다. 이를 통해 사용자는 있습니다. 사용자가 프롬프트를 탭하면 config 파일에 지정된 로그인 URL. 이 링크는 로그인 힌트와 도메인 힌트 쿼리 매개변수가 추가됩니다.

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

</ph>

오류 메시지 표시

경우에 따라 IdP는 다음과 같은 타당한 이유로 토큰을 발급하지 못할 수 있습니다. 클라이언트가 승인되지 않은 경우 서버를 일시적으로 사용할 수 없게 됩니다. 만약 IdP가 '오류'를 반환 RP뿐만 아니라 Chrome에서도 이를 포착할 수 있습니다. 에서 제공한 오류 정보가 있는 브라우저 UI를 표시하여 사용자에게 알립니다. IdP를 사용합니다

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

</ph>

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 자동 재인증 ('auto-reauthn')을 사용하면 FedCM을 사용한 초기 인증 후 재방문 "초기 인증' 사용자가 계정을 만들거나 RP의 FedCM의 로그인 대화상자에서 '다음으로 계속' 버튼을 탭하여 웹사이트를 인증합니다. 할 수 있습니다.

명시적인 사용자 경험은 사용자가 추적 방지를 위한 제휴 계정 (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 Google Kubernetes Engine, PublicKeyCredential 확인할 수 있습니다 속성에는 다음 4개의 값이 허용됩니다.

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

이 호출을 사용하면 다음 조건에서 자동 재인증이 실행됩니다.

• FedCM을 사용할 수 있습니다. 예를 들어 사용자가 FedCM을 사용 중지하지 않았습니다. 전역적으로 또는 설정에서 RP에 적용됩니다.
• 사용자가 FedCM API가 있는 계정을 하나만 사용하여 이 사이트에서 있습니다.
• 사용자가 해당 계정으로 IdP에 로그인했습니다.
• 최근 10분 이내에 자동 재인증이 발생하지 않았습니다.
• RP가 전화를 걸지 않음 이후 navigator.credentials.preventSilentAccess() 이전 로그인 정보를 확인할 수 있습니다.

이러한 조건이 충족되면 사용자는 FedCM navigator.credentials.get()가 호출되는 즉시 시작됩니다.

mediation: optional인 경우 자동 재인증 사용할 수 없음으로 인해 브라우저만 알고 있습니다. RP는 isAutoSelected 속성을 검사 중입니다.

이는 API 성능을 평가하고 그에 따라 UX를 개선하는 데 유용합니다. 또한 사용할 수 없는 경우 사용자에게 명시적인 사용자 미디에이션은 mediation: required를 사용한 흐름입니다.

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

</ph>

preventSilentAccess()로 미디에이션 시행

사용자가 로그아웃한 직후에 자동 재인증을 해도 매우 우수한 사용자 환경입니다. 따라서 FedCM은 자동 재인증을 설정하여 이러한 동작을 방지합니다. 즉, 재인증이 필요한 경우 최대 10분에 한 번 10분 후에 다시 시도해 주세요. RP는 navigator.credentials.preventSilentAccess()를 호출하여 사용자가 로그아웃할 때 자동 재인증을 사용 중지하도록 브라우저에 명시적으로 요청 예를 들어 로그아웃 버튼을 클릭하여 RP를 명시적으로 지정할 수 있습니다.

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

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

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

• 데스크톱 Chrome에서 chrome://password-manager/settings >로 이동합니다. 로그인 자동으로 확장 및 축소할 수 있습니다
• Android Chrome의 경우 설정 > 비밀번호 관리자 > 톱니바퀴 아이콘 > 자동 로그인을 탭합니다.

전환 버튼을 사용 중지하면 사용자는 모든 경우에 자동 재인증 동작을 선택 해제할 수 있습니다. 있습니다. 사용자가 Google 계정에 로그인되어 있으며 동기화는 사용 설정되어 있습니다.

RP에서 IdP 연결 해제

사용자가 이전에 FedCM을 통해 IdP를 사용하여 RP에 로그인한 경우 관계는 브라우저에 연결된 있습니다. RP는 IdentityCredential.disconnect() 함수를 사용하세요. 이 함수는 최상위 RP 프레임입니다. RP는 사용하는 clientId인 configURL를 전달해야 합니다. 연결 해제되어야 하는 IdP의 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는 다음과 같습니다. 연결 해제에 대한 응답에 지정된 엔드포인트가 있습니다.

교차 출처 iframe 내에서 FedCM 호출

FedCM은 identity-credentials-get 권한 정책(상위 프레임에서 허용하는 경우) 받는사람 이렇게 하면 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")

권한 정책의 작동 방식에 관한 자세한 내용은 권한이 있는 브라우저 기능 정책을 참조하세요.