Saltar al contenido principal

Guía paso a paso para desarrollar un conector social

La forma más rápida de comenzar es copiar el código de un conector oficial existente y modificarlo para que se ajuste a tus necesidades. Tomemos el conector de GitHub como ejemplo.

Paso 1: Clonar un paquete de conector existente​

En una carpeta de origen del conector, encontrarás los siguientes archivos:

  • index.ts: El archivo de entrada principal del conector.
  • constant.ts: Las constantes utilizadas en el conector.
  • types.ts: Los tipos de TypeScript utilizados en el conector.
  • index.test.ts: Los casos de prueba para el conector.
  • mock.ts: Los datos simulados utilizados en los casos de prueba del conector.

Además de estos archivos, también necesitarás proporcionar un archivo README.md para describir el conector, un logo.svg (opcionalmente un logo-dark.svg para una mejor experiencia de usuario en modo oscuro), y un archivo package.json para definir la información del paquete npm.

Paso 2: Modificar el archivo de entrada principal (index.ts)​

En el archivo index.ts, encontrarás la mayor parte de la lógica del conector. Normalmente hay 4 funciones que necesitas implementar:

  • getAuthorizationUri: Generar el URI de autorización para la plataforma social de terceros. Para GitHub, sería: https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state}. Consulta la documentación para desarrolladores de tu plataforma social objetivo para obtener el URI correcto.
  • authorizationCallbackHandler: Proteger los valores de los parámetros devueltos en el URI de devolución de llamada de autorización, extraer el code de autorización y manejar posibles errores.
  • getAccessToken: Intercambiar el code de autorización por un token de acceso.
  • getUserInfo: Obtener información del usuario de la plataforma social de terceros con el token de acceso.

La mayoría de las otras lógicas comunes han sido manejadas en el kit de conectores de Logto, lo que debería facilitar tu trabajo.

Finalmente, al final del archivo, solo necesitarás exportar el objeto del conector, siguiendo la misma estructura de código que el conector de GitHub.

const createGithubConnector: CreateConnector<SocialConnector> = async ({ getConfig }) => {
  return {
    metadata: defaultMetadata,
    type: ConnectorType.Social,
    configGuard: githubConfigGuard,
    getAuthorizationUri: getAuthorizationUri(getConfig),
    getUserInfo: getUserInfo(getConfig),
  };
};

Paso 3: Probar el conector​

Prueba unitaria​

Primero, escribe algunos casos de prueba unitaria y asegúrate de que las funcionalidades básicas funcionen como se espera.

Prueba local​

  • Configura Logto en tu entorno local: Logto proporciona varias formas de ejecutarse localmente, puedes usar CLI, o docker, o incluso construir desde el código fuente. Consulta la documentación para más detalles.
  • Vincula tu conector personalizado a tu instancia de Logto: Usa el CLI para crear un enlace simbólico de tu conector a la instancia de Logto. Más detalles. 
    cd logto
    npx @logto/cli connector link -p .
  • Después de vincular el conector, deberías verlo en la carpeta <logto-root-path>/packages/core/connectors.
  • Reinicia tu instancia de Logto, ve a la Consola de Administración de Logto, deberías poder verlo en la lista de conectores sociales.
  • Configura tu conector en Consola > Experiencia de inicio de sesión > Registro e inicio de sesión > Inicio de sesión social. Y pruébalo en nuestra aplicación de demostración con la función "Vista previa en vivo".