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

FedCM 업데이트: Continuation API 번들 및 Storage Access API 자동 부여의 오리진 트라이얼

Eiji Kitamura

Chrome 126부터 개발자는 데스크톱 Federated Credential Management API (FedCM) 기능을 사용하면 승인 사용 사례 번들은 연속 API와 Parameters API: OAuth 승인 흐름과 유사한 환경을 지원합니다. ID 공급업체 (IdP)에서 제공하는 권한 대화상자가 포함됩니다. 또한 번들 Field API, 다중 configURL, 맞춤과 같은 기타 변경사항이 포함되어 있습니다. 계정 라벨. Chrome 126부터 사용자가 다음과 같은 경우 SAA 요청을 자동으로 부여하는 Storage Access API (SAA)입니다. 이전에 FedCM을 사용하여 로그인한 적이 있어야 합니다.

오리진 트라이얼: FedCM Continuation API 번들

FedCM Continuation API 번들은 여러 FedCM 확장 프로그램으로 구성됩니다.

연속 API
매개변수 API
필드 API
여러 configURL
맞춤 계정 라벨

연속 API

</ph>

사용자가 RP에 로그인한 후 버튼 모드를 통해 승인합니다.

Glitch에서 API 데모를 확인할 수 있습니다.

Continuation API를 사용하면 IdP의 ID 어설션 엔드포인트에서 사용자가 계속 진행할 수 있도록 FedCM에서 렌더링할 URL을 선택적으로 반환합니다. 여러 단계로 구성된 로그인 흐름을 제공합니다. 이렇게 하면 IdP에서 사용자에게 기존 FedCM UI에서 가능한 것 이상의 신뢰 당사자 (RP) 권한이 사용자의 서버 측 리소스에 대한 액세스와 같은.

일반적으로 ID 어설션 엔드포인트는 있습니다.

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

하지만 Continuation API를 사용하면 ID 어설션이 엔드포인트는 절대 경로 또는 상대 경로가 포함된 continue_on 속성 반환 경로를 지정해야 합니다

{
  // In the id_assertion_endpoint, instead of returning a typical
  // "token" response, the IdP decides that it needs the user to
  // continue on a pop-up window:
  "continue_on": "/oauth/authorize?scope=..."
}

브라우저가 continue_on 응답을 수신하는 즉시 새 팝업 창 가 열리고 사용자를 지정된 경로로 이동합니다.

사용자가 페이지와 상호작용한 후(예: 추가 권한 부여) 추가 정보를 RP와 공유하기 위해 IdP 페이지는 IdentityProvider.resolve()하여 원본 해결 navigator.credentials.get()를 호출하고 인수로 토큰을 반환합니다.

document.getElementById('allow_btn').addEventListener('click', async () => {
  let accessToken = await fetch('/generate_access_token.cgi');
  // Closes the window and resolves the promise (that is still hanging
  // in the relying party's renderer) with the value that is passed.
  IdentityProvider.resolve(accessToken);
});

그러면 브라우저에서 팝업을 자체적으로 닫고 토큰을 API에 반환합니다. 있습니다.

사용자가 요청을 거부하면 다음을 호출하여 창을 닫을 수 있습니다. IdentityProvider.close()

IdentityProvider.close();

어떤 이유로든 사용자가 팝업에서 계정을 변경한 경우 (예: IdP는 '사용자 전환'을 제공하여 함수 또는 위임 경우에는)를 호출은 선택적인 두 번째 인수를 받아서 다음과 같은 작업을 허용합니다.

IdentityProvider.resolve(token, {accountId: '1234');

매개변수 API

Parameters API를 사용하면 RP가 를 사용하여 ID 어설션에 추가 매개변수를 제공합니다. 엔드포인트입니다. Parameters API를 사용하면 RP가 추가 매개변수를 IdP에 전달하여 기본 로그인 이외의 리소스에 대한 권한 요청 사용자는 연속 API.

API를 사용하려면 params 속성에 매개변수를 navigator.credentials.get() 호출

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',
        ETC: 'MOAR',
        scope: 'calendar.readonly photos.write',
      }
    },
  }
});

params 객체의 속성 이름 앞에 param_가 추가됩니다. 위의 예에서 params 속성에는 IDP_SPECIFIC_PARAM이 '1', foo로 포함되어 있습니다. 'BAR', ETC는 'MOAR', scope로 'calendar.readonly photos.write' 다음 언어로 번역됩니다. param_IDP_SPECIFIC_PARAM=1&param_foo=BAR&param_ETC=MOAR&param_scope=calendar.readonly%20photos.write 요청의 HTTP 본문에서:

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

