이 페이지는 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로 '결제' 확장을 지정합니다. 위 요구사항을 충족하지 않고 이 확장 프로그램을 지정하면 예외가 발생합니다.

참고: 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")
```

다음 단계

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

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