Hybrid Auth를 사용하여 Hybrid Storefront 구성

B2C Commerce 버전 25.3에서는 하이브리드 인증(인증)이 플러그인 SLAS 카트리지 옵션을 대체합니다.

하이브리드 인증은 Storefront Reference Architecture(SFRA)/SiteGenesis(SG) 인증과 Shopper Login and API Access Service(SLAS) 인증이 모두 필요한 사이트 구현을 위한 독립형 솔루션입니다. 즉, (SFRA/Site Genesis)와 JSON 웹 토큰(SLAS)이 모두dwsid필요하며 이러한 토큰은 동기화된 상태로 유지되어야 합니다. 하이브리드 인증은 플러그인 SLAS 접근 방식을 개선하여 보다 효율적이고 간소화된 방법을 제공합니다.

Hybrid Auth는 이 기능을 B2C Commerce 플랫폼에 직접 적용하여 하이브리드 스토어프런트의 성능과 안정성을 높입니다.

이 가이드에서는 일부는 SFRA/SiteGenesis이고 일부는 컴포저블 스토어프런트인 하이브리드 스토어프런트에 대해 하이브리드 인증을 구성하는 방법을 설명합니다.

하이브리드 인증에 대한 자세한 내용은하이브리드 인증을참조하세요.

하이브리드 인증을 사용하는 하이브리드 구현과 관련된 작업은 다음과 같습니다.

1. 하이브리드 인증의 단계를 완료합니다.
2. 컴포저블 스토어프런트에 대한 하이브리드 인증을 구성합니다 (필수).
3. Commerce API CDN 영역을 사용하여 Managed Runtime으로 트래픽을 라우팅합니다. 단계적 헤드리스 롤아웃을 위한 CDN API를참조하십시오(필수).
4. 단계별 헤드리스 롤아웃을 위한 Einstein Activity(선택 사항)를 사용하여 분석 가져오기

하이브리드 인증을 사용하려면 다음을 사용하여 사이트를 빌드합니다.

• commerce-sdk-react@3.3.0 이상

• PWA(Progressive Web App) Kit 버전 3.10 이상

다음 표에서는 플러그 인 SLAS에 대한 PWA Kit 기능 지원과 하이브리드 인증을 비교합니다.

*향후 릴리스에 대한 지원이 예정되어 있습니다.

일부는 SFRA/SiteGenesis이고 일부는 컴포저블 스토어프런트인 하이브리드 스토어프런트에 대해 하이브리드 인증을 구성하려면 이 가이드에 자세히 설명된 다음 단계를 따르십시오.

• 임베디드 콘텐츠 제공 네트워크(eCDN) 오리진 규칙을 설정합니다 .
• PWA Kit Retail React App을 만듭니다 .
• PWA Kit 경로를 업데이트합니다 .
• @salesforce/commerce-sdk-react를 업그레이드합니다.
• Managed Runtime에서 쿠키를 사용하도록 설정합니다 .
• 카트리지 경로에서 플러그인 SLAS를 제거합니다 .
• Do Not Track Synchronization(추적 금지 동기화)을 활성화/비활성화합니다.

퍼널 상단의 페이지 요청을 컴포저블 스토어프런트(홈 페이지(/), 카테고리 목록 페이지(/category), 제품 세부정보 페이지(/product))로 보내도록 임베디드 콘텐츠 전송 네트워크(eCDN)를 구성합니다. 이러한 페이지는 mystorefront.mobify-storefront.com 에서 실행되는 MRT(Managed Runtime) 환경에 배포됩니다. 구매자가 구매를 결정하면 eCDN은 에서 실행 중인 기존 SFRA/SG 체크아웃 페이지로 구매자를 리디렉션합니다www.mystorefront.com .

• Commerce API CDN 영역을 사용하여 Managed Runtime으로 트래픽을 라우팅하려면하이브리드 구현용 CDN API의단계를 따르십시오.

MRT로 트래픽을 라우팅하는 방법에 대한 자세한 내용은 다음을 참조하십시오.

• TLS 인증서
• DNS CNAME
• 환경 구성

1 또는 2를 수행하십시오.

1. SLAS 개인 클라이언트 구성으로 Retail React App 만들기
   • 터미널 창에서 다음 생성기 명령을 실행하여 PWA Kit 앱을 만듭니다. npx @salesforce/pwa-kit-create-app my-hybrid-storefront
   • 자체 Commerce Cloud 인스턴스를사용하는 Retail 앱을 선택합니다 .
   • 터미널의 지침을 따릅니다.
   • ****** SLAS 클라이언트가 비공개입니까? **

또는