account_id=123&client_id=client1234&nonce=234234&disclosure_text_shown=false&param_IDP_SPECIFIC_PARAM=1&param_foo=BAR&param_ETC=MOAR&param_scope=calendar.readonly%20photos.write

동적으로 권한 가져오기

일반적으로 사용자는 권한을 요청하는 것이 가장 좋습니다. 개발자가 구현하기 쉽다고 느낄 때가 아니라 대상 예를 들어 사용자가 카메라를 가져가려고 할 때 카메라에 대한 액세스 권한 요청 사용자가 있습니다. 서버 리소스도 마찬가지입니다. 권한만 요청 리소스를 제공합니다 이를 '동적 승인'이라고 합니다.

FedCM을 사용하여 동적으로 승인을 요청하기 위해 IdP는 다음을 수행할 수 있습니다.

IdP에서 사용할 수 있는 필수 매개변수로 navigator.credentials.get()를 호출합니다. 이해할 수 있습니다(예: scope).
ID 어설션 엔드포인트 사용자가 이미 로그인되어 있는지 확인하고 continue_on URL로 응답합니다.
브라우저에서 IdP의 권한 페이지가 표시된 팝업 창을 열고 추가 권한을 부여하는 데 사용됩니다.
IdP에서 IdentityProvider.resolve()를 통해 승인하면 이 기간은 종료되며 RP의 원래 navigator.credentials.get() 호출은 RP가 이를 다른 클라이언트 ID와 교환할 수 있도록 액세스할 수 있습니다

필드 API

Fields API를 사용하면 RP가 다음을 수행할 수 있습니다. IdP에서 요청할 계정 속성을 선언하여 브라우저가 FedCM 대화상자에서 적절한 공개 UI를 렌더링합니다. 이를 위해서는 IdP의 반환된 토큰에 요청된 필드를 포함합니다. 요청 고려 '기본 프로필' OpenID Connect와 '범위' 비교 확인할 수 있습니다

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

Field API를 사용하려면 fields 속성에 매개변수를 다음 배열로 추가합니다. navigator.credentials.get() 호출 필드에는 'name', 'email'가 포함될 수 있습니다. 및 'picture'이지만 있습니다.

fields를 사용한 요청은 다음과 같습니다.

