Configurar um Storefront híbrido com autenticação híbrida

Com o B2C Commerce versão 25.3, a autenticação híbrida (auth) substitui a opção de plug-in SLAS cartucho.

A autenticação híbrida é uma solução autônoma para implementações de site que precisam de autorização Storefront Reference Architecture (SFRA)/SiteGenesis (SG) e autorização Shopper Login and API Access Service (SLAS). Isso significa que você precisa de um dwsid (SFRA/Site Genesis) e um JSON Web Token (SLAS), e esses tokens devem ser mantidos em sincronia. A autenticação híbrida é uma melhoria em relação à abordagem de SLAS de plug-ins, oferecendo um método mais eficiente e simplificado.

A autenticação híbrida melhora o desempenho e a estabilidade de lojas (virtuais) híbridas movendo o recurso diretamente para a plataforma do B2C Commerce.

Este guia explica como configurar a autenticação híbrida para uma vitrine híbrida que faz parte SFRA/SiteGenesis e parte da Storefront componível.

Para obter mais informações sobre autenticação híbrida, consulte Autenticação híbrida.

As tarefas envolvidas em uma implementação híbrida com autenticação híbrida incluem:

1. Conclua as etapas em Autenticação híbrida.
2. Configurar autenticação híbrida para Storefront componível (obrigatório).
3. Use as zonas CDN da Commerce API para encaminhar o tráfego para o tempo de execução gerenciado. Consulte as APIs da CDN para obter distribuições sem cabeça em fases (obrigatório).
4. Obtenha o Analytics usando Atividades do Einstein para implementações headless em fases (opcional)

Para usar a autenticação híbrida, crie seu site com:

• commerce-sdk-react@3.3.0 ou posterior

• Progressive Web App (PWA) Kit versão 3.10 ou posterior

A tabela a seguir compara PWA Kit suporte a recursos para Plugin SLAS versus Hybrid Auth.

*O suporte está planejado para uma versão futura.

Para configurar a autenticação híbrida para uma vitrine híbrida que faz parte SFRA/SiteGenesis e parte da Storefront componível, siga estas etapas descritas em detalhes neste guia.

• Configure as Regras de origem da Rede de Distribuição de Conteúdo Incorporado (eCDN).
• Crie um PWA Kit Retail React App.
• Atualizar PWA Kit rotas.
• Atualize @salesforce/commerce-sdk-react.
• Ative os cookies no tempo de execução gerenciado.
• Remova o SLAS do plug-in do caminho do cartucho.
• Ativar/desativar a sincronização Não rastrear.

Configure a rede de distribuição de conteúdo incorporada (eCDN) para enviar solicitações de página na parte superior do funil para a vitrine composta: página inicial (/), página de listagem de categorias (/category) e página de detalhes do produto (/product). Essas páginas são implantadas em um ambiente MRT (Managed Runtime) em execução no mystorefront.mobify-storefront.com. Quando o comprador decide fazer uma compra, o eCDN redireciona o comprador para a página de checkout do SFRA/SG existente em execução no www.mystorefront.com.

• Para usar as zonas CDN da Commerce API para rotear o tráfego para o tempo de execução gerenciado, siga as etapas em APIs de CDN para implementações híbridas.

Para obter mais informações sobre roteamento de tráfego para MRT, consulte:

• Certificados TLS
• DNS CNAME
• Configurar seu ambiente

Faça 1 ou 2.

1. Criar um Retail React App com SLAS configuração de cliente privado
   • Crie um aplicativo PWA Kit executando o seguinte comando de gerador em uma janela de terminal: npx @salesforce/pwa-kit-create-app my-hybrid-storefront
   • Selecione O aplicativo de varejo usando sua própria instância de Commerce Cloud.
   • Siga as instruções no terminal.
   • Responda Sim quando perguntado Seu cliente SLAS é privado?

ou

2. Como alternativa, você pode gerar um Retail React App com uma configuração predefinida e alterar o ID do cliente SLAS para seu cliente particular depois que o aplicativo for gerado.
   • Siga as etapas no Início Rápido.
   • Usar um cliente SLAS privado
   • Verifique se o SLAS Client usado para autenticação híbrida inclui o sfcc.session_bridge escopo.

Por padrão, o PWA Kit usa a History API para navegação. Quando um comprador clica em um link criado com o componente do React Router, é acionada uma navegação “soft” até o componente que corresponde ao objeto de rota definido em app/routes.jsx. Para vincular uma página que não use o PWA Kit (alimentada pelo SFRA, por exemplo), é preciso remover todas as rotas que correspondam ao nome do caminho do URL em app/routes.jsx.

