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">![위젯 모드를 사용하면 사용자 활성화 없이 데스크톱 Chrome의 오른쪽 상단에 대화상자가 표시됩니다.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-125-widget-mode.jpg?authuser=0000&hl=ko)
새 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의 상단 중앙에 모달 대화상자가 표시됩니다.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-125-button-mode.jpg?authuser=0000&hl=ko)
Chrome 125를 사용하여 https://fedcm-rp-demo.glitch.me/button_flow.
<ph type="x-smartling-placeholder">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"
}
});
브라우저가 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
특성 감지
브라우저에서 버튼 모드를 사용할 수 있는지 확인하려면 다음 코드를 사용하여 검사할 수 있습니다.
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입니다.
- 오리진 트라이얼 등록으로 이동합니다. 페이지를 참조하세요.
- 등록 버튼을 클릭하고 토큰을 요청하는 양식을 작성합니다.
- 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
를 자체 토큰으로 바꿉니다.
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
SameSite=None
쿠키의 SameSite
매개변수는
쿠키는 퍼스트 파티 또는 동일 사이트 컨텍스트로 제한됩니다. 이를 지정함으로써
None
로 설정된 경우 쿠키가 서드 파티 도메인으로 전송될 수 있습니다.
FedCM에서 Chrome은 계정으로 쿠키를 전송합니다.
엔드포인트
ID 어설션이
엔드포인트와
연결 끊김
엔드포인트입니다. 최저가:
Chrome 125부터 Chrome은 쿠키와 함께 사용자 인증 정보가 있는 요청을 전송합니다.
명시적으로 SameSite=None
로 표시되어 있습니다.