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

보안 결제 확인 등록

Eiji Kitamura

거래에서 보안 결제 확인 (SPC)을 사용하려면 고객이 먼저 인증자를 등록해야 합니다. 이 프로세스는 결제 확장 프로그램을 추가한 WebAuthn 등록 프로세스와 매우 유사합니다.

이 도움말에서는 신뢰 당사자 (RP) 역할을 하는 발급 은행이 SPC 등록을 구현하는 방법을 알아볼 수 있습니다. 사용자 환경은 안전한 결제 확인 개요에서 자세히 설명합니다.

보안 결제 확인 등록은 어떻게 작동하나요?

SPC는 WebAuthn 표준의 확장 프로그램으로 빌드됩니다.

2022년 4월부터 SPC는 데스크톱에서만 사용자 인증 플랫폼 인증자(UVPA)를 지원합니다. 즉, 고객이 다음과 같은 삽입된 인증자가 있는 데스크톱 또는 노트북을 사용해야 합니다.

macOS 기기에서 Touch ID를 포함한 잠금 해제 기능
Windows 기기의 Windows Hello

기기 등록

신뢰 당사자 (RP)의 기기 등록은 충분히 강력한 사용자 인증 절차를 따라야 합니다. RP는 계정이 쉽게 도용되지 않도록 고객이 강력한 인증을 사용하여 웹사이트에 로그인했는지 확인해야 합니다. 주의: 이 프로세스의 보안이 취약하면 SPC도 위험에 처하게 됩니다.

RP에서 고객을 인증하면 고객이 기기를 등록할 수 있습니다.

기능 감지

RP는 고객에게 기기 등록을 요청하기 전에 브라우저가 SPC를 지원하는지 확인해야 합니다.

const isSecurePaymentConfirmationSupported = async () => {
  if (!'PaymentRequest' in window) {
    return [false, 'Payment Request API is not supported'];
  }

  try {
    // The data below is the minimum required to create the request and
    // check if a payment can be made.
    const supportedInstruments = [
      {
        supportedMethods: "secure-payment-confirmation",
        data: {
          // RP's hostname as its ID
          rpId: 'rp.example',
          // A dummy credential ID
          credentialIds: [new Uint8Array(1)],
          // A dummy challenge
          challenge: new Uint8Array(1),
          instrument: {
            // Non-empty display name string
            displayName: ' ',
            // Transparent-black pixel.
            icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==',
          },
          // A dummy merchant origin
          payeeOrigin: 'https://non-existent.example',
        }
      }
    ];

    const details = {
      // Dummy shopping details
      total: {label: 'Total', amount: {currency: 'USD', value: '0'}},
    };

    const request = new PaymentRequest(supportedInstruments, details);
    const canMakePayment = await request.canMakePayment();
    return [canMakePayment, canMakePayment ? '' : 'SPC is not available'];
  } catch (error) {
    console.error(error);
    return [false, error.message];
  }
};

isSecurePaymentConfirmationSupported().then(result => {
  const [isSecurePaymentConfirmationSupported, reason] = result;
  if (isSecurePaymentConfirmationSupported) {
    // Display the payment button that invokes SPC.
  } else {
    // Fallback to the legacy authentication method.
  }
});

인증자 등록

SPC용 기기를 등록하려면 다음 요구사항을 준수하여 WebAuthn 등록 프로세스를 따르세요.

플랫폼 인증자가 필요합니다. authenticatorSelection.authenticatorAttachment는 platform입니다.
사용자 인증이 필요합니다. authenticatorSelection.userVerification는 required입니다.
검색 가능한 사용자 인증 정보 (레지던트 키)가 필요합니다. authenticatorSelection.residentKey는 required입니다.

참고: Chrome Android의 버전 M109, M110, M111의 경우 기술적 제한으로 인해 authenticatorSelection.residentKey를 required 대신 preferred로 설정해야 합니다. Chrome Android M112부터 required는 다른 플랫폼과 마찬가지로 사용할 수 있습니다.

또한 isPayment: true로 'payment' 확장 프로그램을 지정합니다. 위의 요구사항을 충족하지 않고 이 확장자를 지정하면 예외가 발생합니다.

