¿Listo para que iniciar sesión en tu sitio web sea pan comido? Sumérgete en nuestra guía paso a paso sobre la integración de Google OAuth 2.0 para el inicio de sesión en sitios web de terceros. Te guiaremos a través del proceso, facilitando la mejora de la experiencia del usuario y el aumento de la seguridad.
Antes de comenzar, primero entendamos qué es OAuth 2.0.
¿Qué es OAuth 2.0?
OAuth 2.0 es un protocolo de autorización estándar abierto que permite a las aplicaciones de terceros acceder a recursos protegidos sin proporcionar el nombre de usuario y la contraseña del usuario. Permite a los usuarios autorizar a aplicaciones de terceros a acceder a sus recursos protegidos sin revelar directamente sus credenciales. OAuth 2.0 se utiliza ampliamente en aplicaciones web y móviles para proporcionar un mecanismo de autorización seguro.
El protocolo OAuth 2.0 involucra los siguientes roles:
- Propietario del recurso: Generalmente el usuario, que posee los recursos protegidos, como fotos, perfiles personales, etc.
- Cliente: La aplicación de terceros que desea acceder a los recursos protegidos del propietario del recurso.
- Servidor de autorización: El servidor responsable de autenticar al propietario del recurso y autorizar al cliente a acceder a los recursos.
- Servidor de recursos: El servidor que almacena los recursos protegidos y proporciona API para acceder a ellos.
El protocolo OAuth 2.0 logra la autorización a través del Flujo de Autorización. Los flujos de autorización comunes incluyen:
- Concesión de código de autorización: El cliente redirige al usuario al servidor de autorización, el usuario inicia sesión y autoriza, y el servidor de autorización devuelve un código de autorización al cliente, que el cliente utiliza para intercambiar por un token de acceso.
- Concesión de credenciales de contraseña del propietario del recurso: El propietario del recurso proporciona directamente el nombre de usuario y la contraseña al cliente, y el cliente utiliza estas credenciales para solicitar un token de acceso al servidor de autorización.
- Concesión de credenciales de cliente: El cliente utiliza sus propias credenciales para solicitar directamente un token de acceso al servidor de autorización, adecuado para los casos en que el propio cliente necesita acceder a los recursos.
- Concesión implícita: Se utiliza para obtener directamente un token de acceso del cliente en una aplicación basada en navegador.
Google OAuth 2.0 Concesión Implícita: Implementación y depuración con Apidog
Google utiliza el flujo de Concesión Implícita para la autorización OAuth 2.0 en la web, así que echemos un vistazo a cómo implementarlo y cómo depurarlo en Apidog.
Paso 1: Configurar el ID de cliente y la URL de redireccionamiento
Primero debemos visitar la Consola de API de Google para obtener las credenciales de OAuth 2.0. Haz clic en la opción "Credenciales" en la barra lateral izquierda, luego crea un ID de cliente de OAuth.
Luego, selecciona el tipo de aplicación, que puede ser un sitio web, una aplicación de Android o iOS, según tu negocio. A continuación, en el campo "Orígenes de JavaScript autorizados", introduce el dominio de tu sitio web.
Si es una depuración local, generalmente se establece en http://localhost o http://localhost:8000 si hay un puerto. El propósito es que Google conozca la fuente HTTP donde está alojado tu sitio web. Luego, en el campo "URI de redireccionamiento autorizados", introduce tu dirección de redireccionamiento, que generalmente es tu ruta de inicio de sesión o cualquier otro dominio al que puedas acceder.
Después de configurar todas las opciones relevantes, haz clic en el botón "CREAR" para guardarlas. Esto generará el ID de cliente y el secreto de cliente, que necesitaremos usar más adelante.
Paso 2: Configurar la página de solicitud de permisos de OAuth
En la página, haz clic en la opción "Pantalla de consentimiento de OAuth" en la barra lateral izquierda para crear una aplicación.
Configurar la pantalla de consentimiento de OAuth
En esta página, completa la información básica de la aplicación, como el nombre, el correo electrónico y el dominio. Esta información de la página se mostrará en el cuadro de inicio de sesión de autorización emergente, lo que puede ayudar al usuario final a comprender quién eres y cómo contactarte.
A continuación, configura los scopes. Ve al siguiente paso y selecciona los permisos a los que deseas acceder, luego guárdalos.
También puedes agregar una cuenta de prueba, que es una cuenta de correo electrónico que puede realizar el inicio de sesión de OAuth 2.0 antes del lanzamiento oficial, con un límite de hasta 100 usuarios permitidos.
Después de completar la configuración anterior, podemos ingresar oficialmente al flujo principal de la autorización OAuth 2.0.
Paso 3: Obtener el token de acceso
Una vez que el primer y segundo paso estén listos, podemos ir a solicitar el token de acceso. Para demostrar este paso, utilizaremos Apidog, una excelente herramienta de depuración y gestión de API. Puedes obtener directamente el token en Apidog.
Características clave de Apidog en la implementación del flujo de inicio de sesión de Google OAuth 2.0:
- Configuración simplificada: Apidog proporciona una interfaz de configuración centralizada, que permite a los desarrolladores ingresar fácilmente el ID de cliente, la URL de redireccionamiento y otros parámetros clave, sin la necesidad de construir manualmente URL de solicitud de autorización complejas.
- Selección inteligente del modo de autorización: Apidog admite la identificación automática del modo de autorización de Google y proporciona la capacidad de seleccionar el modo de Concesión Implícita, eliminando la molestia de cambiar entre diferentes modos de autorización.
- Adquisición de token de acceso con un solo clic: Apidog puede guiar a los desarrolladores a través de todo el flujo de autorización y obtener automáticamente el token de acceso, lo que reduce en gran medida la dificultad de la adquisición de tokens.
- Gestión automática de tokens: Apidog agregará automáticamente el token de acceso obtenido al encabezado de la solicitud o a los parámetros de consulta, sin requerir que el desarrollador maneje manualmente la transmisión del token.
- Acceso perfecto a los recursos: Con el token de acceso proporcionado por Apidog, los desarrolladores pueden usarlo directamente para acceder a los recursos abiertos de Google, sin la necesidad de una autorización compleja adicional.
En Apidog, crea un nuevo proyecto HTTP, luego crea una nueva solicitud y selecciona la opción "Editar documento -> Auth -> OAuth 2.0".
Selecciona el modo de autorización "Implícito", ya que "OAuth 2.0 para aplicaciones web del lado del cliente" de Google utiliza la Concesión Implícita.
Introduce el ID de cliente y la URL de redireccionamiento. Los parámetros del servicio Google OAuth 2.0 que configuraste en el primer paso.
Obtención de un token de acceso
Según la documentación oficial de Google, para solicitar un token de acceso, la URL a solicitar es:
https://accounts.google.com/o/oauth2/v2/auth
Puedes completar esta dirección en el campo de entrada "URL de autenticación".
La documentación oficial de Google también requiere que se incluyan parámetros adicionales en la ruta de la URL, como:
https://accounts.google.com/o/oauth2/v2/auth?
scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
include_granted_scopes=true&
response_type=token&
state=state_parameter_passthrough_value&
redirect_uri=https%3A//oauth2.example.com/code&
client_id=client_id
Nota: En las aplicaciones reales, no se necesitan saltos de línea.
Sin embargo, en Apidog, esto generalmente no es necesario, ya que los parámetros requeridos se han configurado por separado en otras opciones.
Si deseas configurarlos, puedes hacer clic en el icono junto a la "URL de autenticación" para configurar, o hacer clic en "Más" para expandir otros elementos de configuración, como agregar el valor openid al "Scope" aquí, que es el permiso seleccionado en el "Paso 2" anterior.
Después de configurar todos los elementos de configuración anteriores, puedes hacer clic en el botón "Obtener token" para obtener el token. Después de hacer clic, si es la primera vez que inicias sesión, aparecerá una ventana para que autorices y puedas completar la información.
Después de ingresar el nombre de usuario y la contraseña, es posible que recibas un código de verificación por mensaje de texto para verificar tu cuenta, o puedes asociar directamente la cuenta y obtener el token de acceso.
Una vez que se complete la autorización, el token de acceso se obtendrá y mostrará automáticamente en la página, y también se analizará y mostrará otra información devuelta por Google.
Paso 4: Acceder a recursos abiertos basados en el token
Con el token de acceso obtenido, ahora puedes usarlo para acceder a los recursos abiertos de Google. Puedes explorar todas las API de Google disponibles y sus ámbitos de permisos en el OAuth 2.0 Playground.
Al enviar solicitudes, Apidog adjuntará automáticamente el token al encabezado de autorización como un token de portador. Si deseas incluir el token en la URL, puedes modificar la opción "Posición de adición de token" en la configuración de Apidog a "Parámetros de consulta".
Conclusión
En resumen, la implementación del inicio de sesión de Google OAuth 2.0 consta de cuatro pasos principales. Primero, en el paso 1, debes configurar el ID de cliente y la URL de redireccionamiento para obtener las credenciales de OAuth 2.0. Luego, en el paso 2, debes determinar el alcance de los permisos de acceso y crear una aplicación, configurando la información relevante, incluidos los permisos accesibles y las cuentas de prueba.
A continuación, en el paso 3, puedes obtener el token de acceso a través de la solicitud de token, con la ayuda de una herramienta como Apidog. Finalmente, en el paso 4, puedes usar el token de acceso obtenido para acceder a los recursos abiertos de Google.
