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 adaptarlo a tus necesidades. Tomemos como ejemplo el conector de GitHub.

Paso 1: Clona un paquete de conector existente​

En una carpeta fuente de un conector, encontrarás los siguientes archivos:

  • index.ts: El archivo principal de entrada 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 deberás proporcionar un archivo README.md para describir el conector, un logo.svg (opcionalmente un logo-dark.svg para una mejor experiencia en modo oscuro) y un archivo package.json para definir la información del paquete npm.

Paso 2: Modifica el archivo principal de entrada (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: Genera 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: Protege los valores de los parámetros devueltos en el URI de callback de autorización, extrae el code de autorización y maneja posibles errores.
  • getAccessToken: Intercambia el code de autorización por un token de acceso.
  • getUserInfo: Obtiene la información del usuario de la plataforma social de terceros con el token de acceso.

La mayoría de las demás lógicas comunes ya están cubiertas 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: Prueba 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 ofrece varias formas de ejecutarse localmente, puedes usar CLI, docker o incluso compilar desde el código fuente. Consulta la documentación para más detalles.
  • Vincula tu conector personalizado a tu instancia de Logto: Usa la 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 y deberías poder verlo en la lista de conectores sociales.
  • Configura tu conector en Consola > Inicio de sesión y cuenta > 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".