Integración con WordPress

Esta guía te guiará a través del proceso de integración de Logto con WordPress utilizando el plugin OIDC. Pero primero, echemos un vistazo a la experiencia del usuario una vez que la integración esté completa.

El proceso de inicio de sesión con la integración de Logto#

1. El usuario accede a la página de inicio de sesión del sitio de WordPress, que por defecto es [SITE URL]/wp-login.php, y hay un botón para iniciar sesión mediante OIDC.
2. El usuario hace clic en el botón y es redirigido a la página de inicio de sesión de Logto con tu experiencia de inicio de sesión personalizada.
3. El usuario elige un método de inicio de sesión, y Logto autenticará al usuario.
4. Una vez que el usuario esté autenticado, Logto redirigirá al usuario de vuelta al sitio de WordPress.
5. WordPress creará una nueva cuenta de usuario o iniciará sesión en la cuenta de usuario existente, y redirigirá al usuario a la página anterior.

Ahora que hemos visto el resultado final de la integración de Logto con WordPress, arremanguémonos y sumerjámonos en el proceso de integración.

Prerrequisitos#

Antes de comenzar, asegúrate de tener lo siguiente:

1. Un sitio de WordPress: Se requiere un sitio de WordPress completamente operativo. Asegúrate de tener acceso administrativo para gestionar plugins y configurar ajustes.
2. Una instancia de Logto: Crea una nueva instancia de Logto visitando el Logto Console o aloja tu propia instancia siguiendo la guía de instalación.

Pasos de integración#

Paso 1: Crear una aplicación en Logto#

1. Visita el Logto Console.
2. Navega a "Aplicaciones" y haz clic en "Crear aplicación".
3. Haz clic en "Crear aplicación sin framework".
4. Selecciona "Web Tradicional" como tipo de aplicación.
5. Nombra tu aplicación y haz clic en "Crear aplicación".

Paso 2: Instalar el plugin#

1. Inicia sesión en tu sitio de WordPress.
2. Navega a "Plugins" y haz clic en "Añadir nuevo".
3. Busca "OpenID Connect Generic" e instala el plugin de daggerhart.
4. Activa el plugin.

Paso 3: Configurar el plugin#

1. Abre la configuración del plugin navegando a "Ajustes" > "OpenID Connect Generic".
2. Rellena los siguientes campos:
   • ID de Cliente: El ID de la aplicación de tu aplicación Logto.
   • Secreto de Cliente: El secreto de la aplicación de tu aplicación Logto.
   • Alcance de OpenID: Ingresa email profile openid offline_access.
   • URL del Endpoint de Inicio de Sesión: La URL del endpoint de autorización de tu aplicación Logto, que es https://[tenant-id].logto.app/oidc/auth, puedes hacer clic en "mostrar detalles del endpoint" en la página de la aplicación Logto para obtener la URL.
   • URL del Endpoint de Información del Usuario: La URL del endpoint de información del usuario de tu aplicación Logto, que es https://[tenant-id].logto.app/oidc/me.
   • URL del Endpoint de Validación de Tokens: La URL del endpoint de validación de tokens de tu aplicación Logto, que es https://[tenant-id].logto.app/oidc/token.
   • URL del Endpoint de Cierre de Sesión: La URL del endpoint de cierre de sesión de tu aplicación Logto, que es https://[tenant-id].logto.app/oidc/session/end.
   • Clave de Identidad: La clave única en el token ID que contiene la identidad del usuario, puede ser email o sub, dependiendo de tu configuración.
   • Clave de Apodo: La clave en el token ID que contiene el apodo del usuario, puedes configurarla como sub y cambiarla más tarde.

Paso 4: Configurar la aplicación#

1. En la configuración del plugin, desplázate hacia abajo hasta la sección "Notas" y copia el valor "URI de Redirección".
2. En el Logto Console, navega a la configuración de tu aplicación.
3. Añade el valor copiado "URI de Redirección" al campo "URIs de Redirección".

Paso 5: Probar la integración#

1. Cierra sesión en tu sitio de WordPress.
2. Visita la página de inicio de sesión de WordPress y haz clic en el botón "Iniciar sesión con Logto".
3. Serás redirigido a la página de inicio de sesión de Logto.
4. Inicia sesión con tu cuenta de Logto.
5. Serás redirigido de vuelta al sitio de WordPress y se iniciará sesión automáticamente.

Pasos finales#

¡Felicidades! Has integrado exitosamente Logto con WordPress.

Para personalizar aún más la integración, puedes explorar funciones adicionales en la página de configuración del plugin, como vincular usuarios existentes, personalizar el botón de inicio de sesión, usar el modo SSO y más.