Configurar inicio de sesión con Facebook y Google

Conceptos básicos de autenticación

En VTEX, no es necesario crear una cuenta o iniciar sesión para realizar una compra. Sin embargo, si el cliente desea editar la información proporcionada en su primera compra, deberá verificar su email.

El comportamiento nativo de la plataforma es ofrecer opciones de inicio de sesión con email y contraseña y con código de acceso al email del cliente. También ofrecemos integraciones opcionales nativas con Google y Facebook que requieren configuración. Esta guía explica los pasos para configurar los proveedores de inicio de sesión:

Obtener credenciales de los proveedores
Configurar inicio de sesión con los proveedores
Validar la configuración

Obtener credenciales de los proveedores

Antes de configurar nuestra integración de inicio de sesión con Google y Facebook, se deben crear credenciales de OAuth 2.0 (protocolo para la integración) en esos servicios. Para obtenerlas, sigue las instrucciones en los artículos a continuación:

Configurar inicio de sesión con los proveedores

Después de realizar la configuración en Facebook y Google, debes configurar la opción de inicio de sesión mediante el proveedor deseado en el Admin VTEX. En ambos casos, debes tener listos el Client ID y el Client Secret proporcionados por los proveedores.

En la barra superior del Admin VTEX, haz clic en el avatar de tu perfil que tiene la inicial de tu email.
Haz clic en Configuración de la cuenta > Autenticación.

Se te redirigirá a la pestaña Tienda virtual de la página Autenticación, que lista los métodos de inicio de sesión disponibles en tu tienda.

${"base64":" ","img":{"width":1607,"height":990,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":82425,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Authentication/Authentication%20basics/configurar-inicio-de-sesion-con-facebook-y-google_1.png"}}$

3. En la fila del proveedor de inicio de sesión deseado, haz clic en Configurar.

Rellena el formulario con el Client ID y el Secreto del cliente registrados en la etapa anterior y haz clic en Guardar.

${"base64":" ","img":{"width":939,"height":543,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":20308,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Authentication/Authentication%20basics/configurar-inicio-de-sesion-con-facebook-y-google_2.PNG"}}$

5. En la página Autenticación, activa el uso del proveedor haciendo clic en el botón de alternancia.

${"base64":" ","img":{"width":2780,"height":1514,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":156217,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Authentication/Authentication%20basics/configurar-inicio-de-sesion-con-facebook-y-google_3.png"}}$

Validar la configuración

Después de completar la configuración en el Admin VTEX, recomendamos probar el inicio de sesión con el proveedor a través de la URL final que tus usuarios utilizarán para acceder a la tienda. Al probar el inicio de sesión, se mostrarán las opciones de los proveedores activos.