api

Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 2)

webmaster — Thu, 16 Mar 2023 11:01:56 +0000

Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 2)

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

Ya que hemos aprendido cómo configurar Contenta CMS de Drupal, para que pueda escuchar nuestra API de Nuxt.js, es el momento de hacer lo mismo desde el otro lado.

Paso 2 - Configuración de Nuxt.js

Para obtener datos de la aplicación nuxtapp, usaremos la biblioteca de javascript axios y, específicamente, usaremos la biblioteca axios creada para Nuxt: @nuxt/axios. Si eres desarrollador de PHP, puedes pensar en axios como el Guzzle del mundo de JavaScript. En la Parte 1 de este artículo, cuando instalamos la aplicación mynuxt, extrajimos la biblioteca axios.

Configuración Variables de entorno ( .env)

Si queremos conectar nuxtapp con el backend de contenta-drupal, primero tendremos que informarle acerca de algunas variables de entorno, así sabrá hacia dónde podrá realizar las peticiones de datos que quiere obtener.

Dentro de nuestra aplicación nuxtapp, crearemos un archivo con el nombre .env y dentro pegaremos el siguiente código:

APP_ENV=lando
API_URL=http://contenta-drupal.lndo.site/
CONSUMER_ID={{ Copiaremos aquí el ID Consumer de Drupal en //admin/con

Después de agregar este archivo, deberá reconstruir la aplicación nuxtapp, para cargar las variables de entorno en los contenedores de la aplicación; para ello, colocados en la carpeta de nuestrra aplicación de Nuxt.js, ejecutaremos el siguiente comando:

lando rebuild

Configuración de axios ( nuxt.config.js )

A pesar de que hemos seleccionado la opción Axios, en el momento de realizar la descarga de las dependencias para nuxtapp, si abrimos el archivo de configuración, en el apartado de móldulos, sólo vemos bootstrap-vue/nuxt, al igual que si exploramos la carpeta node_modules, por lo tanto tendremos que descargar axios y luego añadirlo en el listado de módulos dentro del archivo nuxt.config.js.

Para ello, nos aseguraremos de estar en la carpeta nuxtapp y ejecutaremos el siguiente comando para que se descarguen los archivos de axios:

lando yarn add @nuxtjs/axios

Una vez descargado, abriremos el archivo de configuración de Nuxt.js llamado nuxt.config.js y en el apartado de módulos, sutituiremos el código actual por el siguiente:


// Modules: https://go.nuxtjs.dev/config-modules
modules: [
  // Doc: https://axios.nuxtjs.org/usage
  '@nuxtjs/axios',
  // https://go.nuxtjs.dev/bootstrap
  'bootstrap-vue/nuxt',
],
/*
  ** Axios module configuration
  */
axios: {
  // See https://github.com/nuxt-community/axios-module#options
  debug: process.env.APP_ENV !== "production"
},

Para ver todas las opciones disponibles puedes leer la URL en el comentario. Para nuestros propósitos, activaremos la depuración con la advertencia de que nuestro APP_ENV no es producción.

`Configuración de la ( baseURL )`

También en el archivo nuxt.config.js, agregaremos un bloque de código env para configurar la baseURL que indica a axios dónde realizar las llamadas API a Contenta. En la parte inferior del archivo, después de la sección build, agregue las siguientes líneas:


// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
},
env: {
  baseURL: process.env.API_URL,
  CONSUMER_ID: process.env.CONSUMER_ID
}

Después de realizar cambios en los archivos .env o nuxt.config.js, deberá reconstruir la aplicación Lando lando rebuild -y para permitir que la aplicación nuxtapp cargue esos cambios.


lando rebuild -y

¡Eso configura nuestra configuración de axios para que ahora podamos realizar solicitudes desde nuestra aplicación mynuxt de regreso a Contenta nuxtapp!

`Hacer una llamada a la API`

Hagamos una ruta de página llamada posts con un archivo index.vue para volver a consultar a Contenta en busca de una publicación. Agregué un tipo de contenido a Contenta con el nombre de la máquina post y consultaré el endpoint /api/node/post/{uuid} para los datos json.

En Nuxt hay un directorio pages y todo lo que pongas en él, Nuxt creará automáticamente rutas Vue para nosotros. En este caso, crearemos un directorio posts dentro del directorio de páginas:


sudo mkdir pages/posts

Entonces deberías terminar con una estructura de directorios como esta:

Observe la estructura del archivo pages/posts/index.vue. Tiene tres secciones: <template>, <script> y <style>. Como probablemente pueda adivinar, la sección <template> contendrá nuestro html, <script> contendrá nuestro javascript y <style> contendrá nuestro css.

Ahora añadiremos algunos datos para nuestra plantilla. En la sección <script> de pages/posts/index.vue, agreguemos una función data() para que la plantilla sepa qué datos esperamos. En este caso, nuestro tipo de contenido posts consta de los campos title y body. Abriremos pages/posts/index.vue en nuestro editor de código. En la sección <scripts> y a continuación, agregaremos la función data():


<template>
  <section class="container">
  </section>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      title: "PLACEHOLDER TITLE",
      body: "PLACEHOLDER CONTENT ipsumm dolorem de la sol PLACEHOLDER CONTENT"
    }
  }
}
</script>

<style scoped>
</style>

Ahora nuestra sección<template> tiene acceso a data() y podemos comenzar a construir nuestra plantilla. Agregue a la sección de su plantilla referencias a los marcadores de posición para el title y el body:


<template>
  <b-container>
    <b-row>
      <b-col xl="12">
        <h1>{{ title }}</h1>
      </b-col>
    </b-row>
    <b-row>
      <b-col>
        <div
          class="posts__body"
          v-html="body"
        />
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      title: 'PLACEHOLDER TITLE',
      body: 'PLACEHOLDER CONTENT ipsumm dolorem de la sol PLACEHOLDER CONTENT'
    }
  }
}
</script>

