암호 없는 로그인 구현

PWA Kit는 구매자에게 암호 없는 로그인을 사용할 수 있는 옵션과 함께 제공됩니다. PWA(Progressive Web App) Kit사이트에 이 기능을 포함하여 구매자 경험을 개선하십시오. 구매자는 암호 없는 로그인을 통해 암호 대신 이메일이나 텍스트의 인증 코드 또는 링크를 사용하여 안전하게 사이트에 로그인할 수 있습니다.

데모 사이트에서는 암호 없는 로그인의 기본 구현을 보여 줍니다.

PWA Kit 사이트에 대해 암호 없는 로그인을 활성화하고 구성하려면 이 가이드의 단계를 따르십시오. 이 가이드에서는 URL https://www.example.com이 있는 예제 스토어프런트를 사용합니다. 도메인 이름으로 바꿉니다example.com .

암호 없는 로그인을 사용하려면:

• Composable Storefront 및Retail React App버전 6.0 이상을 사용하여 사이트를 빌드합니다.
• 구매자 로그인 및 API 액세스(SLAS) 비공개 클라이언트를 구성합니다. 암호 없는 로그인을 위한 SLAS 개인 클라이언트 구성과 관련된 세부 사항은암호 없는 로그인 구성을참조하십시오.

세 가지 구성 단계가 있습니다.

1. 콜백 URL 구성
2. 콜백 URL 허용 목록
3. PWA Kit 프로젝트에서 구성 완료

SLAS에 대한 콜백 URL을 제공합니다. 이렇게 하면 SLAS에서 사이트에서 구매자를 위한 로그인 토큰(확인 코드 또는 이메일이나 텍스트의 링크)을 생성하는 데 필요한 모든 정보를 해당 URL로 전송할 수 있습니다. 자세한 배경 정보는SLAS를 사용한 암호 없는 로그인및SMS를 사용한 암호 없는 로그인을 참조하십시오.

SLAS는 콜백 URL에 HTTP POST 요청을 하여 구매자의 자격 증명을 선택한 대상(일반적으로 이메일 또는 마케팅 서비스 제공업체)으로 전달합니다. 기본적으로 PWA Kit는 보안 링크를 생성하고 Salesforce Marketing Cloud를 사용하여 링크를 이메일로 전달합니다. 이 기능을 맞춤설정하려면 구매자가 SLAS에 의해 생성된 8자리 암호 없는 토큰을 받도록 하는 데 사용할 메커니즘을 설명합니다.

다음은 SLAS에 콜백 URL을 제공하는 메커니즘을 설명하는 세 가지 가능한 옵션입니다. 아래에 자세히 설명되어 있습니다.

• a. 외부 콜백 URL 사용
• b. Marketing Cloud 통합 사용
• c. PWA Kit 프로젝트에서 사용자 지정 POST 끝점 사용

a. 외부 콜백 URL 사용

• 구매자의 이메일을 사용하여 토큰 전송을 처리할 수 있도록 공개적으로 액세스할 수 있는 외부 콜백 URL을 제공합니다.

  이 콜백 URL의 예로는 B2C Commerce 인스턴스, Managed Runtime 환경 또는 자체 서버가 있습니다.

• SLAS 개인 클라이언트를 구성합니다 . 콜백 URL 입력란에 공개적으로 액세스할 수 있는 콜백 URL을 입력합니다.

또는

b. Marketing Cloud 통합 사용

Marketing Cloud 라이선스가 있는 경우 계약 조건에 따라 이메일 또는 문자 메시지로 토큰을 보낼 수 있습니다. 이는 PWA Kit에 포함된 기본 구현입니다.

사전 요구 사항

Marketing Cloud 통합 사용에 적용되는 모든 전제 조건 및 단계는 이 안내서를 참조하십시오.

• SMS를 사용한 암호 없는 로그인
• 트랜잭션 전송 여정 만들기

통합 구성

아래의 Marketing Cloud 구성 값을 얻으려면OAuth 2.0 API 통합 만들기를참조하십시오.

