PWA Kit는 구매자에게 암호 없는 로그인을 사용할 수 있는 옵션과 함께 제공됩니다. PWA(Progressive Web App) Kit사이트에 이 기능을 포함하여 구매자 경험을 개선하십시오. 구매자는 암호 없는 로그인을 통해 암호 대신 이메일이나 텍스트의 인증 코드 또는 링크를 사용하여 안전하게 사이트에 로그인할 수 있습니다.
데모 사이트에서는 암호 없는 로그인의 기본 구현을 보여 줍니다.
PWA Kit 사이트에 대해 암호 없는 로그인을 활성화하고 구성하려면 이 가이드의 단계를 따르십시오. 이 가이드에서는 URL https://www.example.com이 있는 예제 스토어프런트를 사용합니다. 도메인 이름으로 바꿉니다example.com .
암호 없는 로그인은하이브리드 스토어프런트에서 지원되지 않습니다.
Note
암호 없는 로그인을 사용하려면:
세 가지 구성 단계가 있습니다.
Note
SLAS에 대한 콜백 URL을 제공합니다. 이렇게 하면 SLAS에서 사이트에서 구매자를 위한 로그인 토큰(확인 코드 또는 이메일이나 텍스트의 링크)을 생성하는 데 필요한 모든 정보를 해당 URL로 전송할 수 있습니다. 자세한 배경 정보는SLAS를 사용한 암호 없는 로그인및SMS를 사용한 암호 없는 로그인을 참조하십시오.
SLAS는 콜백 URL에 HTTP POST 요청을 하여 구매자의 자격 증명을 선택한 대상(일반적으로 이메일 또는 마케팅 서비스 제공업체)으로 전달합니다. 기본적으로 PWA Kit는 보안 링크를 생성하고 Salesforce Marketing Cloud를 사용하여 링크를 이메일로 전달합니다. 이 기능을 맞춤설정하려면 구매자가 SLAS에 의해 생성된 8자리 암호 없는 토큰을 받도록 하는 데 사용할 메커니즘을 설명합니다.
다음은 SLAS에 콜백 URL을 제공하는 메커니즘을 설명하는 세 가지 가능한 옵션입니다. 아래에 자세히 설명되어 있습니다.
a. 외부 콜백 URL 사용
구매자의 이메일을 사용하여 토큰 전송을 처리할 수 있도록 공개적으로 액세스할 수 있는 외부 콜백 URL을 제공합니다.
이 콜백 URL의 예로는 B2C Commerce 인스턴스, Managed Runtime 환경 또는 자체 서버가 있습니다.
SLAS 개인 클라이언트를 구성합니다 . 콜백 URL 입력란에 공개적으로 액세스할 수 있는 콜백 URL을 입력합니다.
또는
b. Marketing Cloud 통합 사용
Marketing Cloud 라이선스가 있는 경우 계약 조건에 따라 이메일 또는 문자 메시지로 토큰을 보낼 수 있습니다. 이는 PWA Kit에 포함된 기본 구현입니다.
사전 요구 사항
Marketing Cloud 통합 사용에 적용되는 모든 전제 조건 및 단계는 이 안내서를 참조하십시오.
통합 구성
아래의 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 끝점 사용
app/ssr.js구성합니다. 이 Marketing Cloud 구현을 예로 참조하십시오app/ssr.js .1// Define a POST route for the '/passwordless-login-callback' endpoint.
2app.post('/passwordless-login-callback', (req, res) => {
3 const slasCallbackToken = req.headers['x-slas-callback-token']
4 validateSlasCallbackToken(slasCallbackToken).then(() => {
5 sendMagicLinkEmail(
6 req,
7 res,
8 PASSWORDLESS_LOGIN_LANDING_PATH,
9 process.env.MARKETING_CLOUD_PASSWORDLESS_LOGIN_TEMPLATE
10 )
11 })
12 }세 가지 콜백 URL 옵션 중 하나에 대해 구성한 콜백 URL이 사용 중인 SLAS 클라이언트의 필드에 허용 목록에Callback 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합니다.
1module.exports = {
2 app: {
3 login: {
4
5 // Enable passwordless login with an absolute callback URL.
6 passwordless: {
7 enabled: true,
8 callbackURI: 'https://example.com/passwordless-login-callback'
9 }
10
11 // Enable passwordless login with a relative callback URL.
12 // This example callback URL uses the default Marketing Cloud implementation.
13 // You can customize the behavior of this callback URL endpoint in ssr.js.
14 passwordless: {
15 enabled: true,
16 callbackURI: '/passwordless-login-callback'
17
18
19 // More code here...b. 선택 사항: 환경 변수를 사용하여 콜백 URL 설정
암호 없는 로그인에 대한 환경 변수의 값은 에 추가한 모든 값을 재정의합니다template-retail-react-app/config/default.js .
Note
선택적으로 대신 환경 변수를template-retail-react-app/config/default.js사용하여 콜백 URL을 설정할 수 있습니다. 암호 없는 로그인을 활성화하는 데 사용합니다template-retail-react-app/config/default.js . 콜백 URL을 설정하도록 이 환경 변수를 구성합니다.
PASSWORDLESS_LOGIN_CALLBACK_URI
환경 변수를 참조하십시오.
이 섹션에서는 암호 없는 로그인과 관련하여 발생할 수 있는 일반적인 오류에 대해 제안된 솔루션을 제공합니다.
**잠재적 원인:**범위 또는 콜백 URL이 잘못되었습니다.
**제안된 솔루션:**범위 및 콜백 URL이 올바르게 구성되었는지 확인합니다. SLAS 개인 클라이언트 구성의내용을 참조하십시오.
j