<style scoped>
</style>

En la línea 5, hemos hecho referencia a la clave title de nuestra función data() y hemos representado el contenido del marcador de posición predeterminado en nuestra plantilla. De manera similar, en la línea 12 hemos hecho referencia a la propiedad body, esta vez en una directiva vue v-html. Hemos usado v-html para demostrar el paso de datos que pueden contener html. Podríamos haberlo referenciado de la misma manera que hicimos referencia al título.

Si ahora visitamos la url de nuestra aplicación: http://nuxtapp.lndo.site/posts deberíamos ver un resultado como el siguiente:

Ahora reemplacemos los datos del marcador de posición con datos reales de contenta-drupal.

Dentro de la sección <script> agregaremos una nueva función llamada asyncData que devolverá la llamada a nuestra aplicación contenta-drupal con llamadas asyncData y obtendremos los datos e intercambiará los datos del marcador de posición con datos reales.


<template>
  <b-container>
    <b-row>
      <b-col xl="12">
        <h1>{{ title }}</h1>
      </b-col>
    </b-row>
    <b-row>
      <b-col>
        <div
          class="posts__body"
          v-html="body"
        />
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  components: {},
  async asyncData({app}) {
    const data = await app.$axios
      .get('/api/node/post/c6b24529-0d69-4cbb-a966-ab2d6ac5a59b', {})
      .then(res => {
        console.log(res)
        return {
          title: res.data.data.attributes.title,
          body: res.data.data.attributes.body.value
        }
      })
      .catch(err => {
        if (err) {
          return err
        }
      })

    return data
  }
}
</script>

<style scoped>
</style>

Aquí, en la línea 22, hemos cambiado la función data() por asyncData(). La función asyncData se pasa en el contexto de la aplicación que tiene acceso al objeto $axios a través del trabajo que hicimos en los archivos .env y nuxt.config.js. Usamos este objeto $axios para realizar una solicitud GET de regreso a contenta-drupal y obtener el nodo de publicación con uuid=c6b24529-0d69-4cbb-a966-ab2d6ac5a59b en este ejemplo que uuid está codificado para una publicación específica.

webmaster Jue, 16/03/2023 - 12:01

Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 1)

webmaster — Thu, 16 Mar 2023 10:57:00 +0000

Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 1)

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

Ahora que hemos aprendido a instalar y configurar, utilizando Lando, una aplicación con Nuxt.js y la distribución optimizada para el sistema headless de Drupal 9, llamada Contenta CMS; es el momento de pasar a la siguiente fase, en la que conectaremos ambas aplicaciones para mostrar los datos servidos desde Drupal, en nuestra aplicación de Nuxt.js.

Paso 1 - Configuración de Contenta CMS

Como podrás ver en el capítulo sobre Simple OAuth, para que Drupal pueda escuchar las peticiones desde la API; primero tendremos que configurar tres partes, que nos permitirán realizar esa conexión:

Rol para la API:
La idea es crear un rol, al que le otorgaremos los permisos para relizar las conexiones con la API. Para ello, nos iremos a la url "/admin/people/roles" y allí, añadiremos un nuevo Rol, al que llamaremos vue_role, haciendo clic en el botón de añadir nuevo rol.
Recuerda que Contenta CMS, es un Drupal "vitaminado", por lo que hay ciertas diferencias si queremos acceder a las secciones a través del menú de administración. En este caso, tendríamos que hacer clic en la opción del menú Advanced, luego en People y por último en Role, para encontrar el botón de Add Rol.

Configurar un usuario de API

Lo siguiente que haremos es, después de haber creado el rol para nuestra API, tendremos que crear un nuevo usuario, al que le añadiremos el vue_role que acabamos de crear, para esta operación, podremos ir a la url "/admin/people" o si preferimos hacerlo por el menú, al igual que en caso anterior, tendríamos que hacer clic en la opción del menú Advanced, luego en People y por último en Users, para encontrar el botón de Add user.
En este caso, una vez hagamos clic en el botón para añadir a nuestro usuario, completaremos los campos necesarios como con cualquier otro usuario, le pondremos el nombre de usuario vue_user, y a continuación marcaremos el rol vue_role.

Configurar un consumidor

El último eslabón de esta cadena de requermientos será el Consumer, que será quien nos permitirá realizar la conexión entre Contenta CMS y la API de Nuxt.js. Para ello, iremos a la url "/admin/config/services/consumer".
O también podremos acceder a través del menú de administración, esta vez, tal y como lo haríamos desde un Drupal normal y corriente.

Esta vez, al hacer clic en el botón de Add Consumer, nos aseguraremos de rellenar los campos del formulario con el nombre vue_consumer, para el Consumer, el usuario será vue_user y el rol será vue_role. Asegúrate de aprenderte o dejar apuntado el New Secret, porque será la clave que necesitarás en caso de conectarme con el Consumer, en algunos Headless, como por ejemplo, con Gatsby.

Fantástico, una vez rellenado el formulario, haz clic en guardar para concluir la configuración de nuestra API Drupal Contenta CMS.
A continuación, vamos a configurar la otra parte de este proyecto, o sea, nuestra aplicación de Nuxt.js.

webmaster Jue, 16/03/2023 - 11:57

Drupal 9 Headless con Vue.js | Requerimientos

webmaster — Thu, 09 Mar 2023 16:52:00 +0000

Drupal 9 Headless con Vue.js | Requerimientos

Para poder realizar este curso, será necesario cumplir previamente con varios de los requerimientos de instalación del proyecto; estos son:

