Autenticación Social en Aplicaciones Web Usando AWS Cognito y OAuth

La autenticación social permite a los usuarios iniciar sesión en aplicaciones web utilizando sus cuentas de redes sociales como Google y Facebook. AWS Cognito facilita la integración con múltiples proveedores de identidad a través de OAuth, simplificando el manejo de sesiones y permisos. En este artículo, veremos cómo implementar esta funcionalidad en una aplicación web usando React y AWS Cognito. ¿Por qué Usar AWS Cognito para Autenticación Social? AWS Cognito proporciona autenticación segura y escalable, integrándose fácilmente con múltiples proveedores de identidad. Utiliza JWT para manejar sesiones de forma segura, ofreciendo una experiencia de inicio de sesión fluida para los usuarios. Beneficios de esta integración: Inicio de sesión con cuentas populares (Google, Facebook). Gestión segura de sesiones con tokens JWT. Integración directa con aplicaciones frontend modernas. Control de acceso detallado con permisos basados en roles. Arquitectura General AWS Cognito: Manejo de autenticación y almacenamiento de usuarios. OAuth con Google y Facebook: Proveedores de identidad. React: Interfaz frontend. Paso 1: Crear el Pool de Usuarios en AWS Cognito Crear un Pool de Usuarios Ve a la consola de AWS Cognito. Haz clic en Administrar usuarios y luego en Crear un pool de usuarios. Asigna un nombre (por ejemplo, social-login-pool). Habilitar la Autenticación Social Ve a Proveedores de identidad (Identity Providers). Agrega Google y Facebook como proveedores. Configuración de Google Crea un Proyecto de API en la consola de Google Developers. Habilita la API de OAuth 2.0 y obtén el Client ID y Client Secret. Ingresa las credenciales en Cognito. Configuración de Facebook Crea una Aplicación de Facebook en Meta for Developers. Habilita Inicio de Sesión con Facebook y obtén el App ID y App Secret. Ingresa las credenciales en Cognito. Paso 2: Configurar el App Client en Cognito Crea un App Client en el Pool de Usuarios. Habilita Iniciar Sesión en la Web. Activa los siguientes flujos de autenticación: Authorization Code Grant Implicit Grant Configura la URL de redirección (por ejemplo, http://localhost:3000). Anota el App Client ID para usarlo en el frontend. Paso 3: Crear un Dominio en Cognito Para que el flujo de OAuth funcione, necesitas un dominio propio. aws cognito-idp create-user-pool-domain \ --domain my-social-app \ --user-pool-id us-east-1_example Paso 4: Configuración del Frontend con React Instalar Dependencias npm install aws-amplify @aws-amplify/ui-react Configuración de AWS Amplify aws-exports.js const awsConfig = { Auth: { region: "us-east-1", userPoolId: "us-east-1_example", userPoolWebClientId: "example1234", oauth: { domain: "my-social-app.auth.us-east-1.amazoncognito.com", scope: ["email", "openid", "profile"], redirectSignIn: "http://localhost:3000/", redirectSignOut: "http://localhost:3000/", responseType: "code" } } }; export default awsConfig; Inicialización en React index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { Amplify } from 'aws-amplify'; import awsConfig from './aws-exports'; Amplify.configure(awsConfig); ReactDOM.render(, document.getElementById('root')); Paso 5: Implementación de la Autenticación App.js import React, { useEffect, useState } from 'react'; import { Amplify, Auth } from 'aws-amplify'; import awsConfig from './aws-exports'; Amplify.configure(awsConfig); function App() { const [user, setUser] = useState(null); useEffect(() => { Auth.currentAuthenticatedUser() .then(user => setUser(user)) .catch(() => setUser(null)); }, []); const signIn = async () => { try { await Auth.federatedSignIn({ provider: 'Google' }); } catch (error) { console.error("Error al iniciar sesión", error); } }; const signOut = async () => { await Auth.signOut(); setUser(null); }; return ( Autenticación Social {user ? ( Bienvenido, {user.username} Cerrar Sesión ) : ( Iniciar Sesión con Google )} ); } export default App; Uso de Tokens JWT para Sesiones Seguras Una vez autenticado, puedes acceder al token JWT: const getToken = async () => { const session = await Auth.currentSession(); const token = session.getIdToken().getJwtToken(); console.log("JWT Token:", token); }; Buenas Prácticas de Seguridad Renovación de Tokens: Utiliza el flujo de actualización para mantener la sesión activa. Almacenamiento Seguro: No almacenes el token directamente en el localStorage o sessionStorage. Políticas de IAM: Restringe el acceso a los recursos de AWS u

aws cognito-idp create-user-pool-domain \
  --domain my-social-app \
  --user-pool-id us-east-1_example

npm install aws-amplify @aws-amplify/ui-react

const awsConfig = {
  Auth: {
    region: "us-east-1",
    userPoolId: "us-east-1_example",
    userPoolWebClientId: "example1234",
    oauth: {
      domain: "my-social-app.auth.us-east-1.amazoncognito.com",
      scope: ["email", "openid", "profile"],
      redirectSignIn: "http://localhost:3000/",
      redirectSignOut: "http://localhost:3000/",
      responseType: "code"
    }
  }
};

export default awsConfig;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Amplify } from 'aws-amplify';
import awsConfig from './aws-exports';

Amplify.configure(awsConfig);

ReactDOM.render(<App />, document.getElementById('root'));

import React, { useEffect, useState } from 'react';
import { Amplify, Auth } from 'aws-amplify';
import awsConfig from './aws-exports';

Amplify.configure(awsConfig);

function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    Auth.currentAuthenticatedUser()
      .then(user => setUser(user))
      .catch(() => setUser(null));
  }, []);

  const signIn = async () => {
    try {
      await Auth.federatedSignIn({ provider: 'Google' });
    } catch (error) {
      console.error("Error al iniciar sesión", error);
    }
  };

  const signOut = async () => {
    await Auth.signOut();
    setUser(null);
  };

  return (
    <div>
      <h2>Autenticación Social</h2>
      {user ? (
        <div>
          <p>Bienvenido, {user.username}</p>
          <button onClick={signOut}>Cerrar Sesión</button>
        </div>
      ) : (
        <button onClick={signIn}>Iniciar Sesión con Google</button>
      )}
    </div>
  );
}

export default App;

const getToken = async () => {
  const session = await Auth.currentSession();
  const token = session.getIdToken().getJwtToken();
  console.log("JWT Token:", token);
};

Related Posts

The Evolution of Kafka and the Changing Data Landscape ...

Feb 11, 2025  0

Rate Limiting Algorithms: A Deep Dive

Mar 2, 2025  0

cha ne dite di questo codice what do you think about th...

Mar 14, 2025  0