1. Se seu projeto PWA Kit foi gerado com a versão 3.x do modelo Retail React App usando a extensibilidade do modelo, você pode substituir o overrides/app/routes.jsx arquivo para filtrar links para páginas que não PWA Kit usando JavaScript.

   Criamos um exemplo de substituição do overrides/app/routes.jsx arquivo com todas as alterações em vigor para filtrar e /cart /checkout rotetar. Personalize o código de substituição de exemplo nesta essência pública para filtrar links para páginas que não PWA Kit.

2. Por fim, atualize a rota geral do PWA (/*) em app/routes.jsx. Substitua o PWA pelo componente <PageNotFound /> com um redirecionamento para a origem-padrão.

1import {withRouter} from 'react-router-dom'
2    ...
3    {
4        path: '*',
5        component: withRouter((props) => {
6            const {location} = props
7            const urlParams = new URLSearchParams(location.search)
8
9            useEffect(() => {
10                const newURL = new URL(window.location)
11                if (!urlParams.has('redirected')) {
12                    newURL.searchParams.append('redirected', '1')
13                    window.location.href = newURL
14                }
15
16            }, [window.location.href])
17            if (urlParams.has('redirected')) {
18                return <PageNotFound {...props} />
19            }
20            return null
21        })
22    }

• Se seu site usa commerce-sdk-react, atualize para @salesforce/commerce-sdk-react@3.2.0 ou posterior.

Quando a Autenticação híbrida está habilitada, SLAS /oauth2/token solicitações contêm uma ponte dwsid de sessão usando o Set-Cookie cabeçalho na resposta.

Em Managed Runtime, habilite a passagem de cookies:

1. Faça logon no Managed Runtime Admin.
2. Navegue até seu projeto e ambiente.
3. Clique em Environment Settings (Configurações do ambiente).
4. Role até a seção Avançado e selecione o botão Editar.
5. Ative a opção ao lado de Cookies.
6. Role até a seção Avançado e selecione Atualizar.
7. Aguarde a reimplantação do pacote do Storefront.

Com a migração para o B2C Commerce híbrido auth, PWA Kit não usa mais o Plugin SLAS. Para remover o Plugin SLAS da sua vitrine híbrida:

1. Vá para Administração > Sites > Gerenciar Sites > Selecione Site.
2. Vá para a guia Configurações.
3. Remova o SLAS do plug-in do caminho do cartucho.
4. Se você tiver personalizações de código relacionadas à autenticação do comprador, mas não específicas do SLAS de plug-ins, elas devem continuar funcionando como estão.
   • Se você fez alguma personalização específica do SLAS de plug-ins, revise essas personalizações. Essas alterações podem não ser necessárias ou talvez você precise reimplementá-las em um cartucho diferente.
   • Siga as práticas recomendadas. Todas as personalizações de código devem ser implementadas em um cartucho separado, em vez de diretamente no código do cartucho SFRA pronto para uso.
   • Certifique-se de que, ao alternar para a autenticação híbrida, nenhum código de cartucho personalizado chame pontos de extremidade de ponte de sessão. Isso causará problemas nas sessões do comprador. O Hybrid auth agora cuida das sessões de compra para você.

Para sites somente SFRA, quando a autenticação híbrida está habilitada para a extensão de logon do comprador, o valor DNT é sincronizado automaticamente com a sessão estendida, garantindo uma experiência perfeita entre as sessões.

• Para ativar/desativar a sincronização de não rastrear (DNT) no Business Manager, navegue até Ferramentas do > comerciante Selecione Site Preferências > do site > Configurações de autenticação híbrida.

Quando você habilita a autenticação híbrida e a sincronização DNT, o consentimento de rastreamento fornecido por um comprador em um site é sincronizado automaticamente com o outro site. Por exemplo, em um site híbrido em que a home page é executada em PWA Kit e a página do carrinho é executada em SFRA:

• Na página inicial (PWA Kit), o comprador recebe um formulário de consentimento e fornece sua preferência de rastreamento.
• Quando o comprador navega até a página do carrinho (SFRA), o valor DNT de PWA Kit é sincronizado com SFRA.
• Como resultado, a página SFRA carrinho não solicita novamente ao comprador o consentimento de rastreamento.

Se você personalizou ou planeja personalizar a implementação de DNT padrão, a sincronização padrão pode não ser necessária nem funcionar conforme o esperado. Nesses casos, você pode desabilitar a sincronização DNT usando uma preferência de site. Você ainda pode habilitar a autenticação híbrida mesmo se a sincronização DNT estiver desativada.

Há uma diferença fundamental na expiração do cookie DNT entre SFRA e PWA Kit:

• SFRA define o cookie DNT para expirar no final da sessão.
• PWA Kit define a expiração para corresponder à vida útil do token de atualização (por exemplo, 30 dias para compradores convidados).

Quando um comprador se move de uma página de PWA Kit para uma página de SFRA, a expiração do cookie DNT muda da expiração do token de atualização para uma expiração baseada em sessão. Se o comprador fechar o navegador, o cookie será excluído. Como resultado, quando o comprador retorna, o banner de consentimento de rastreamento é exibido novamente como esperado.

É altamente recomendável testar sua configuração híbrida em um ambiente local. Para fazer isso, você deve configurar um proxy reverso porque o eCDN não oferece suporte a SIGs e ODS. Para configurar e testar seu site híbrido localmente em instâncias SIG, você deve usar seu próprio proxy reverso ou CDN para dividir o tráfego.

Criamos um exemplo de aplicativo Node.js que pode ser usado para desenvolver e testar fluxos de comprador com implantação híbrida no PWA Kit e no SFRA/SiteGenesis. As instruções de instalação, configuração e teste para configurar o proxy reverso são mencionadas no LEIA-ME do repositório.

Você pode configurar a ODS para usar uma configuração de alias semelhante à configuração de produção. Isso pode ajudar a manter suas configurações locais e de produção idênticas. Por exemplo, configurar sua sandbox de forma que seu site híbrido esteja disponível no URI / assegura que os URLs enviados por pwa-kit não precisem ser traduzidos para incluir o ID do site. É assim que um site de Production é normalmente configurado.

Para habilitar aliases no Business Manager, siga as instruções neste módulo para Aliases de nome de host no Salesforce B2C Commerce no Trailhead.

Você pode configurar suas rotas do PWA Kit para prefixar todos os URLs de saída (por exemplo, aqueles destinados à SFRA) para incluir o prefixo /s/SiteID. Isso assegura que todas as instâncias recebam URLs do controlador da forma normalmente usada em sandboxes sem precisar configurar explicitamente os aliases de nome de host. É importante destacar que isso pode não ser adequado para a configuração de Production. Sendo assim, talvez seja melhor ter uma rota universal diferente para implantações de Production e Sandbox.

Para configurar prefixos de rota, atualize a rota de captura geral do PWA (/*) em app/routes.jsx ou overrides/app/routes.jsx.

1import {withRouter} from 'react-router-dom'
2// extensible
3import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site';
4// non-extensible
5import useMultiSite from './hooks/use-multi-site';
6
7const DEFAULT_SITE_ID = 'RefArch'
8...
9 {
10    path: '*',
11    component: withRouter((props) => {
12        const {location} = props
13        const urlParams = new URLSearchParams(location.search)
14        const {site} = useMultiSite()
15        const siteId = site && site.id ? site.id : DEFAULT_SITE_ID
16        useEffect(() => {
17            const newURL = new URL(window.location)
18            if (!urlParams.has('redirected')) {
19                newURL.searchParams.append('redirected', '1')
20                newURL.pathname = `/s/${siteId}/${window.location.pathname
21                    .split('/')
22                    .slice(2)
23                    .join('/')}`
24                window.location.replace(newURL)
25            }
26        }, [window.location.href])
27        if (urlParams.has('redirected')) {
28            return <PageNotFound {...props} />
29        }
30        return null
31    })
32}

• Usar o Storefront compostável em uma implementação híbrida
• Autenticação híbrida
• Diretrizes de implementação híbrida
• Configurar um Storefront híbrido com SLAS de plug-ins
• Consulte a Política de Privacidade com um Banner de consentimento de rastreamento.
• Como começar no Composable Storefront

j

Para começar

Introdução ao Composable Storefront

Usar o Storefront compostável em uma implementação híbrida

Configurar com autenticação híbrida

Regras da eCDN para implementações híbridas

Einstein Activities para implementações híbridas

Configuração SLAS plug-ins

Estrutura do PWA Kit

Habilidades para o sucesso

Ask the Community

Configurar-se

Construir seu site

Habilitar sua equipe de comerciantes

Testar, iniciar e monitorar

Manter

Português

English

日本語

中文

繁體中文

Français

Deutsch

Italiano

한국어

Português

Español (México)