FedCM 업데이트: Button Mode API 오리진 트라이얼, CORS 및 SameSite

Eiji Kitamura

Chrome 125부터 Button Mode API가 오리진 트라이얼(데스크톱) Button Mode API를 통해 ID 공급업체는 FedCM API에 연결할 수 있습니다. 그러면 사용자가 IdP 사이트로 이동했는지 확인합니다 버튼 모드의 FedCM UI가 더 눈에 띄게 표시됨 기존 위젯 흐름의 흐름과 비교했을 때 이는 사용자가 직접 관리하기 때문입니다. 사용자의 로그인 의도를 더 잘 반영할 수 있습니다.

버튼 모드 API

FedCM 사용자 인터페이스는 오른쪽 상단에 위젯으로 제공되었습니다. API가 호출되는 즉시 데스크톱의 경우 하단 시트에 이는 사용자가 신뢰 당사자 (RP)에게 연결될 때일 수 있습니다. 이를 가리켜 위젯 모드에서 사용할 수 있습니다. 위젯을 표시하려면 사용자가 IdP에 로그인되어 있어야 합니다. RP에 도달하기 전에 FedCM 자체만으로는 사용자가 IdP에 로그인해야 사용자가 RP에 로그인하도록 허용할 수 있습니다. IdP에서 사용할 수 있는 계정을 사용합니다. FedCM은 이를 위한 방법을 추가할 예정입니다.

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

</ph>

위젯 모드를 사용하면 사용자 활성화 없이 데스크톱 Chrome의 오른쪽 상단에 대화상자가 표시됩니다.

새 Button Mode API는 버튼 모드라는 새 UI 모드를 추가합니다. 좋아요 취소 버튼 모드는 사용자가 RP 대신 사용자가 로그인 과정을 시작할 때 호출됩니다. 'IdP로 로그인'을 누르는 등 버튼을 클릭합니다.

버튼을 누르자마자 FedCM이 사용자가 계정에 대한 가져오기를 통해 IdP 엔드포인트 또는 로그인 상태가 브라우저를 엽니다. 만약 FedCM에서 사용자에게 login_url IdP에서 제공하며 브라우저가 사용자가 가 이미 IdP에 로그인되어 있거나 사용자가 팝업 창에서 FedCM이 사용자가 IdP를 선택하도록 모달 대화상자를 엽니다. 로그인할 때 사용할 계정을 찾습니다. 계정을 선택하면 사용자는 IdP 계정을 사용하여 RP에 연결할 수 있습니다.

버튼 모드 UI에서 표시되는 로그인 대화상자는 브랜딩 아이콘도 있어야 합니다. 위젯 모드의 최소 아이콘 크기는 25x25픽셀이지만, 버튼 모드의 아이콘은 40x40픽셀입니다. IdP의 잘 알려진 파일을 사용하면 다음과 같이 여러 아이콘 URL을 지정합니다.

{
  // ... Other settings (like endpoints) here
  "branding": {
    "icons": [
      {
        "url": "https://size-25px-image",
        "size": 25,
      },
      {
        "url": "https://size-40px-image",
        "size": 40
      }
    ]
  }
}

버튼 모드를 사용하면 데스크톱 Chrome의 상단 중앙에 더 큰 아이콘과 함께 모달 대화상자가 표시됩니다.

Chrome 125를 사용하여 https://fedcm-rp-demo.glitch.me/button_flow.

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

</ph>

사용자가 Button Mode API를 사용하여 RP에 로그인하고 있습니다.

Button Mode API를 사용하는 방법:

• chrome://flags에서 FedCmButtonMode 실험용 기능을 사용 설정합니다.
• 일시적인 사용자 활성화 뒤에서 API를 호출해야 합니다. 예컨대 버튼 클릭과 같은 것들이죠.
• 다음과 같이 mode 매개변수를 사용하여 API를 호출합니다.

  return await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: "https://idp.example/config.json",
        clientId: "123",
        nonce:"456",
      }],
      mode: "button"
    }
  });

참고: Chrome은 현재 새 mode 속성에서 "button"만 지원합니다. 기타 Chrome에서 이 기능이 제공될 때 "widget" 등의 속성이 추가될 예정입니다.

브라우저가 ID 어설션에 새 매개변수를 보냅니다. 엔드포인트 mode=button를 포함하여 요청 유형을 나타냅니다.

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=Ct60bD&disclosure_text_shown=true&is_auto_selected=false&mode=button