2. 또는 미리 설정된 구성으로 Retail React App을 생성하고 앱이 생성되면 SLAS 클라이언트 ID를 프라이빗 클라이언트로 변경할 수 있습니다.
   • 빠른 시작의 단계를 따릅니다.
   • SLAS 프라이빗 클라이언트 사용
   • 하이브리드 인증에 사용되는 SLAS 클라이언트에 범위가sfcc.session_bridge포함되어 있는지 확인합니다.

기본적으로 PWA Kit는 탐색에 History API를 사용합니다. 구매자가 React Router의 구성 요소로 만든 링크를 클릭하면 app/routes.jsx에 정의된 경로 오브젝트의 경로와 일치하는 구성 요소에 대한 소프트 탐색이 트리거됩니다. PWA Kit 페이지 이외의 페이지(예: SFRA가 제공하는 페이지)에 연결하려면 해당 URL 경로 이름과 일치하는 경로를 app/routes.jsx에서 제거해야 합니다.

1. 템플릿 확장성을 사용하여 Retail React App 템플릿 버전 3.x로 PWA Kit 프로젝트를 생성한 경우 JavaScript를overrides/app/routes.jsx사용하여 PWA Kit가 아닌 페이지에 대한 링크를 필터링하도록 파일을 재정의할 수 있습니다.

   필터링/cart``/checkout하고 라우팅하기 위한 모든 변경 사항이 포함된 파일의 재정의overrides/app/routes.jsx예제를 만들었습니다. 이공개 gist의 예제 재정의 코드를 사용자 지정하여 PWA Kit가 아닌 페이지에 대한 링크를 필터링합니다.