• Managed Runtime에서 이러한 환경 변수를 설정합니다.

  • MARKETING_CLOUD_CLIENT_ID Marketing Cloud 클라이언트 ID로
  • MARKETING_CLOUD_CLIENT_SECRET Marketing Cloud 클라이언트 시크릿으로
  • MARKETING_CLOUD_SUBDOMAIN Marketing Cloud 하위 도메인으로
  • MARKETING_CLOUD_PASSWORDLESS_LOGIN_TEMPLATE Marketing Cloud에 저장한 이메일 템플릿에 첨부된트랜잭션 API 이벤트에대한 고유한 이벤트 정의 키를 추가합니다.

  환경 변수를 참조하십시오.

• SLAS 클라이언트에서 전체 콜백 URL을 구성합니다. 예를 들어 다음과 같습니다.https://example.com/passwordless-login-callback SLAS 개인 클라이언트 구성의내용을 참조하십시오.

에서 콜백 경로를/passwordless-login-callback사용자 지정하려면 POST 엔드포인트가 설정된 위치에서도 업데이트ssr.js하십시오. 옵션 c를 참조하십시오. 아래 PWA Kit 프로젝트에서 사용자 지정 POST 끝점을 사용합니다.

또는

c. PWA Kit 프로젝트에서 사용자 지정 POST 끝점 사용

• 선택한 옵션(이메일 또는 텍스트)을 사용하여 토큰 전달을 처리하도록 사용자 지정 POST 엔드포인트를app/ssr.js구성합니다. 이 Marketing Cloud 구현을 예로 참조하십시오app/ssr.js .

• SLAS 개인 클라이언트를 구성합니다 . 콜백 URL 필드에 사용자 지정 POST 엔드포인트에서 설정한 콜백 URL을 입력합니다.

세 가지 콜백 URL 옵션 중 하나에 대해 구성한 콜백 URL이 사용 중인 SLAS 클라이언트의 필드에 허용 목록에Callback URL있는지 확인합니다. 방법은 다음과 같습니다.

• ** SLAS 관리 UI에 액세스:** Salesforce B2C Commerce 인스턴스에 로그인하고 SLAS 관리 섹션으로 이동합니다.
• **클라이언트 생성 또는 편집:**콜백 URL을 관리할 SLAS 클라이언트를 선택합니다.
• **허용된 URL 추가:**클라이언트 구성에서 사이트의 유효한 콜백 URL 목록을 제공합니다.

a. 업데이트 template-retail-react-app/config/default.js

아직 완료하지 않은 경우사전 요구 사항을 완료합니다 .

PWA Kit 프로젝트에서 암호 없는 로그인을 구성하려면 이 예제와 같이 업데이트template-retail-react-app/config/default.js합니다.

PWA Kit 프로젝트에서 필수 구성 요소의 일부로 설정한 콜백 URL을 사용하여 다음과 같이 업데이트template-retail-react-app/config/default.js합니다.

b. 선택 사항: 환경 변수를 사용하여 콜백 URL 설정

선택적으로 대신 환경 변수를template-retail-react-app/config/default.js사용하여 콜백 URL을 설정할 수 있습니다. 암호 없는 로그인을 활성화하는 데 사용합니다template-retail-react-app/config/default.js . 콜백 URL을 설정하도록 이 환경 변수를 구성합니다.

PASSWORDLESS_LOGIN_CALLBACK_URI

환경 변수를 참조하십시오.

• 암호 없는 로그인 기능의 남용을 방지하기 위해 속도 제한을 구현합니다. 예를 들어 임베디드 CDN(eCDN)을 사용하는 경우eCDN 속도 제한 규칙을적용할 수 있습니다.
• 강력한 보안 조치를 사용하여 구매자 계정을 보호하십시오. 예를 들어 Cloudfare와 같은 타사 CDN(콘텐츠 전송 네트워크)을 사용하는 경우위협 점수로 요청을 차단할수 있습니다.
• 구매자의 인증 옵션 사용을 추적하고 문제를 효율적으로 진단합니다. 예를 들어Log Center를 사용하여 MRT(Managed Runtime) 및 B2C Commerce 인스턴스의 로그에 액세스합니다.

이 섹션에서는 암호 없는 로그인과 관련하여 발생할 수 있는 일반적인 오류에 대해 제안된 솔루션을 제공합니다.

**잠재적 원인:**범위 또는 콜백 URL이 잘못되었습니다.

**제안된 솔루션:**범위 및 콜백 URL이 올바르게 구성되었는지 확인합니다. SLAS 개인 클라이언트 구성의내용을 참조하십시오.

• SLAS를 사용한 암호 없는 로그인
• SMS를 사용한 암호 없는 로그인