Cómo configurar y utilizar la autenticación básica con la API Rest de WordPress

La API REST de WordPress abre la puerta a la creación de aplicaciones que pueden comunicarse directamente con tu sitio, tanto si estás extrayendo entradas del blog para una aplicación móvil, creando contenido a partir de un formulario externo o creando un panel de administración personalizado con JavaScript.

Es una forma potente de trabajar con WordPress más allá de la interfaz habitual de wp-admin.

Pero antes de que tu aplicación pueda interactuar con los datos de tu sitio, necesitarás una forma de autenticar esas peticiones. En este tutorial, recorreremos un ejemplo real utilizando las Contraseñas de Aplicación integradas en WordPress para configurar la Autenticación Básica.

Aprenderás a crear una sencilla página HTML independiente que se conecte a tu sitio de WordPress, para obtener, crear y eliminar entradas utilizando la API REST. Si quieres entender cómo funciona en la práctica la API REST, éste es un buen punto de partida.

¿Qué es la API REST y cómo funciona?

Una API (Interfaz de Programación de Aplicaciones) REST (Transferencia de Estado Representacional) se comunica entre diferentes componentes de software a través de Internet. Permite a los desarrolladores acceder y manipular datos y recursos de un servicio web como WordPress utilizando métodos HTTP estándar.

Por ejemplo, usando Javascript, puedes utilizar una API REST para crear, leer, actualizar o eliminar entradas y páginas en un sitio WordPress desde otra aplicación.

Una API REST se basa en el principio de ausencia de estado, lo que significa que cada solicitud de un cliente a un servidor debe contener toda la información necesaria para procesar la solicitud. El servidor no almacena ninguna información sobre el estado o el historial del cliente entre una solicitud y otra. Esto hace que la API REST sea más escalable, fiable y eficiente.

¿Qué es la autenticación básica y por qué es importante?

La autenticación básica comprueba quién eres cuando quieres utilizar un servicio web. Funciona enviando tu nombre de usuario y contraseña de forma sencilla a través de Internet. El servicio web comprueba entonces si tu nombre de usuario y contraseña son correctos y te deja entrar o no.

La autenticación básica es importante porque ayuda a mantener tus datos y recursos a salvo de otras personas que no deberían verlos ni modificarlos. Si no hay autenticación, cualquiera puede ver y modificar tus datos y recursos, lo que puede causar problemas o daños.

Sin embargo, la autenticación básica también tiene algunos problemas y peligros. Por ejemplo, no oculta tu nombre de usuario y contraseña, lo que significa que alguien que pueda ver tu solicitud de Internet también puede ver fácilmente tu nombre de usuario y contraseña.

¿Cómo funciona la autenticación básica?

La autenticación básica es una forma sencilla de verificar la identidad de un cliente que quiere acceder a un recurso protegido en un servidor. Funciona enviando el nombre de usuario y la contraseña del cliente como parte de la petición HTTP.

Estos son los pasos de la autenticación básica:

• El cliente solicita una URL que requiere autenticación, como https://example.com/secret.
• El servidor responde con un error 401 No autorizado y una cabecera WWW-Authenticate que indica el tipo de autenticación requerida, como Basic realm=»Ejemplo».
• El cliente codifica el nombre de usuario y la contraseña (o, en el caso de WordPress, una contraseña de aplicación) en el formato nombredeusuario:contraseña y los convierte en una cadena base64, como b3dhaXMuYWxhbUBjbG91ZHdheXMuY29tOmVKNWtuU24zNVc=.
• El cliente vuelve a enviar la misma petición, pero esta vez con una cabecera Authorization que contiene las credenciales codificadas, como Authorization: Basic b3dhaXMuYWxhbUBjbG91ZHdheXMuY29tOmVKNWtuU24zNVc=.
• El servidor descodifica las credenciales y comprueba si son válidas. Si lo son, el servidor concede el acceso al recurso solicitado y envía un código de estado 200 OK. Si no lo son, el servidor deniega el acceso y envía otro error 401 No autorizado.

La autenticación básica sólo debe utilizarse en conexiones HTTPS o en situaciones en las que exista un alto nivel de confianza entre el cliente y el servidor. El cliente debe borrar la caché o cerrar el navegador para finalizar la sesión, ya que no existe un mecanismo explícito de cierre de sesión o cambio de contraseña dentro del propio proceso de Autenticación Básica.

Métodos de autenticación para la API REST de WordPress

La API REST de WordPress proporciona varias opciones de autenticación diseñadas para casos de uso específicos. Estas opciones incluyen la autenticación básica, la autenticación OAuth y la autenticación por cookies.