참고: 문제가 발생하면 버튼 모드를 사용하여 FedCM API를 호출합니다. 는 즉시 응답하는 반면, 위젯 모드에서는 응답을 지연시키며 있습니다. 이는 사용자의 IdP 로그인 상태가 곧 오류 신호를 보내면 RP는 사용자의 IdP 로그인 상태에 대한 힌트를 제공합니다. 버튼 모드를 사용하면 사용자에게 사용자의 IdP 로그인을 노출할 우려가 없는 IdP에 로그인할 때 상태를 RP에 추가합니다.

참고: 사용자는 Chrome에서 FedCM 위젯 모드를 사용 중지할 수 있습니다. 설정을 선택합니다. 이것은 사용자가 로그인 요청을 시작했기 때문에 Button Mode API에 영향을 줄 수 있음 브라우저는 사용자가 로그인 흐름을 완료할 수 있도록 지원해야 합니다.

특성 감지

브라우저에서 버튼 모드를 사용할 수 있는지 확인하려면 다음 코드를 사용하여 검사할 수 있습니다.

let supportsFedCmMode = false;
try {
  navigator.credentials.get({
    identity: Object.defineProperty(
      {}, 'mode', {
        get: function () { supportsFedCmMode = true; }
      }
    )
  });
} catch(e) {}

if (supportsFedCmMode) {
  // The button mode is supported.
}

다른 계정 옵션 사용

RP는 사용자가 '다른 계정을 사용'하도록 허용할 수 있습니다. 계정 선택기에서 IdP에서 여러 계정을 지원하거나 기존 계정을 교체하는 경우를 예로 들 수 있습니다.

다른 계정을 사용하는 옵션을 사용 설정하려면 다음 단계를 따르세요.

• chrome://flags에서 FedCmUseOtherAccount 실험용 기능 사용 설정 또는 Button Mode API 오리진 트라이얼을 등록할 수 있습니다.
• IdP는 IdP 구성에서 다음을 지정합니다. 파일에 저장합니다.

{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

오리진 트라이얼 참여

Chrome을 사용 설정하여 버튼 모드 API를 로컬에서 사용해 볼 수 있습니다. 플래그 Chrome 125 이상에서 chrome://flags#fedcm-button-mode

IdP는 오리진 트라이얼을 등록하여 버튼 모드를 사용 설정할 수도 있습니다.

• 서드 파티 오리진 트라이얼 등록 RP에 입력됩니다.

오리진 트라이얼을 통해 새로운 기능을 사용해 보고 사용성, 실용성 및 효율성을 향상하기 위해 노력했습니다. 대상 자세한 내용은 웹용 오리진 트라이얼 가이드 개발자.

Button Mode API 오리진 트라이얼은 Chrome 125부터 Chrome까지 제공됩니다. 130입니다.

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

서드 파티 웹사이트에 토큰을 삽입하려면 다음 코드를 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를 자체 토큰으로 바꿉니다.

참고: FedCM API가 IdP에서 로드된 스크립트가 아니라 RP에 의해 호출되는 경우 RP가 출처를 직접 등록하고 퍼스트 파티 출처를 실행해야 합니다. 무료 체험판

Chrome 125에서는 CORS 및 SameSite=None가 필수임

CORS

Chrome에서 ID의 CORS 어설션 엔드포인트 Chrome 125부터 지원됩니다

교차 출처 리소스 공유 (CORS, Cross-Origin-Resource-Sharing)는 브라우저가 프런트엔드 자바스크립트 코드를 차단할지 여부를 결정하는 HTTP 헤더 교차 출처 요청에 대한 응답에 액세스하지 못하도록 합니다 ID 어설션 엔드포인트는 IdP 서버는 추가 헤더로 요청에 응답해야 합니다. 이 다음은 https://fedcm-rp-demo.glitch.me:

Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true

참고: Access-Control-Allow-Credentials가 true로 설정되어 있으므로 Access-Control-Allow-Origin에서 도메인을 명시적으로 반환해야 하며 *로 표시된 와일드 카드.

SameSite=None

쿠키의 SameSite 매개변수는 쿠키는 퍼스트 파티 또는 동일 사이트 컨텍스트로 제한됩니다. 이를 지정함으로써 None로 설정된 경우 쿠키가 서드 파티 도메인으로 전송될 수 있습니다.

FedCM에서 Chrome은 계정으로 쿠키를 전송합니다. 엔드포인트 ID 어설션이 엔드포인트와 연결 끊김 엔드포인트입니다. 최저가: Chrome 125부터 Chrome은 쿠키와 함께 사용자 인증 정보가 있는 요청을 전송합니다. 명시적으로 SameSite=None로 표시되어 있습니다.