{"section":"tutorials","requestedLocale":"es","requestedSlug":"crear-autenticacion-oauth2","locale":"es","slug":"crear-autenticacion-oauth2","path":"docs/es/tutorials/autenticación/crear-autenticacion-oauth2.md","branch":"main","content":"Para algunos administradores de tienda, existe la necesidad de crear una autenticación adicional en VTEX con su base propia de logins (inicio de sesión). Por ejemplo: \n- Un “club fidelidad” de clientes, con login y contraseña ya creados en su propia plataforma.\n- Login de empleado para venta en su “tienda de colaboradores”.\n\nDebido a esto, VTEX pone a disposición la __autenticación OAuth2__ integrada a VTEX ID.\n\n> ⚠️ Como este es un asunto con aspectos bastante técnicos, recomendamos el acompañamiento de un compañero o equipo de TI.\n\n### ¿Qué es OAuth2?\n\nOAuth es un protocolo de autorización muy utilizado en aplicaciones web escalables. La versión actual es la 2.0, que utiliza tokens para acceder a sus datos en otro sistema.\n\n### ¿Cuál es la utilidad de OAuth2?\n\nPara las tiendas VTEX, el principal beneficio aportado por OAuth2 es la posibilidad de reaprovechar login y contraseñas ya creados en sistemas externos integrados a VTEX, lo que agiliza el proceso de autenticación cuando es necesario. Es la misma lógica de autenticación vía Facebook y Google+, por ejemplo.\n\n### Guía oficial de referencia\n\nPuede consultar la guía oficial del protocolo OAuth2 en esta dirección: https://tools.ietf.org/html/rfc6749\n\n### Flujo de integración de OAuth2 con VTEX ID\n\nCon base en la documentación oficial, vea a continuación una ilustración que explica la integración de OAuth2 con VTEX ID:\n![oauth2](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/autenticación/crear-autenticacion-oauth2_1.png)\n\nA partir de esta ilustración, vamos a detallar los pasos a seguir.  \n\nNote que cualquier parte del proceso solo se produce exclusivamente por el protocolo __HTTPS__.\n\n### 1. URL de autorización (getAuthorizationCode)\n\nEl usuario (cliente de la tienda) verá la pantalla de login de VTEX ID y optará por utilizar un determinado proveedor de identidad (externo a VTEX).\n\nVTEX ID redirigirá al usuario a una URL de autorización del proveedor de identidad. Naturalmente, esto será un request con el método GET en este servidor.\n\nEsta URL de autorización es proporcionada por el administrador de la tienda y tendrá al menos tres parámetros (querystring):\n\n-Client ID: es el identificador de VTEX ID en el proveedor de identidad; el parámetro tiene nombre libre (sugerido `client_id`) y su valor es determinado por el proveedor (siendo siempre fijo).\n-URL de retorno: se utilizará en los próximos pasos del flujo; su valor es determinado por VTEX ID pero el nombre del parámetro es libre (sugerido `return_url`).\n-\"State\": se utiliza junto a la URL de retorno y tiene nombre y valor determinados por VTEX ID (no se debe alterar).\n\nSi es necesario, VTEX ID acepta la inclusión de parámetros adicionales, bastando indicar el nombre de las claves y sus valores. Recordando que las claves y los valores siempre son fijos.\n\nA partir de la URL de autorización, el usuario pasará por el proceso de autenticación en el proveedor de identidad externo.\n\nAutenticado con éxito, el proveedor deberá redirigir al usuario de nuevo a VTEX ID, de modo que la URL de destino deberá ser:\n\n-La URL de retorno que fue enviada por VTEX ID;\n-junto al parámetro \"state\" (manteniendo su valor original);\n-y un nuevo parámetro, que representará el código de autenticación generado por el proveedor de identidad; su nombre es libre (sugerido `auth_code`).\n\n### 2. URL para el intercambio de código de autorización por código de acceso (getAccessCode)\n\nCuando el usuario regrese a la URL de retorno, VTEX ID capturará el código de autorización para, a partir de los servidores de backend (fuera del browser del cliente), obtener un código de acceso.\n\nEste código de acceso se utilizará para obtener los datos del cliente con seguridad y crear las cookies que identificarán al usuario dentro de los servicios de VTEX.\n\nEsta URL se utilizará necesariamente con el método POST.\n\nEl código de autorización se debe enviar en el cuerpo del request (body), que puede ser tanto en el formato JSON (content-type `application/json`) o form-urlencoded (content-type `application/x-www-form-urlencoded`). Es necesario indicarnos el método deseado y el nombre de la clave que va a representarlo.\n\nParámetros adicionales pueden enviarse en el querystring y/o en el body. Recordando que las claves y los valores siempre son fijos.\n\nPara la seguridad del proceso, VTEX ID necesita el Client ID y Client Secret (el ID es el mismo del inicio del proceso, de modo que estos funcionan como appKey y appToken). Estos se pueden enviar con el header \"Authorization\" o como parámetros en la URL (claves de nombre libre).\n\nEn la respuesta esperamos recibir el código de acceso en el body, que puede ser en el formato JSON  (content-type application/json) o form-urlencoded (content-type application/x-www-form-urlencoded); el nombre de la propiedad es libre, bastando informarla para mapeo.\n\nParámetros adicionales pueden formar parte de la respuesta, pero en principio no son útiles.\n\n### 3. URL para obtener los datos del usuario (getUserInfo)\n\nEsta URL se utilizará necesariamente con el método GET.\n\nEl cliente debe ser reconocido por el propio código de acceso, que se enviará como un header Authorization Bearer. Opcionalmente, este también puede enviarse como parámetro (querystring).\n\nSi es necesario, VTEX ID acepta la inclusión de parámetros adicionales, bastando indicar el nombre de las claves y sus valores. Las claves y los valores siempre son fijos.\n\nEn la respuesta esperamos recibir el e-mail del cliente y su ID en el proveedor de identidad. También es adecuado poner a disposición el nombre del cliente (aunque no es obligatorio). Los datos pueden entregarse en formato JSON (content-type application/json) o form-urlencoded (content-type application/x-www-form-urlencoded).\n\nInformaciones adicionales pueden formar parte de la respuesta, pero en principio no son útiles. \n\n__Importante__: la clave única de la plataforma VTEX es el e-mail. Del lado del proveedor de identidad se puede solicitar otro tipo de información para autenticar a la persona (CPF, CNPJ, login, teléfono, etc.) pero lo que se debe enviar en la integración a VTEX es el e-mail que se ha autenticado. Este escenario atiende B2B, B2C, B2E.\nConcluida esta etapa, el usuario recibirá una cookie con el token de autorización que lo identificará dentro de los servicios de VTEX.\n\n### Ejemplo de uso \n\nA continuación, ejemplificaremos el proceso utilizado para una integración OAuth2 teniendo a Google como proveedor de identidad:\n\n#### getAuthorizationCode \n\nRequest:\n```\nGET https://accounts.google.com/o/oauth2/auth?redirect_uri=https://vtexid.vtex.com.br/VtexIdAuthSiteKnockout/ReceiveAuthorizationCode.ashx&scope=https://www.googleapis.com/auth/userinfo.profile%20https://www.googleapis.com/auth/userinfo.email&access_type=offline&response_type=code&client_id={clientId}&state={state}\n```\n\n#### getAccessCode \n\nRequest:\n```\nPOST https://accounts.google.com/o/oauth2/token\n\nBody: redirect_uri=https://vtexid.vtex.com.br/VtexIdAuthSiteKnockout/ReceiveAuthorizationCode.ashx&grant_type=authorization_code&client_id={clientId}&client_secret={clientSecret}&code={authorizationCode}\n```\n\nResponse:\n```\n{\n\"access_token\" : {accessToken},\n\"expires_in\" : 3600,\n\"id_token\" : {jwt},\n\"token_type\" : \"Bearer\"\n}\n```\n\n#### getUserInfo \n\nRequest:\n```\nGET https://www.googleapis.com/oauth2/v1/userinfo?access_token={accessToken}\n```\n\nResponse:\n```\n{\n\"id\": {id},\n\"email\": {email},\n\"verified_email\": true,\n\"name\": \"Rodrigo Silva de Andrade\",\n\"given_name\": \"Rodrigo\",\n\"family_name\": \"Silva de Andrade\",\n\"link\": \"xxxxxx\",\n\"picture\": \"xxxx\",\n\"gender\": \"male\",\n\"locale\": \"pt-BR\"\n}\n```\n\n## Resumen \n\nUna vez que el servicio está desarrollado y público en Internet, todos los datos de configuración deben ser direccionados a VTEX (vía ticket de soporte) para que sea configurado el ambiente de la tienda e integrado a VTEX ID, poniendo a disposición otra opción de login para sus clientes.\n\n> ℹ️ Si tienes varias tiendas (subcuentas) enumeradas en **Configuraciónes de la cuenta > Gestión de la cuenta > Cuenta**, cada una requerirá su propia configuración de Proveedor de identidad OAuth2.\n\nEn resumen, estos son:\n\n- Todos los endpoints habilitados para HTTPS.\n- Credenciales (client ID y client Secret, o equivalente).\n- Credenciales (usuario/e-mail y contraseña) para las pruebas de configuración.\n- El nombre deseado para el proveedor de identidad, que en el resultado final se mostrará como texto para el botón \"Entrar como \\{nombre del proveedor\\}\".\n\nPara __getAuthorizarionCode__:\n\n- URL del request (método GET).\n- Nombre del parámetro para client ID.\n- Nombre del parámetro para URL de retorno.\n- Parámetros adicionales (si los hay, indicando clave y valor).\n- Clave que contiene el código de autorización (en la respuesta).\n\nPara __getAccessCode__:\n\n- URL del request (método POST).\n- Modo para código de autorización (body en JSON o form-urlencoded).\n- Parámetros adicionales en la URL (si los hay).\n- Parámetros adicionales en el body (si los hay).\n- Modo para credenciales (header Authorization).\n- Formato de la respuesta (body en JSON o form-urlencoded).\n- Clave que contiene el código de acceso (en la respuesta).\n\nPara __getUserInfo__:\n\n- URL del request (método GET).\n- Parámetros adicionales (si los hay).\n- Clave que contiene el ID de usuario (en la respuesta).\n- Clave que contiene el e-mail (en la respuesta).\n- Clave que contiene el nombre (en la respuesta, si existe)."}