2. 마지막으로 app/routes.jsx에서 PWA 캐치올 경로(/*)를 업데이트합니다. PWA <PageNotFound /> 구성요소를 기본 오리진에 대한 리디렉션으로 바꿉니다.

• 사이트에서 commerce-sdk-react를 사용하는 경우 다음으로 업그레이드하십시오**@salesforce/commerce-sdk-react@3.2.0** .

하이브리드 인증이 활성화되면 SLAS /oauth2/token요청에는 응답의 헤더를 사용하는 세션 브리지dwsid가Set-Cookie포함됩니다.

Managed Runtime에서 쿠키 통과를 사용하도록 설정합니다.

1. Managed Runtime Admin에 로그인합니다.
2. 프로젝트 및 환경으로 이동합니다.
3. 환경 설정을 클릭합니다.
4. Advanced(고급** ) 섹션으로 스크롤하고 Edit(편집 ) **버튼을 선택합니다.
5. 쿠키옆에 있는 스위치를 활성화합니다 .
6. 고급섹션으로다시 스크롤하고 업데이트를선택합니다 .
7. 스토어프런트 번들이 다시 배포될 때까지 기다립니다.

B2C Commerce 하이브리드 인증으로 마이그레이션하면 PWA Kit에서 더 이상 플러그인 SLAS를 사용하지 않습니다. 하이브리드 스토어프런트에서 플러그인 SLAS를 제거하려면:

1. 관리 > 사이트 > 사이트 관리 > 로이동하여 사이트를선택합니다.
2. 설정탭으로이동합니다.
3. 카트리지 경로에서 플러그인 SLAS를 제거합니다.
4. 구매자 인증과 관련된 코드 사용자 지정이 있지만 플러그인 SLAS에만 국한되지 않는 경우 그대로 계속 작동해야 합니다.
   • 플러그인 SLAS 관련 맞춤설정을 수행한 경우 해당 맞춤설정을 검토하세요. 이러한 변경 사항이 필요하지 않거나 다른 카트리지에서 변경 사항을 다시 구현해야 할 수 있습니다.
   • 모범 사례를 따르십시오. 모든 코드 맞춤 설정은 즉시 사용 가능한 SFRA 카트리지 코드가 아니라 별도의 카트리지에서 구현해야 합니다.
   • 하이브리드 인증으로 전환할 때 사용자 지정 카트리지 코드가 세션 브리징 끝점을 호출하지 않는지 확인합니다. 이로 인해 구매자 세션에서 문제가 발생합니다. 이제 하이브리드 인증이 구매자 세션을 자동으로 처리합니다.

SFRA 전용 사이트의 경우 구매자 로그인 확장에 대해 하이브리드 인증이 활성화되면 DNT 값이 확장 세션에 자동으로 동기화되어 세션 간에 원활한 경험이 보장됩니다.

• Business Manager에서 추적 금지(DNT) 동기화를 활성화/비활성화하려면 판매자 도구 > 로 이동하여사이트 > 사이트 기본 설정 > 하이브리드 인증 설정을선택합니다.

하이브리드 인증과 DNT 동기화를 모두 활성화하면 한 사이트에서 구매자가 제공한 추적 동의가 다른 사이트와 자동으로 동기화됩니다. 예를 들어 홈 페이지는 PWA Kit에서 실행되고 카트 페이지는 SFRA에서 실행되는 하이브리드 사이트의 경우:

• 홈 페이지(PWA Kit)에서 구매자에게 동의 양식이 표시되고 추적 기본 설정이 제공됩니다.
• 구매자가 카트 페이지(SFRA)로 이동하면 PWA Kit의 DNT 값이 SFRA와 동기화됩니다.
• 따라서 SFRA 카트 페이지에서 구매자에게 추적 동의를 다시 요청하지 않습니다.

기본 DNT 구현을 사용자 지정했거나 사용자 지정할 계획인 경우 기본 동기화가 필요하지 않거나 예상대로 작동하지 않을 수 있습니다. 이러한 경우 사이트 기본 설정을 사용하여 DNT 동기화를 사용하지 않도록 설정할 수 있습니다. DNT 동기화가 꺼져 있어도 하이브리드 인증을 계속 사용하도록 설정할 수 있습니다.

SFRA와 PWA Kit 간의 DNT 쿠키 만료에는 다음과 같은 주요 차이점이 있습니다.

• SFRA는 세션이 끝날 때 DNT 쿠키가 만료되도록 설정합니다.
• PWA Kit는 새로 고침 토큰의 수명(예: 비회원 구매자의 경우 30일)과 일치하도록 만료를 설정합니다.

구매자가 PWA Kit 페이지에서 SFRA 페이지로 이동하면 DNT 쿠키의 만료가 새로 고침 토큰의 만료에서 세션 기반 만료로 변경됩니다. 구매자가 브라우저를 닫으면 쿠키가 삭제됩니다. 따라서 구매자가 다시 돌아오면 추적 동의 배너가 예상대로 다시 표시됩니다.

로컬 환경에서 하이브리드 설정을 테스트하는 것이 좋습니다. eCDN은 SIG 및 ODS를 지원하지 않으므로 이렇게 하려면 역방향 프록시를 설정해야 합니다. SIG 인스턴스에서 로컬로 하이브리드 사이트를 설정하고 테스트하려면 자체 역방향 프록시 또는 CDN을 사용하여 트래픽을 분할해야 합니다.

PWA Kit 및 SFRA/SiteGenesis에 걸친 하이브리드 배포 구매자 흐름을 개발하고 테스트하는 데 사용할 수 있는 샘플 Node.js 앱을 만들었습니다. 역방향 프록시를 설정하기 위한 설정, 구성 및 테스트 지침은 리포지토리에 대한추가 정보에설명되어 있습니다.

프로덕션 구성과 유사한 별칭 구성을 사용하도록 ODS를 구성할 수 있습니다. 이렇게 하면 로컬 설정과 프로덕션 설정을 동일하게 유지하는 데 도움이 될 수 있습니다. 예를 들어 / URI에서 하이브리드 사이트를 사용할 수 있도록 샌드박스를 구성하면, 사이트 ID를 포함하도록 pwa-kit에서 전송한 URL을 변환할 필요가 없습니다. 일반적으로 프로덕션 사이트는 이렇게 구성됩니다.

Business Manager에서 별칭을 활성화하려면 Trailhead의 Salesforce B2C Commerce 호스트 이름 별칭에 대한 이 모듈의 지침을 따르십시오.

모든 발신 URL(예: SFRA용 URL)에 /s/SiteID 접두사를 포함하도록 PWA Kit 경로 설정을 구성할 수 있습니다. 이렇게 하면 인스턴스에서 호스트 이름 별칭을 명시적으로 구성할 필요 없이 샌드박스에서 일반적으로 사용되는 방식으로 컨트롤러 URL을 수신할 수 있습니다. 이는 프로덕션 구성에 적합하지 않을 수 있으므로, 프로덕션 배포와 샌드박스 배포 간에 서로 다른 캐치올 경로를 설정할 수 있습니다.

경로 접두사를 구성하려면 app/routes.jsx 또는 overrides/app/routes.jsx에서 PWA 캐치올 경로(/*)를 업데이트합니다.

• 하이브리드 구현에서 컴포저블 스토어프런트 사용
• 하이브리드 인증
• 하이브리드 구현 지침
• 플러그인 SLAS를 사용하여 하이브리드 스토어프런트 구성
• Tracking Consent Banner(추적 동의 배너)로 개인정보보호를 참조하십시오.
• 컴포저블 스토어프런트 시작하기