let { token } = await navigator.credentials.get({
  identity: {
    providers: [{
      fields: ['name', 'email', 'picture'],
      clientId: '1234',
      configURL: 'https://idp.example/fedcm.json',
      params: {
        scope: 'drive.readonly calendar.readonly',
      }
    },
  }
  mediation: 'optional',
});

ID 어설션에 대한 HTTP 요청입니다. 엔드포인트 disclosure_text_shown와 함께 RP 지정 fields 매개변수를 포함합니다. 재사용자가 아닌 경우 true로 설정된 매개변수와 disclosure_shown_for 매개변수에서 사용자에게 공개된 브라우저:

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=true&fields=email,name,picture&disclosure_shown_for=email,name,picture

RP가 캘린더에서는 위에서 언급한 맞춤 매개변수를 사용하여 처리해야 합니다. 이 IdP는 continue_on URL을 반환하여 권한을 요청합니다.

fields가 빈 배열인 경우 요청은 다음과 같습니다.

let { token } = await navigator.credentials.get({
  identity: {
    providers: [{
      fields: [],
      clientId: '1234',
      configURL: 'https://idp.example/fedcm.json',
      params: {
        scope: 'drive.readonly calendar.readonly',
      }
    },
  }
  mediation: 'optional',
});

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

위젯 모드에서 공개 메시지가 표시되지 않습니다. 버튼 흐름에서는 공개 UI를 완전히 건너뜁니다.

계정에서 보낸 응답이 엔드포인트 approved_clients의 RP와 일치하는 클라이언트 ID가 포함되어 있지 않습니다.

이 경우 ID 어설션에 전송된 disclosure_text_shown는 엔드포인트가 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

여러 configURL

여러 configURL에서 IdP 허용 여러 구성 파일을 수용할 수 있는 accounts_endpoint 및 login_url 잘 알려진 파일을 사용하세요. 구성 파일로 설정합니다.

accounts_endpoint와 login_url를 잘 알려진 파일에 추가하면 IdP가 여러 구성 파일을 지원할 수 있도록 provider_urls은 무시됩니다. 그렇지 않은 경우 provider_urls이 계속 적용되어 역방향입니다. 있습니다.

여러 configURL을 지원하는 잘 알려진 파일은 다음과 같습니다.

{
  "provider_urls": [ "https://idp.example/fedcm.json" ],
  "accounts_endpoint": "https://idp.example/accounts",
  "login_url": "https://idp.example/login"
}

이를 통해 다음을 수행할 수 있습니다.

기존의 잘 알려진 파일과의 호환성 유지 이미 배포되어 있는 이전 버전의 브라우저와 관련이 있습니다.
구성 파일의 개수를 임의로 설정할 수 있습니다(모두 해당 파일을 가리키는 한). 동일한 accounts_endpoint 및 login_url.
인증된 가져오기 요청에 엔트로피를 추가할 기회가 없음 accounts_endpoint에 전달되어야 합니다. '.well-known' 있습니다.

여러 configURL 지원은 선택사항이며 기존 FedCM 구현은 동일하게 유지될 수 있습니다.

맞춤 계정 라벨

맞춤 계정 라벨은 FedCM을 허용합니다. RP가 라벨을 지정하여 계정을 필터링할 수 있도록 IdP는 계정에 주석을 추가합니다. 구성 파일이 있습니다 도메인 힌트를 사용하여 이와 유사한 필터링이 가능했습니다. API 및 Login Hint API를 navigator.credentials.get() 호출에 넣고, 맞춤 계정 라벨은 구성 파일을 지정하여 사용자를 필터링할 수 있으며, 이는 여러 configURL이 사용됩니다. 맞춤 계정 라벨은 외부와 달리 IdP 서버에서 제공된다는 점에서도 RP(예: 로그인 또는 도메인 힌트)를 제공합니다.

예

IdP는 소비자용 configURL과 기업용 configURL을 각각 지원합니다. 이 소비자 구성 파일에는 'consumer' 라벨이 있고 엔터프라이즈 구성 파일에는 에 'enterprise' 라벨이 있습니다.

이러한 설정으로 잘 알려진 파일에는 accounts_endpoint 및 여러 configURL을 허용하는 login_url.

{
  "provider_urls": [ "https://idp.example/fedcm.json" ],
  "accounts_endpoint": "https://idp.example/accounts",
  "login_url": "https://idp.example/login"
}

accounts_endpoint가 잘 알려진 파일에 제공되면 provider_urls는 무시됩니다. RP가 각 구성을 직접 가리킬 수 있음 파일을 navigator.credentials.get() 호출에서 삭제합니다.

소비자 구성 파일은 https://idp.example/fedcm.json에 있으며 여기에는 다음이 포함됩니다. include를 사용하여 'consumer'를 지정하는 accounts 속성입니다.

{
  "accounts_endpoint": "https://idp.example/accounts",
  "client_metadata_endpoint": "/client_metadata",
  "login_url": "https://idp.example/login",
  "id_assertion_endpoint": "/assertion",
  "accounts": {
    "include": "consumer"
  }
}

엔터프라이즈 구성 파일은 https://idp.example/enterprise/fedcm.json에 있습니다. 여기에는accounts'enterprise' include입니다.

{
  "accounts_endpoint": "https://idp.example/accounts",
  "client_metadata_endpoint": "/enterprise/client_metadata",
  "login_url": "https://idp.example/login",
  "id_assertion_endpoint": "/assertion",
  "accounts": {
    "include": "enterprise"
  }
}

일반 IdP 계정 엔드포인트 (이 예시에서는 https://idp.example/accounts) 다음과 같은 계정 목록을 반환합니다. 에는 각 계정의 배열에 labels가 할당된 라벨 속성이 포함되어 있습니다. 다음은 계정이 두 개인 사용자에 대한 응답 예입니다. 하나는 하나는 기업용이고

{
 "accounts": [{
   "id": "123",
   "given_name": "John",
   "name": "John Doe",
   "email": "john_doe@idp.example",
   "picture": "https://idp.example/profile/123",
   "labels": ["consumer"]
  }], [{
   "id": "4567",
   "given_name": "Jane",
   "name": "Jane Doe",
   "email": "jane_doe@idp.example",
   "picture": "https://idp.example/profile/4567",
   "labels": ["enterprise"]
  }]
}

RP가 'enterprise' 사용자의 로그인을 허용하려는 경우 다음을 지정할 수 있습니다. 'enterprise' configURL 'https://idp.example/enterprise/fedcm.json': navigator.credentials.get() 호출:

let { token } = await navigator.credentials.get({
  identity: {
    providers: [{
      clientId: '1234',
      nonce: '234234',
      configURL: 'https://idp.example/enterprise/fedcm.json',
    },
  }
});

따라서 사용자는 '4567'의 계정 ID만 사용할 수 있습니다. 인치 '123'의 계정 ID가 브라우저에서 자동으로 숨겨지므로 사용자는 이 사이트의 IdP에서 지원하지 않는 계정은 제공되지 않습니다.

오리진 트라이얼: Storage Access API의 신뢰 신호로서 FedCM

Chrome 126에서 FedCM의 오리진 트라이얼이 저장소 액세스 API를 참고하세요. 다음으로 바꿉니다. FedCM을 통한 이전 권한 부여가 스토리지 액세스 권한을 통해 스토리지 액세스 요청을 자동으로 승인함 API를 참고하세요.

이는 삽입된 iframe이 맞춤설정된 리소스에 액세스하려고 할 때 유용합니다. 예를 들어 idp.example이 rp.example에 삽입되고 맞춤 리소스를 제공합니다 브라우저에서 서드 파티 쿠키에 대한 액세스를 제한하는 경우 사용자가 FedCM에서 idp.example을 사용하여 rp.example에 로그인하더라도 삽입된 idp.example iframe에서는 맞춤 리소스를 요청할 수 없습니다. 요청에 서드 파티 쿠키가 포함되지 않기 때문입니다.

이를 위해서는 idp.example이 웹사이트에 삽입된 iframe이며, 권한을 요청하는 메시지가 표시됩니다.

FedCM을 스토리지 액세스에 대한 신뢰 신호로 사용 API를 사용하여 Storage Access API 권한 검사는 스토리지 액세스 메시지를 통해 부여될 뿐만 아니라 FedCM 프롬프트

// In top-level rp.example:

// Ensure FedCM permission has been granted.
const cred = await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: 'https://idp.example/fedcm.json',
      clientId: '123',
    }],
  },
  mediation: 'optional',
});