Tener instalado y funcionando un proyecto Drupal. HAZ CLIC AQUI
Tener conocimientos básicos de Nuxtjs, para realizar el curso HAZ CLIC AQUI
Descargar, activar y configurar el módulo de autenticación Simple Oauth. HAZ CLIC AQUI

Una vez hayas completado estos requermientos, podrás continuar con el resto del curso siguiendo los pasos de los siguientes capítulos.

webmaster Jue, 09/03/2023 - 17:52

Drupal 9 Headless con Vue.js | Presentación

webmaster — Thu, 09 Mar 2023 16:39:40 +0000

Drupal 9 Headless con Vue.js | Presentación

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

Al final de este curso, tendrás los conocimientos básicos para instalar un proyecto desacoplado (Headless), utilizando Nuxt.js para el frontend o presentación de tus datos, extraídos desde Drupal 9, que se encargará del backend.

webmaster Jue, 09/03/2023 - 17:39

Drupal 9 Headless con Vue.js en Windows 11

webmaster — Thu, 09 Mar 2023 16:34:14 +0000

Drupal 9 Headless con Vue.js en Windows 11

webmaster Jue, 09/03/2023 - 17:34

En este curso, explicaremos los conceptos básicos para que puedas instalar en local, un Drupal Headless usando el Framework de javascript Nuxt.js, como de costubre, trabajaremos con LANDO, WSL2 en Windows 11

Curso Gratuito

/drupal-9-headless-con-vuejs-en-windows-11

JSON API | Desacoplamiento de Drupal 9

webmaster — Thu, 09 Mar 2023 15:37:51 +0000

JSON API | Desacoplamiento de Drupal 9

Con la aparición de varias librerías basadas en JavaScript, como Angular, Vue.js, React, etc. y el aumento definitivo del uso de dispositivos móviles, para conectarse a toda clase de servicios basados en plataformas, webs o aplicaciones; ha llegado el momento perfecto, para que todos aquellos que trabajamos con proyectos desarrollados en Drupal, nos planteemos la posibilidad "Descabezar" o "Desacoplar", el Frontend y el Backend, para seguir sacando el mayor partido, a su potente y flexible interfaz de usuario y al mismo tiempo, que nos adentramos poco a poco en el mundo del Frontend usando las nuevas librerías.

Por lo general, el elemento común, con el cual funcionan la mayoría o todas estas nuevas librerías basadas en JavaScript, es la lectura de datos en formato Json, debido a la flexibilidad estructural basada en arreglos o Arrays.

Para ayudarnos con esta transformación o adaptación en Drupal, existen varios módulos contribuidos, algunos incorporados directamente en el núcleo de Drupal, a partir de la versión 8, como el caso de Rest y Json Api, y otros como Json Extras, que nos permitirán ampliar nuestras posibilidades con esta clase de implementaciones.

Hoy vamos a abordar, la implementación de Json Api y Json Extras, para transformar en formato Json, todo el contenido dentro de nuestra web desarrollada con Drupal 9, sin que tengamos que invertir demasiado tiempo ni complicarnos la existencia.

GO HEADLESS! DESACOPLAMIENTO DE DRUPAL 9 CON EL MÓDULO JSON API

Como ya mencionamos al principio de este artículo, el módulo Json Api, ha sido incluido en el núcleo de Drupal 9, por lo que para comenzar a utilizarlo, sólo necesitaremos activarlo desde la url "/admin/modules", o si tienes instalado el módulo Admin Toolbar, podrás hacerlo a través del menú superior, tal y como te muestro en la imagen:

Ahora sólo nos faltaría descargar e instalar el módulo JSON:API Extras, para mostrarte lo fácil que será convertir en formato Json, todo el contenido que hayamos creado en nuestro Drupal, para poder aplicarle cualquier alternativa en diseño Frontend con la que te sientas más identificado.

CÓMO INSTALAR Y CONFIGURAR EL MÓDULO:

Paso 1 Descargar el módulo:

Lo primero que tendrás que hacer es descargarlo, para ello, a partir de Drupal 8 se recomienda que utilices el gestor de paquetes Composer, ya que te facilitará tanto la instalación como futuras actualizaciones del tus proyectos. No obstante también podrías descargarlo desde la Página oficial del módulo y una vez descargado, tendrás que colocarlo en la carpeta "modules" o "modules/contrib", dependiendo de tu instalación y asegurarte de descargar todas sus dependencias o el módulo no funcionará, esta es una de las ventajas con las que cuentas al hacer la instalación usando Composer.

Paso 2 Activación del módulo :

Para activar el módulo JSON:API Extras, al igual que todos los demás módulos contribuidos de Drupal, tendrás la posibilidad de hacerlo, mediante el uso de la herramienta Drush, con el comando "drush en jsonapi_extras -y", que sirve para activar cualquier módulos y todas sus dependencias, o desde la interfaz de Drupal.

En nuestro ejercicio, antes de activar el módulo Json Api del núcleo de Drupal, vamos a descargar el módulo Json:Api Extras, para ello, como siempre, utilizaremos Composer con el comando que hemos mencionado anteriormente.

Una vez haya concluido la descarga del módulo, nos iremos a nuestro proyecto, en la url "/admin/modules" y activaremos los siguientes módulos:

El módulo Serialización se activa automáticamente, como dependencia de Json Api del núcleo de Drupal 9.

Tan pronto como termine la activación de los módulos que hemos seleccionado, si refrescamos caché, podremos acceder desde el menú de administración a los Servicios Web.

webmaster Jue, 09/03/2023 - 16:37

Drupal::httpClient | Consumo datos externos a Drupal

webmaster — Thu, 09 Mar 2023 15:32:32 +0000

Drupal::httpClient | Consumo datos externos a Drupal