• Autenticación básica: Una forma de enviar un nombre de usuario y una contraseña (en concreto, un nombre de usuario de WordPress y una contraseña de aplicación) con una solicitud. Este método es adecuado para aplicaciones externas.
• Autenticación OAuth: Una forma de permitir a los usuarios dar acceso a sitios web o aplicaciones a su información en otros sitios web sin darles sus contraseñas. A menudo implica una configuración más compleja y suele requerir un plugin específico.
• Autenticación de Cookies: Una forma de utilizar cookies para comprobar si un usuario está autorizado a realizar una solicitud y hacer un seguimiento de su sesión. Este es el método de autenticación nativo de WordPress para verificar a los usuarios y sus actividades cuando interactúan con la API REST desde el entorno de WordPress (por ejemplo, a través de un tema o plugin para un usuario conectado).

La Autenticación por Cookies es el método de autenticación nativo de WordPress para verificar a los usuarios y sus actividades. Para la Autenticación Básica con la API REST de WordPress, debes utilizar Contraseñas de Aplicación, que son una función integrada de WordPress (desde la versión 5.6) y no requieren un plugin aparte. La Autenticación OAuth normalmente sigue requiriendo un plugin dedicado.

Entender los comandos de la API REST de WordPress

Veamos algunos de los comandos comunes de la API REST (métodos HTTP) que puedes utilizar para interactuar con tu sitio WordPress. Se mencionan a continuación:

• GET: Utiliza este comando para recuperar un recurso, como una entrada o datos, del servidor.
• POST: Utiliza este comando para añadir un nuevo recurso al servidor.
• PUT: Utiliza este comando para actualizar o editar un recurso existente en el servidor.
• ELIMINAR: Utiliza este comando para eliminar un recurso del servidor.

Uso de la API REST de WordPress a través de un ejemplo práctico

Si quieres entender la API REST de WordPress con un ejemplo real, este tutorial práctico es para ti. Construiremos una sencilla página web HTML + JavaScript que te permitirá obtener, crear y eliminar entradas en un sitio de WordPress, todo ello sin tocar el panel de administración de WordPress.

Qué estamos construyendo

Una sola página HTML con JavaScript que:

• Lista todas las entradas de tu sitio WordPress
• Te permite crear nuevas entradas
• Permite borrar mensajes
• Muestra mensajes de respuesta

Requisitos previos

• Un sitio WordPress en funcionamiento con acceso de administrador
• API REST activada (está activada por defecto en WordPress)
• Acceso a los archivos del sitio

Ya tengo mi sitio alojado en Cloudways, así que lo utilizaré para este tutorial.

Paso 1: Crear la estructura HTML

Crea un nuevo archivo llamado wp-api-dashboard.html y añade esta estructura básica:

<!DOCTYPE html>
<html lang="es">
<cabeza>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <título>Panel de la API de WordPress</title>
    <estilo>
  body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
  .post { fondo: #f5f5f5; padding: 15px; margin-bottom: 10px; border-radius: 5px; }
  .post h3 { margin-top: 0; }
  botón { fondo: #0073aa; color: blanco; borde: ninguno; padding: 8px 15px; radio del borde: 3px; cursor: puntero; }
  botón:hover { fondo: #005177; }
  button.delete { background: #dc3232; }
  button.delete:hover { background: #a00; }
  #new-post-form { margin: 30px 0; padding: 20px; background: #f0f0f1; border-radius: 5px; }
  input, textarea { width: 100%; padding: 8px; margin-bottom: 10px; borde: 1px sólido #ddd; }
  .mensaje { padding: 10px; margin: 10px 0; border-radius: 3px; }
  .success { fondo: #d1e7dd; color: #0f5132; }
  .error { fondo: #f8d7da; color: #842029; }
    </style>
</head>
<cuerpo>
    <h1>Panel de la API de WordPress</h1>
    
    <div id="mensajes"></div>
    
    <div id="formulario-nuevo-post">
        <h2>Crear nueva entrada</h2>
        <input type="text" id="post-title" placeholder="Título del post">
        <textarea id="post-content" placeholder="Contenido del post" rows="5"></textarea>
        <botón id="crear-post">Publicar Post</button>
    </div>
    
    <div id="posts-contenedor">
        <h2>Tus mensajes</h2>
        <botón id="actualizar-posts">Actualizar mensajes</button>
        <div id="lista-de-puestos"></div>
    </div>

    <guión>
  // Nuestro JavaScript irá aquí
    </script>
</body>
</html>

Esto nos da:

• Una interfaz limpia y sencilla
• Un formulario para crear nuevas entradas
• Una sección para mostrar los mensajes existentes
• Estilo básico para hacerlo presentable

Paso 2: Configurar el Panel de Control

• Abre el archivo (wp-api-dashboard.html) en tu editor de texto.
• Busca estas líneas y sustitúyelas por tus datos de WordPress:

const config = {
  wpSiteUrl: 'https://yourwordpresssite.com', // Sustitúyelo por la URL de tu sitio web
  nombre_usuario: 'tu_nombre_usuario', // Tu nombre de usuario en WordPress
  password: 'your_application_password' // La contraseña de la aplicación que has generado
};

• wpSiteUrl: La URL de tu sitio WordPress (por ejemplo, https://myblog.com).
• nombre de usuario: Tu nombre de usuario de administrador de WordPress.
• contraseña: La Contraseña de Aplicación que generaste (desde Usuarios → Perfil → Contraseñas de Aplicación).

Paso 3: Abrir el Panel en un Navegador

• Haz doble clic en el archivo wp-api-dashboard.html para abrirlo en tu navegador.

• Si no carga los mensajes, puede que tengas que ejecutarlo en un servidor local (debido a restricciones de seguridad). He aquí cómo hacerlo:
  • Opción 1: Utiliza VS Code con la extensión Live Server.
  • Opción 2: Utiliza XAMPP/WAMP para alojarlo localmente.
  • Opción 3: Súbelo a un alojamiento web (como Netlify Drop).

Paso 4: ¡Pruébalo!

• Actualizar entradas: Haz clic en el botón «Actualizar entradas» para cargar tus entradas de WordPress.
• Crea una publicación: Rellena el título y el contenido, y haz clic en «Publicar entrada».
• Eliminar una entrada: Haz clic en «Eliminar publicación» en cualquier publicación para eliminarla.

¡Ha sido un éxito! Funciona, como puedes ver en el GIF de abajo.

También podemos hacer una comprobación cruzada desde nuestro panel de WordPress:

Cómo proteger tu API REST de WordPress de accesos no autorizados

Aunque la API REST de WordPress es una poderosa herramienta para los desarrolladores, también introduce una nueva superficie a la que pueden dirigirse los actores maliciosos. Dado que la API expone datos y operaciones a través de HTTP, es importante pensar detenidamente en cómo protegerla.

Antes de empezar a experimentar o a crear funciones con la API REST, asegúrate de que tienes una copia de seguridad completa de tu sitio. Si algo va mal -ya sea debido a un permiso mal configurado o a una solicitud de API defectuosa- querrás tener un punto de reversión seguro.

También es una buena idea trabajar en un sitio de prueba en lugar de en tu sitio web activo. Probar las solicitudes de la API en un entorno controlado garantiza que no expongas involuntariamente datos confidenciales o rompas la funcionalidad para tus visitantes.

Además, ten en cuenta estas buenas prácticas:

• Limita el acceso: Habilita o expone sólo los puntos finales de la API que sean realmente necesarios. Utiliza devoluciones de llamada de permisos para restringir el acceso cuando sea posible.
• Utiliza la autenticación: Incluso para las rutas personalizadas, asegúrate de que los usuarios se autentiquen correctamente antes de que puedan modificar o ver contenidos protegidos.
• Monitoriza tu sitio: Vigila el uso de la API y los registros de errores. Las peticiones inesperadas o los accesos muy frecuentes pueden ser signos de abuso.
• Actualiza regularmente: Mantén actualizados el núcleo, los plugins y los temas de WordPress para parchear las vulnerabilidades conocidas, algunas de las cuales pueden afectar a las rutas API expuestas.

La API REST no es intrínsecamente peligrosa, pero como cualquier herramienta, debe utilizarse con cuidado. Unas pocas precauciones por adelantado pueden ahorrarte muchos dolores de cabeza más adelante.

¡Terminando!

Con esto terminamos el tutorial. Hemos visto cómo funciona la API REST de WordPress y por qué es útil para interactuar con los datos de tu sitio desde fuera del panel de control de WordPress. Has configurado la autenticación básica mediante contraseñas de aplicación, has creado una página HTML independiente y has utilizado JavaScript para obtener, crear y eliminar entradas.

Con esta configuración básica, ya tienes un ejemplo práctico de cómo las aplicaciones o herramientas externas pueden conectarse a WordPress. Esta base puede ampliarse cuando empieces a trabajar con otros puntos finales como páginas, medios o tipos de entrada personalizados.

Si nos has seguido, ahora deberías tener una idea más clara de cómo encaja la API REST en el desarrollo moderno de WordPress.

Abdul Rehman

Abdul es un experto en tecnología, aficionado al café y al marketing creativo al que le encanta estar al día de las últimas actualizaciones de software y aparatos tecnológicos. También es un hábil escritor técnico capaz de explicar conceptos complejos de forma sencilla para un público amplio. Abdul disfruta compartiendo sus conocimientos sobre el sector de la Nube a través de manuales de usuario, documentación y entradas de blog.

Get Connected on: Twitter Community Forum