// In an embedded IdP iframe:

// No user gesture is needed to call this, and the call will be auto-granted.
await document.requestStorageAccess();

// This returns `true`.
const hasAccess = await document.hasStorageAccess();

사용자가 FedCM으로 로그인한 경우 다음 조건을 충족하면 권한이 자동으로 부여됩니다. FedCM 인증이 활성 상태인지 확인합니다 즉, 사용자의 연결이 끊어지면 메시지가 표시됩니다

오리진 트라이얼 참여

Chrome을 사용 설정하여 FedCM Continuation API 번들을 로컬에서 사용해 볼 수 있습니다. 플래그 Chrome 126 이상에서 chrome://flags#fedcm-authz FedCM을 사용해 볼 수도 있습니다. Storage Access API에 대한 신뢰 신호로 Chrome 126 이상에서 #fedcm-with-storage-access-api

이 기능은 오리진 트라이얼로도 제공됩니다. 오리진 트라이얼을 통해 새로운 기능을 사용해 보고 사용성, 실용성, 효과에 관한 의견을 제공할 수 있습니다. 자세한 내용은 오리진 트라이얼 시작하기를 참고하세요.

FedCM Continuation API 번들 원본 사용해 보기 체험판을 사용하는 경우 다음 오리진 트라이얼 토큰 2개를 만듭니다.

체험판에 등록합니다. IdP에 토큰 삽입 출처.
서드 파티 일치 체크박스가 선택된 상태로 오리진 트라이얼에 등록합니다. 서드 파티 오리진 트라이얼 등록의 안내를 따릅니다. RP: RP의 토큰을 삽입합니다.

버튼과 함께 Continuation API를 사용 설정하는 데 관심이 있는 경우 플로우, 버튼 모드 사용 설정 API 출처 무료 체험 확인할 수 있습니다.

서드 파티로 오리진 트라이얼에 등록합니다. 다음의 지침을 따르세요. RP에 서드 파티 오리진 트라이얼 등록을 통해 삽입 RP의 토큰입니다.

FedCM을 Storage Access API 출처의 신뢰 신호로 사용해 보기 체험판:

오리진 트라이얼에 등록합니다. IdP에 토큰 삽입 출처.

신뢰 신호로서의 Continuation API 번들 오리진 트라이얼과 FedCM이 Storage Access API 오리진 트라이얼은 Chrome 126부터 사용할 수 있습니다.

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

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

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

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

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