A la mayoría de los que trabajamos con Drupal, en algún momento, nos habrá tocado trabajar en un proyecto, que requería que sirviéramos los datos desde Drupal, para que pudiera ser consumido desde alguna API o herramienta externa, existes múltiples formas de solucionar este problema, mediante el uso de webservices, vistas y varios módulos.

Si quieres aprender más acerca del uso de Servicios Web en Drupal HAZ CLIC AQUI

Pero en esta ocasión, nos vamos a referir al caso contrario, es decir, a los pasos necesarios para que podamos consumir, dentro de Drupal, la información provenientes desde una API externa. De esta manera, podremos manipular o presentar los datos, dentro de nuestro proyecto Drupal, sin la necesidad de hacernos responsables de tareas como la insercción o actualización de dichos datos.

Cómo realizar peticiones de datos externos desde Drupal

A partir de Drupal 8, se pueden realizar todo tipo de peticiones de datos, hacia fuentes external a Drupal, gracias al método Drupal::httpClient, incluido en el núcleo. Este método es, simplemente, un envoltorio para que podamos trabajar con la librería de php conocida como Guzzle, que según su página oficial, "Guzzle es un cliente PHP HTTP y un framework, para crear clientes de servicios web RESTful".

Guzzle utiliza PSR-7 como interfaz de mensajes HTTP. PSR-7 describe interfaces comunes para representar mensajes HTTP. Esto permite que Guzzle funcione con cualquier otra biblioteca que utilice interfaces de mensajes PSR-7.

Para conocer la versión de nuestro proyecto de Drupal, podremos explorar el archivo composer.lock, y encontraremos varios datos, enlaces, definiciones relacionados con Guzzle:

{
    "name": "guzzlehttp/guzzle",
    "version": "6.5.8",
    "source": {
        "type": "git",
        "url": "https://github.com/guzzle/guzzle.git",
        "reference": "a52f0440530b54fa079ce76e8c5d196a42cad981"
    },
//

Si quiers conocer más acerca de la versión más reciente de Guzzle, HAZ CLIC AQUI

Drupal::httpClient dentro de un módulo personalizado en Drupal

Si quieres aprender a crear un módulo personalizado HAZ CLIC AQUI

Para disponer de una fuente de datos externa a Drupal, podremos acceder a la web Data.gov, en la que podremos encontrar un amplio catálogo de informaciones, vía CKAN, con una potente API que nos permitirá realizar, de forma segura, cualquiera de las pruebas relacionadas con nuestras peticiones.

Vamos a echar un vistazo a algunos ejemplos usando la API de CKAN, para ver la documentación completa HAZ CLIC AQUI.

Pasos para consumir datos externos a Drupal

Paso 1 - Inicialización del cliente

Antes de poder realizar cualquier tipo de petición desde Drupal, vamos a necesitar inicializar el cliente de conexión. Para ello deberíamos incluir la siguiente línea dentro de nuestro Módulo Personalizado:

$client = \Drupal::httpClient();

Paso 2 - Definir URL de conexión

Ahora que ya hemos inicializado el cliente, podremos añadir la url y el método que vamos a utilizar para conectarnos y extraer los datos. Para ello, tendremos que agregar una línea como la siguientes, sustituyendo la URL, en caso de utilizar otra dirección.

$client->request('GET', 'http://demo.ckan.org/api/3/action/package_list');

Guzzle también proporciona una lista de métodos sincrónicos para realizar solicitudes, para ver la lista completa HAZ CLIC AQUI

Paso 3 - Obtener los datos del requerimiento

Una vez definidos el método y la url con la que vamos a realizar nuestr petición (Request), necesitaremos recolectar dicha información y guardarla, para luego procesarla, así que añadiremos la siguiente estructura:

$request = $client->get('http://demo.ckan.org/api/3/action/package_list');
$response = $request->getBody();

Paso 4 - Envío de datos hacia la API

Ya que hemos aprendido la forma de conectarnos y de recibir los datos, desde una fuenta externa a Drupal, vamos a realizar la prueba contraria, es decir, enviaremos alguna información, en formato JSON, hacia la fuenta externa.

$client = \Drupal::httpClient();
$request = $client->post('http://demo.ckan.org/api/3/action/group_list', [
  'json' => [
    'id'=> 'data-explorer'
  ]
]);
$response = json_decode($request->getBody());

En el código anterior, hemos cambiado el método GET por el método POST, en client->post(), esto nos ha permitido pasar, además de la url de conexión, un array de nombre "json", compuesto por varias opciones adicionales, entre ellas el formato JSON. Guzzle se encargará de especificar la cabecera de estos datos, 'Content-Type','application/json', así como de añadir el 'json_encoding', para que todo funcione correctamente.

Finalmente, llamaremos al método json_decode, para decodificar los datos obtenidos en nuestra respuesta.

Para ver la lista completa de las opciones disponibles, HAZ CLIC AQUI

Cómo autenticarnos para la conexión

En algunos casos, necesitaremos autenticarnos, para poder obtener la información desde la fuente externa, con la que deseamos realizar la conexión. En el siguiente ejemplo, puedes ver cómo sería la autenticación para acceder a la API de GitHub.

$client = \Drupal::httpClient();
$request = $client->get('https://api.github.com/user', [
  'auth' => ['username','password']
]);
$response = $request->getBody();

Como manipular las Excepciones

Otro de los casos con lo que podremos encontrarnos, son las excepciones. Siempre que utilicemos Drupal::httpClient, tendremos que envolver las excepciones dentro de un bloque try/catch, para poder manejarlas.

En el siguiente ejemplo, podrás ver cómo manejar una excepción, en un caso de login, para que se muestre en la tabla de errores de Drupal.

$client = \Drupal::httpClient();

try {
  $response = $client->get('http://demo.ckan.org/api/3/action/package_list');
  $data = $response->getBody();
}
catch (RequestException $e) {
  watchdog_exception('my_module', $e->getMessage());
}

Puedes verificar la lista completa de las excepciones, explorando en la siguiente ubicación:

CARPETA_RAIZ/vendor/guzzlehttp/guzzle/src/Exception

Con esta información, podrás obtener diferentes comportamientos, al momento de trabajar con las excepciones.

El cliente de Guzzle, utiliza un sistema handler and middleware, para enviar sus peticiones HTTP, puedes revisar la documentación oficial, para que te permita un mayor control sobre el manejo de tus datos, conexiones y resultados.

webmaster Jue, 09/03/2023 - 16:32

Simple OAuth | Módulo Drupal

webmaster — Thu, 09 Mar 2023 15:30:13 +0000

Simple OAuth | Módulo Drupal

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

Con el crecimiento en la popularidad en utilizar Drupal Desacoplado (Headless), combinando un diseño frontend desarrollado en javascript, a partir de frameworks como Angular, React.js o Vue.js, y a su vez, dejando las tareas relacionadas con gestión de usuarios, permisos y otras, relacionadas con bases de datos a cargo de Drupal; hoy aprenderemos a configurar uno de los módulos necesarios para proteger, este tipo de conexiones, entre Drupal 9 y otras aplicaciones. Nos referimos al módulo Simple Aouth, que nos permitirá configurar accesos y permisos restrictivos, para el intercambio de datos desde y hacia Drupal, de manera protegida.

Cómo instalar y configurar el módulo:

Paso 1 - Descargar el módulo:

Paso 2 - Configuración:

Primero genere un par de claves para que el módulo Simple OAuth las use al cifrar tokens. Estos deben almacenarse fuera de su directorio raíz de Drupal. Recomendamos la siguiente estructura de directorios:

.
├── LICENSE
├── README.md
├── composer.json
├── composer.lock
├── config
├── keys
├── scripts
├── vendor
└── web // > Drupal root directory

Genere las claves necesarias con el siguiente conjunto de comandos:

mkdir keys
cd keys
openssl genrsa -out private.key 2048
openssl rsa -in private.key -pubout > public.key
chmod 600 public.key
chmod 600 private.key

Luego dígale al módulo Simple OAuth dónde encontrarlos. En su sitio de Drupal, en el menú administrativo Administrar, vaya a Configuración > OAuth simple y complete el formulario con las rutas a las claves que acaba de generar.

Para ello, accederemos a la página de configuración del módulo en la url "/admin/config/people/simple_oauth" y a continuación rellenaremos los campos del formulario con los siguientes detalles:

Access token expiration time: 300
Refresh token expiration time 1209600
Public Key: ../keys/public.key
Private Key: ../keys/private.key

A continuación, configure un nuevo cliente OAuth. Primero agregue un nuevo rol de Drupal. Vaya a Personas > Roles (/admin/people/roles/add) y agregue un nuevo rol llamado "Cliente Gatsby".

Luego, crearemos un usuario y le asignaremos el rol que hemos creado cuando lo agregemos como consumidor en simple OAuth

Luego, en el menú Administrar administración, vaya a Configuración > Simple OAuth > Clientes y haga clic en el botón Agregar consumidor. Complete el formulario y recuerde el valor que ingresa para el campo Nuevo secreto, ya que lo necesitará nuevamente más adelante. En Ámbitos, elija el rol de cliente de Gatsby que acabamos de crear. Finalmente, haga clic en Guardar para agregar el nuevo consumidor.

En la página resultante, debería ver su nueva lista de consumidores junto con un UUID. Tome nota de este UUID. Combinados con el secreto de arriba, serán su ID de consumidor y clave, que se usarán para las solicitudes de OAuth más adelante

Finalmente, otorgue permiso a los usuarios autenticados para otorgar códigos OAuth 2. En el menú Gestionar administración, vaya a Personas > Permisos (/admin/people/permissions). Marque la casilla "Grant OAuth2 codes" para otorgar al usuario autenticado los códigos de permisos OAuth 2. Luego, desplácese hasta la parte inferior de la página y haga clic en Guardar permisos.

webmaster Jue, 09/03/2023 - 16:30

Rest Services en Drupal 9 (Parte 2)

webmaster — Thu, 09 Mar 2023 15:23:14 +0000

Rest Services en Drupal 9 (Parte 2)

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

Siempre que trabajemos con proyectos en los que tengamos que testear la funcionalidad de API Rest, es recomendable que utilicemos las herramientas que facilitarán nuestras tareas de testeo, de manera que resulte más simple, el proceso de identificación de posibles errores, aplicar nuevas funcionalidades o crear documentación relacionada con el proceso.

En nuestro caso, como estaremos trabajando con servicios del tipo REST en Drupal, vamos a tener que realizar varias comprobaciones, sobre las llamadas hacia nuestra API, utilizando GET, POST, PATCH y DELETE, con los cuales obtendremos información desde Drupal, como hemos explicado en el artículo anterior, Cómo trabajar con Rest en Drupal 9 (Parte 1), además de realizar otras operaciones como Añadir, Actualizar o borrar contenidos, por medio de estos métodos.

En las siguientes líneas trataré de explicar, de la manera resumida, los principios fundamentales para entender, cómo aplicar llamadas a la API Rest que nos permitan la ejecución de las principales operaciones, al emplear esta clase de sistema, con Drupal 9.

Una de estas herramientas de desarrollo es Postman, que nos ofrece una interfaz gráfica, en la que podremos realizar varios tipos de operaciones relacionadas con API Rest, para facilitarnos el proceso de testeo para nuestros proyectos. Puedes descargar Postman desde su página oficial.

Ahora que ya hemos configurado los servicios dentro de Drupal, para autorizar las consultas, mediante el uso de GET, y obtener así el contenido de varios nodos, vamos a realizar la misma comprobación ejecutando la llamada en Postaman, para ello, una vez descargada la aplicación Postman, copiaremos la url o "endpoint", que nos devolverá el listado de los nodos de nuestra página de inicio, tal y como los expliqué en el artículo anterior Cómo trabajar con Rest en Drupal 9 (Parte 1), y deberíamos obtener exactamente el mismo resultado.

Métodos de autenticación:

Cuando realizamos llamadas a un API Rest, necesitaremos al menos un método de autenticación, de esa forma, estaremos diciéndole a nuestra aplicación, que tenemos los permisos necesarios para acceder a la información con la que vamos a trabajar.

Existen varias formas de autenticarnos, a la hora de trabajar con las llamadas al API REST, una de ellas, es el uso de cookies; y aunque generalmente, el uso del método Get para obtener información mediante API REST, no debería necesitar ningún tipo de autenticación, ya que sólo estamos accediendo a información pública, expuesta a cualquier usuario desde nuestro servidor web, al trabajar con los servicios REST en Drupal, nos exige que al menos activemos un método de autenticación.

Es por esta razón, por la cual lo hicimos en el artículo anterior, al momento de activar nuestro primer servicio con el Método Get, para leer la información sobre los nodos desde nuestro Drupal.

Por defecto, Drupal utiliza el sistema de Cookies para informarse sobre los datos de nuestro usuario, es por esta razón que al loguearnos en cualquier web de Drupal, la interfaz nos permitirá ver los contenidos para los que tengamos acceso, si somos los administradores, veremos la interfaz del administrador y si somos usuarios de cualquier otro tipo, nos presentará la interfaz de usuario correspondiente.

Si quieres comprobar las cookies que genera Drupal automáticamente cuando estás logueado como usuario, puedes hacer clic derecho y seleccionar inspeccionar elemento o presionar la tecla F12, en mi caso utilizo Google Chorme, si tu también lo hacer, deberías ver algo como lo que te presento en la siguiente imagen, He seleccionado la pestaña Network y tengo marcada la opción Preserve log, al hacer clic sobre Headers verás la información que estamos enviando a nuestro servidor, donde está alojada la web de Drupal y dentro de estas informaciones podrás comprobar la existencia de las cookies.

Aunque el uso de Cookies es un método que funciona para que Drupal nos devuelva información, en el caso de una aplicación externa, ubicada en otro servidor, por ejemplo, que quisiera obtener información mediante API REST, necesitaremos un método de autenticación más robusto, porque para Drupal, como cualquier otra aplicación a la que accedamos por servicios web, quien acceda usando este tipo de autenticación, podrá operar con todos los permisos concedidos para ese usuario.

Otra forma de identificarnos como usuario con permisos frente a Drupal, utilizando API REST, es el uso del TOKEN DE SESIÓN, con el que le diremos a Drupal todo lo que necesita saber acerca de nuestro usuario, para que pueda ofrecernos lo que vamos a necesitar al conectarnos con él.

Hasta las primeras versiones de Drupal 8, para obtener el TOKEN DE SESIÓN, bastaba con añadir a la url de nuestra web, una vez activado el módulo rest "http//miweb.com/rest/session/token", esto nos imprimía en la pantalla el valor correspondiente, que tendríamos que copiar dentro de los parámetros de configuración, para nuestra API rest.

Esta opción fue eliminada a partir de las últimas actualizaciones de Drupal 8, por lo que ya no existe en Drupal 9 ni versiones posteriores. En su lugar se añadió un módulo contribuido llamado REST API Access Token, con el cual, según la página oficial:

"El módulo REST API Access Token proporciona un proveedor de autenticación Drupal que utiliza tokens (en encabezados) como factor principal de autenticación.
Además, el módulo proporciona verificación de firmas para solicitudes y caché de respuestas."

Necesitaremos descargar e instalar este módulo, para realizar las pruebas con las llamadas a la API REST, cuando trabajemos con los métodos POST, PATCH y DELETE, que explicaremos en el siguiente artículo, pero antes de terminar, vamos a hablar de una última herramienta que necesitaremos para testear nuestros servicios web...

CURL

Según la página oficial de PHP: PHP soporta libcurl, una biblioteca creada por Daniel Stenberg que permite conectarse y comunicarse con diferentes tipos de servidores y diferentes tipos de protocolos. Actualmente, libcurl admite los protocolos http, https, ftp, gopher, telnet, dict, file y ldap. libcurl también admite certificados HTTPS, HTTP, POST, HTTP PUT, subidas mediante FTP (también se puede hacer con la extensión FTP de PHP), subidas basadas en formularios HTTP, proxies, cookies, y autenticación usuario+contraseña.

Dependiendo del sistema operativo con el que estés trabajando, y de la versión de PHP que tengas instalada, la manera en que se configura CURL variará, por lo tanto, sería recomendable que compruebes si la tienes configurada correctamente en tu servidor antes de comenzar con la siguiente fase de estos ejercicios.

Cómo comprobar si tengo instalado CURL en Drupal 9

En todas las instalaciones de Drupal, podremos acceder a una página que nos detallará las informaciones principales, relacionadas con las informaciones más relevantes sobre nuestro servidor, Mysql, Php, además de otras relacionadas directamente con la configuración interna de Drupal.

Obviamente, para acceder a estos datos necesitarás tener permisos de administrador, y estar logueado dentro de tu web. La url es "/admin/reports/status". Una vez hayas accedido a esta pantalla, podrás hacer clic en el apartado MAS INFORMACIÓN de PHP, donde podrás ver el phpinfo, y comfirmar si ya tienes habilitada esta librería en tu entorno.

webmaster Jue, 09/03/2023 - 16:23

Rest Services en Drupal 9 (Parte 1)

webmaster — Thu, 09 Mar 2023 15:18:22 +0000

Rest Services en Drupal 9 (Parte 1)

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

Siguiendo con las opciones disponibles para combinar, el uso de Drupal como Backend, con librerías JavaScript del tipo Vue.js o Angular, para el Frontend; hoy abordaré los principios básicos sobre recursos Rest en Drupal 9, para que puedas comenzar a experimentar.

A partir de su versión 8, se añadieron varios módulos en el núcleo de Drupal, con el fin de facilitarnos la activación de los más utilizados, como es el caso de los servicios web, ya que es cada vez más frecuente, encontrarnos con proyectos, que requieren conectar un sistema robusto de gestión como ofrece Drupal, con aplicaciones para móviles o simplemente, para añadir una presentación de contenidos más flexible, atractiva y amigable de cara a los usuarios finales.

Con el módulo Rest entre otras opciones, podremos generar, de forma sencilla, todo tipo de contenidos e información en formato Json o XML, además de configurar accesos, para la gestión de usuarios y contenidos a través del uso de APIs, desde prácticamente cualquier tipo de aplicación disponible.

Requisitos:

- Tener una web Drupal en funcionamiento, con varios contenidos preferiblemente con taxonomías, imágenes, textos y usuarios creados, para que puedas realizar diferentes pruebas.

Si no tienes contenidos, o prefieres generar contenido de prueba, para realizar tus configuraciones, puedes utilizar el módulo Devel Generate, integrado en el módulo Devel, con el cual podrás generar todo el contenido que necesites basándote en los tipos de contenido que prefieras, haciendo únicamente un par de clics.

Aquí tienes la explicación de Cómo generar contenidos de Prueba con el módulo Devel

- Descargar y activar el módulo Rest UI, para facilitar la gestión de los endpoints y accesos utilizando la interfaz de Drupal. Aunque en la página oficial de módulo sólo especifica que es compatible para la versión 8, si lo descargas usando Composer podrás utilizarlo en tu Drupal 9.

Cómo trabajar con Rest en Drupal 9

Paso 1 Activación de módulos RESTfull Web Services y Serialization:

Con la activación y combinación de estos módulos, incluidos en el núcleo de Drupal, a partir de la versión 8, podremos, entre otras cosas, crear nuevas vistas, que nos mostrarán el contenido en formato Json o también podremos añadir vistas de este tipo a otras ya existentes.

Además de esto módulos, antes de continuar, aprovecharemos para descargar y activar el módulo REST UI que mencionamos en los requisitos, para realizar configuraciones relacionadas con REST, a través de la interfaz de usuario de Drupal.

Paso 2 Descarga y activación del módulo REST UI:

Descarga y Activación REST UI:

Para descargar y activar cualquier módulo de Drupal tienes varias opciones:

Descarga:

1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:

composer require drupal/restui

2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Rest UI y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.

Activación:

1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente.

drush en restui -y

2.- Desde la interfaz de usuario de Drupal, en la url "/admin/modules", y luego marcando el check junto al nombre de tu módulo y haciendo clic en el botón guardar que aparecer al final de la página.

Paso 3 Creación y configuración de una vista en formato Json:

La primera novedad que podremos comprobar, una vez activados los módulos RESTful Web Services y Serialization, es que si nos vamos a la pantalla para la creación de vistas, en la url "/admin/structure/views/add" y seleccionamos Agregar vista, podremos ver en la parte inferior una nueva opción, llamada Configuración de exportación REST.

Si seleccionamos esta opción, nos creará una vista en la que podremos mostrar los datos en formato json o xml.

Vamos a comenzar con la creación de una vista tipo REST, en la que mostraremos el listado de artículos, para este ejercicio puedes utilizar el módulo Devel Generate, para crear contenidos de prueba con un par de clics, o si lo prefieres, crear algunos artículos manualmente.

Una vez tengas los artículos que vas a mostrar en tu vista, puedes aplicar la misma configuración que te muestro en la siguiente imagen, con estas opciones seleccionadas, haremos clic en el botón Guardar y editar, para que se nos abra la pantalla de configuración donde terminaremos de realizar los ajustes necesarios para obtener nuestro objetivo.

Una vez que estemos dentro de la pantalla de configuración de nuestra vista, el primer cambio que deberíamos realizar es modificar la configuración para que el contenido de la vista se muestre en formato json.

Para ello, primero haremos clic en configuración, dentro del apartado FORMATO, tal y como te muestro en pantalla:

A continuación, para este ejercicio, seleccionaremos el formato json y una vez hayamos aplicado el cambio, inmediatamente podremos ver cómo se muestran nuestros artículos en formato json, dentro de nuestra v

Para este ejemplo hemos creado un sólo artículo, pero nuestra vista muestra un montón de información, debido a que en el FORMATO, está marcada la opción de Mostrar: Entidad, lo que significa que mostrará mucho más de lo que necesitaríamos para realizar consultas y conexión con alguna aplicación.

Una consulta como esta consumiría una gran cantidad de recursos para su ejecución, por lo que se verían afectados el tiempo de respuesta y por lo tanto el resultado final de nuestro desarrollo.

Para evitar que Drupal nos devuelva información innecesaria por ahora, cambiaremos la opción del Formato, para obtener sólo algunos campos, en lugar de toda la entidad; para nuestro ejemplo, seleccionaremos el título, el autor y la fecha de creación.

Una vez añadidos los campos, el resultado final es un listado mucho más sencillo y fácil de leer y manipular:

Paso 4 Comprobación de la vista en el navegador:

Para comprobar que nuestra vista en formato Json funciona correctamente, tendremos que acceder con la url que hemos configurado al crearla y el resultado debería ser el mismo que hemos visto en la pantalla de configuración, en mi caso he añadido la extensión de Chorme llamada JSON Viewer:

Cómo mostrar contenidos de Drupal, en formato json, sin tener que configurar una vista

Ya conocemos la manera de generar vistas para obtener resultados en formato Json, pero además, podremos acceder directamente a un contenido en concreto, también en formato json, añadiendo a la url de nuestra web, las especificaciones del formato requerido.

Por ejemplo, podremos acceder a nuestro artículo 1, o node/1 para que se nos muestre en formato json, añadiendo al final de la url las especificaciones del formato.

En nuestro caso, sería algo como esto http://drupal9.localhost/node/1?_format=json, si hacemos la prueba en el navegador nos devolverá algo parecido a la siguiente imagen:

Si hemos obtenido este resultado, es debido a que todavía nos falta indicarle a Drupal, que nos permita acceder de esta forma. Para lograrlo tendremos que habilitar los recursos utilizando el módulo REST UI, Así que nos iremos a la url "/admin/config/services/rest" y dentro buscaremos y activaremos el recurso que nos permita acceder a los contenidos utilizando get, tal y como te muestro a continuación:

Tan pronto como realicemos estos cambios, si volvemos a nuestro navegador y refrescamos, veremos un contenido similar al que mostrábamos en la vista.

Cómo acceder a vistas ya existentes para que se muestren en formato Json

Al igual que hemos hecho para acceder a los datos de un nodo, podríamos intentar realizar la misma operación llamando a una vista existente. Por ejemplo, a partir de Drupal 8, en el listado de las vistas, podremos encontrar una llamada frontpage, que nos muestra por defecto todos los contenidos que hayamos creado, sino hemos realizado ninguna otra configuración, para que se muestre otro tipo de página como inicio de nuestra web.

Cómo vemos en la imagen, la url para esta vista frontpage es /node, por lo tanto, si queremos que nos devuelva sus contenidos en formato json, tendremos que añadir un modo de vista REST, desde la pantalla de configuración, luego le asignaremos una url, por ejemplo /node/rest y realizaremos los mismos cambios del formato que efectuamos en el primer ejemplo de este artículo.

Cuando hayamos terminado la configuración de nuestra nueva vista, a la que accederemos por la url "node/rest", tendremos que habilitar el recurso, antes de poder escribir en el navegador "http://drupal9.localhost/node/rest?_format=json", ya que si lo hacemos, sin habilitar el recurso, nos devolverá un error al igual que nos sucedió al intentarlo con el nodo.

Por lo tanto, si escribimos en el navegador las mismas especificaciones de formato que aplicamos, para acceder al node/1, deberíamos obtener la vista de nuestra página principal en formato Json.

Pero, como habrás imaginado, al igual que hicimos con el recurso para acceder al nodo, tendremos que activar otro recurso para lograr este nuevo objetivo.

Ahora que ya sabes cómo habilitar los recursos del módulo REST UI, para acceder a los contenidos, y obtener resultados en formato JSON, si escribes en el navegador, la url para mostrar tu vista "node/rest", con el formato especificado, entonces deberías ver algo parecido a la imagen siguiente, que será equivalente al contenido y campos que hayas configurado en tu vista.

En este segundo ejemplo con vistas, he añadido el campo título y el campo body.

webmaster Jue, 09/03/2023 - 16:18

api

Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 2)

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

