El proceso de autorización OAuth 2.0 utilizado por Facebook es la "Autorización mediante código de autorización". Vamos a presentar cómo implementarlo y cómo depurarlo en Apidog.
¿Qué es OAuth 2.0?
OAuth 2.0 es un protocolo de autorización ampliamente utilizado que permite el acceso de terceros a recursos protegidos sin necesidad de credenciales de usuario. Implica cuatro roles clave:
- Propietario del recurso: Normalmente, el usuario que posee los recursos protegidos.
- Cliente: La aplicación de terceros que busca acceder a los datos del propietario del recurso.
- Servidor de autorización: Valida al propietario del recurso y otorga autorización al cliente.
- Servidor de recursos: Almacena y gestiona los recursos protegidos, proporcionando APIs para el acceso.
Flujos de autorización comunes
El protocolo OAuth 2.0 implementa la autorización a través de varios flujos de autorización. Los flujos de autorización comunes incluyen:
- Autorización mediante código de autorización: El cliente redirige al usuario al servidor de autorización. Después de que el usuario inicia sesión y otorga permiso, el servidor de autorización devuelve un código de autorización al cliente. A continuación, el cliente intercambia el código de autorización junto con sus credenciales por un token de acceso.
- Autorización mediante código de autorización con PKCE (Proof Key for Code Exchange): Similar al flujo de código de autorización estándar, pero el cliente mejora la seguridad utilizando PKCE (Proof Key for Code Exchange).
- Autorización mediante credenciales de contraseña del propietario del recurso: El propietario del recurso proporciona directamente su nombre de usuario y contraseña al cliente. A continuación, el cliente utiliza estas credenciales para solicitar un token de acceso al servidor de autorización.
- Autorización mediante credenciales de cliente: El cliente solicita directamente un token de acceso al servidor de autorización utilizando sus propias credenciales. Este flujo es adecuado para los casos en que el propio cliente necesita acceder a los recursos.
- Autorización implícita: Se utiliza para obtener un token de acceso directamente del cliente en una aplicación basada en navegador. Este flujo se utiliza normalmente para aplicaciones frontend web.
Cómo utilizar Facebook OAuth 2.0 para iniciar sesión en sitios web de terceros
Paso 1: Crea la aplicación y obtén el ID de cliente y el secreto de cliente
En primer lugar, debes abrir una cuenta de desarrollador de Facebook en https://developers.facebook.com. Después de abrirla, crea una aplicación en ella.
Una vez creada la aplicación correctamente, haz clic en la opción [Configuración de la aplicación->Básica]. El número de aplicación aquí es el ID de cliente (Client ID), y la clave de aplicación es el secreto de cliente (Client Secret). Necesitaremos estos dos atributos más adelante.
Paso 2: Configura la dirección de callback
Una vez creada la aplicación, también debes establecer la "dirección de callback" en el panel de control, haz clic en la opción [Panel de control -> Personalizar esta aplicación] y, a continuación, haz clic en "Configuración de inicio de sesión de Facebook" para acceder a la interfaz de configuración.
En el elemento "URI de salto OAuth válidos" de la interfaz de configuración, rellena la dirección de callback (Callback URL), que es la dirección de redireccionamiento. Normalmente es el nombre de dominio de tu servidor (Facebook requiere que empiece por https).
Si aún no tienes uno, puedes rellenarlo primero, siempre y cuando te asegures de que se puede acceder al nombre de dominio. Una vez completada la configuración, guárdala.
El propósito de que necesitemos la "dirección de callback" es obtener el código de autorización (code) en la barra de direcciones. Generalmente, después de rellenar el nombre de usuario y la contraseña en la página de inicio de sesión de OAuth 2.0, se redirigirá a la "dirección de callback" y se puede mostrar en la barra de direcciones.
Obtén el código de autorización (code). La siguiente barra de direcciones se utiliza para obtener el valor del código manualmente:
Una vez configurada la información anterior, entramos oficialmente en el proceso principal de autorización de OAuth 2.0.
Paso 3: Obtener el token de acceso
Cuando el primer y segundo paso anteriores estén listos, podemos solicitar un token de acceso (Token). Demostraremos este paso a través de Apidog.
Apidog es una excelente herramienta de depuración y gestión de APIs, puedes obtener el token de acceso directamente en Apidog. Si aún no tienes Apidog instalado, ¡descárgalo ahora!
- Crear solicitud HTTP Después de crear un proyecto HTTP en Apidog, ábrelo y, a continuación, crea una solicitud en el proyecto, elige la opción "Editar documento -> Auth -> OAuth 2.0".
2. Configurar el ID de cliente, el secreto de cliente y la URL de callback El modo de autorización predeterminado seleccionado en la página OAuth 2.0 en Apidog es Código de autorización, ya que Facebook OAuth 2.0 también utiliza Código de autorización. Por lo tanto, no es necesario cambiar aquí.
A continuación, busca el ID de cliente y la URL de callback en la parte inferior de la página y rellena el ID de cliente, el secreto de cliente y la URL de callback configurada obtenidos del servicio Facebook OAuth 2.0. Los parámetros específicos son las configuraciones mencionadas en el "Paso 1, Paso 2" anterior.
3. Configurar la URL de solicitud del código de autorización Según la documentación oficial de Facebook, durante la autenticación de OAuth 2.0, la URL de solicitud del código de autorización es: https://www.facebook.com/v19.0/dialog/oauth
Simplemente rellena esta URL de solicitud del código de autorización en la URL de Auth. Esta URL se puede entender como la página de autorización de inicio de sesión. Abre esta página (en forma de ventana en el lado del cliente) al verificar el estado de inicio de sesión por primera vez, pidiéndote que introduzcas tu nombre de usuario y contraseña.
Normalmente, al construir manualmente una página de autorización de inicio de sesión, se requieren parámetros adicionales en la URL de autorización, como:
https://www.facebook.com/v19.0/dialog/oauth?
client_id={app-id}
&redirect_uri={redirect-uri}
&state={state-param}
Nota: La continuación de los parámetros no debe tener saltos de línea normalmente.
Sin embargo, en Apidog, generalmente no se necesitan parámetros adicionales después de la URL base. Solo se requiere la ruta antes del signo de interrogación "?" porque otros parámetros obligatorios se configuran por separado en otras opciones. Por supuesto, si deseas incluir algunos parámetros de consulta, también puedes añadirlos haciendo clic en el icono situado junto a este cuadro de entrada:
También podemos ampliar las opciones "Más" y rellenar los valores de los parámetros que deben rellenarse, como rellenar "Scope" con el permiso requerido "public_profile". El permiso "public_profile" en Facebook permite a la aplicación leer los campos de perfil público predeterminados del nodo de usuario, y este permiso se concede automáticamente a todas las aplicaciones.
En la opción "State", rellena "state", que es para evitar la falsificación de solicitudes entre sitios. Las plataformas de terceros suelen requerir que se rellene esto, por lo que generalmente lo rellenamos, de lo contrario, puede haber errores al obtener el token de acceso.
4. Configurar la URL de solicitud del token de acceso Según la documentación oficial de Facebook, para obtener un token de acceso, la URL solicitada es: https://graph.facebook.com/v19.0/oauth/access_token
Simplemente rellena esta dirección en el campo de entrada URL del token de acceso. Del mismo modo, otros parámetros se han configurado por separado en otros campos de entrada, por lo que no es necesario incluirlos en la URL.
5. Obtener el token de acceso Una vez que se hayan establecido todos los elementos de configuración mencionados anteriormente, puedes hacer clic en el botón "Obtener token" para obtener el token de acceso.
Después de hacer clic, si es tu primer inicio de sesión, aparecerá una ventana pidiéndote tu autorización, donde deberás introducir tu nombre de usuario y contraseña de Facebook. Si estás iniciando sesión desde un nuevo dispositivo, es posible que también necesites tu correo electrónico para una verificación adicional.
Después de introducir tu nombre de usuario y contraseña, se te pedirá que confirmes la autorización.
Haz clic en confirmar para completar la autorización. Una vez autorizado, el token de acceso se obtendrá automáticamente y se mostrará en la página. Al mismo tiempo, también se analizará otra información devuelta por Facebook.
Paso 4: Acceder a recursos abiertos basados en token Con el token de acceso (Token), ahora puedes utilizarlo para acceder a los recursos abiertos de Facebook. Puedes ver qué tipo de recursos abiertos están disponibles en la API de Graph de Facebook.
Por ejemplo, la siguiente API recupera el ID y el nombre del usuario. Si tu interfaz no devuelve nada, es posible que debas comprobar si tienes los permisos necesarios, como se menciona en la Sección 3 del "Paso 3", simplemente configúralo en el Scope. https://graph.facebook.com/v12.0/me?fields=id,name
Al enviar una solicitud, Apidog adjuntará automáticamente el token al encabezado de autorización y lo enviará adjunto a "Bearer".
Si deseas llevar el token en la URL, también puedes modificar la "Añadir ubicación" del token en las opciones de configuración de la página y seleccionar "Parámetros de consulta".
Resumen
OAuth 2.0 es un protocolo de autorización de estándar abierto que permite a las aplicaciones de terceros acceder de forma segura a los recursos protegidos. El proceso de autorización mediante código de autorización es un método de autorización común y es utilizado por Facebook.
Durante la implementación, debes crear una aplicación, configurar una dirección de callback, obtener un token de acceso y utilizar Apidog para la depuración. Después de obtener el token de acceso, puedes utilizar el token para llamar a los recursos abiertos de Facebook.