참고: WebAuthn은 RP가 등록 중인 인증자의 제조업체와 모델을 확인하는 데 도움이 되는 attestation 옵션을 지원합니다. 하지만 현재 보안 결제 확인은 Chrome에서만 사용할 수 있으며 특정 플랫폼의 플랫폼 인증자로 제한되므로 유용하지 않을 수 있으며 선택사항입니다.

기타 주의사항:

rp.id: RP의 호스트 이름입니다. 도메인의 eTLD+1 부분은 등록된 위치와 일치해야 합니다. eTLD+1과 일치하는 도메인에서 인증하는 데 사용할 수 있습니다.
user.id: 사용자 식별자의 바이너리 표현식입니다. 인증에 성공하면 동일한 식별자가 반환되므로 RP는 카드 소지자의 일관된 사용자 식별자를 제공해야 합니다.
excludeCredentials: RP가 동일한 인증자를 등록하지 않도록 하는 사용자 인증 정보 배열입니다.

WebAuthn 등록 절차에 관한 자세한 내용은 webauthn.guide를 참고하세요.

등록 코드 예시:

const options = {
  challenge: new Uint8Array([21...]),
  rp: {
    id: "rp.example",
    name: "Fancy Bank",
  },
  user: {
    id: new Uint8Array([21...]),
    name: "jane.doe@example.com",
    displayName: "Jane Doe",
  },
  excludeCredentials: [{
    id: new Uint8Array([21...]),
    type: 'public-key',
    transports: ['internal'],
  }, ...],
  pubKeyCredParams: [{
    type: "public-key",
    alg: -7 // "ES256"
  }, {
    type: "public-key",
    alg: -257 // "RS256"
  }],
  authenticatorSelection: {
    userVerification: "required",
    residentKey: "required",
    authenticatorAttachment: "platform",
  },
  timeout: 360000,  // 6 minutes

  // Indicate that this is an SPC credential. This is currently required to
  // allow credential creation in an iframe, and so that the browser knows this
  // credential relates to SPC.
  extensions: {
    "payment": {
      isPayment: true,
    }
  }
};

try {
  const credential = await navigator.credentials.create({ publicKey: options });
  // Send new credential info to server for verification and registration.
} catch (e) {
  // No acceptable authenticator or user refused consent. Handle appropriately.
}

등록이 완료되면 RP는 인증을 위해 서버로 전송할 사용자 인증 정보를 수신합니다.

등록 확인

서버에서 RP는 사용자 인증 정보를 확인하고 나중에 사용할 수 있도록 공개 키를 보관해야 합니다. 서버 측 등록 프로세스는 일반 WebAuthn 등록과 동일합니다. SPC를 준수하기 위해 추가로 취해야 할 조치는 없습니다.

iframe 내에서 등록

결제자가 RP (결제 발급기관)에 기기를 등록하지 않은 경우 판매자 웹사이트에서 등록할 수 있습니다. 구매 중에 인증에 성공하면 RP는 결제자가 iframe 내에서 기기를 간접적으로 등록하도록 요청할 수 있습니다.

이렇게 하려면 판매자 또는 상위 요소가 권한 정책을 사용하여 iframe 내에서 이 작업을 명시적으로 허용해야 합니다. 발급자는 iframe 내에서 인증자를 등록하는 동일한 단계를 따릅니다.

판매자가 등록을 허용하는 방법에는 두 가지가 있습니다.

판매자 도메인에서 제공되는 HTML의 iframe 태그에 allow 속성이 추가됩니다.
```
<iframe name="iframe" allow="payment https://spc-rp.glitch.me"></iframe>
```
allow 속성에 payment 및 WebAuthn 등록을 호출하는 RP 출처가 포함되어 있는지 확인합니다.
판매자 도메인에서 제공되는 상위 프레임 문서는 Permissions-Policy HTTP 헤더와 함께 전송됩니다.
```
Permissions-Policy: payment=(self "https://spc-rp.glitch.me")
```

다음 단계

기기가 신뢰 당사자에 등록되면 고객은 판매자의 웹사이트에서 보안 결제 확인을 사용하여 결제를 확인할 수 있습니다.

보안 결제 확인으로 인증하는 방법 알아보기
안전한 결제 확인 개요 읽기