Paso 2 - Configuración de Nuxt.js

Configuración Variables de entorno ( .env)

Configuración de axios ( nuxt.config.js )

Configuración de la ( baseURL )

Hacer una llamada a la API

Drupal Headless con Nuxt.js | Conectando con Drupal (Parte 1)

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

Paso 1 - Configuración de Contenta CMS

Rol para la API:

Configurar un usuario de API

Configurar un consumidor

Drupal 9 Headless con Vue.js | Requerimientos

Drupal 9 Headless con Vue.js | Presentación

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

Drupal 9 Headless con Vue.js en Windows 11

JSON API | Desacoplamiento de Drupal 9

GO HEADLESS! DESACOPLAMIENTO DE DRUPAL 9 CON EL MÓDULO JSON API

CÓMO INSTALAR Y CONFIGURAR EL MÓDULO:

Drupal::httpClient | Consumo datos externos a Drupal

Cómo realizar peticiones de datos externos desde Drupal

Drupal::httpClient dentro de un módulo personalizado en Drupal

Pasos para consumir datos externos a Drupal

Paso 1 - Inicialización del cliente

Paso 2 - Definir URL de conexión

Paso 3 - Obtener los datos del requerimiento

Paso 4 - Envío de datos hacia la API

Cómo autenticarnos para la conexión

Como manipular las Excepciones

Simple OAuth | Módulo Drupal

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

Cómo instalar y configurar el módulo:

Paso 1 - Descargar el módulo:

Paso 2 - Configuración:

Rest Services en Drupal 9 (Parte 2)

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

Métodos de autenticación:

CURL

Cómo comprobar si tengo instalado CURL en Drupal 9

Rest Services en Drupal 9 (Parte 1)

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

Requisitos:

Cómo trabajar con Rest en Drupal 9

Paso 1 Activación de módulos RESTfull Web Services y Serialization:

Paso 2 Descarga y activación del módulo REST UI:

Paso 3 Creación y configuración de una vista en formato Json:

Paso 4 Comprobación de la vista en el navegador:

Cómo mostrar contenidos de Drupal, en formato json, sin tener que configurar una vista

Cómo acceder a vistas ya existentes para que se muestren en formato Json

`Configuración de la ( baseURL )`

`Hacer una llamada a la API`