programador

iván albizu

Main Blog

Blog

Angular consumiendo de WordPress Rest Api – Autenticación

Angular consumiendo de WordPress Rest Api

En esta entrada voy a trabajar con AngularJS y WordPress. WordPress lo voy a usar para generar la Rest Api y AngularJS para leer los datos de WordPress. (Al final de la entrada he publicado un vídeo y el repositorio en Git Hub).

Usaré dos plugins, uno WordPress REST API (Version 2)  genera la Api y otro JWT Authentication for WP REST API genera el sistema de Autenticación mediante JSON WEB TOKEN (JWT).

Configuracíon de WordPress y sus plugins:

El primer plugin, WordPress REST API (Version 2), no requiere de ninguna configuración.
En el segundo plugin, JWT Authentication for WP REST API, tal cómo viene en su página, hay que que modificar el archivo ‘.htaccess’. Mi archivo modificado queda así:

Para terminar con la configuración básica del plugin JWT hay que modificar el archivo ‘wp-config.php’ añadiendo estas dos línea:

A partir de aquí la mayoría de las modificaciones van a ser sobre la instalación de AngularJS realizada usando Yeoman.

Dependencias:

Añadimos la dependencia a UI Boostrap que será usada para mostrar una ventana modal.

Constantes:

Para evitar repeticiones de código y facilitar su mantenimiento añadimos una constante para obtener la base url de nuestra Api WordPress:

Configuración de rutas y $httpProvider:

Según la ruta especificamos la vista y el controlador asociado.

Añadimos ‘Interceptor’ al $httpProvider para que las peticiones a nuestro WordPress Rest Api lleven la cabecera, en este caso la Authorization Bearer usado por el plugin JWT. La Autenticación la almacenamos en Local Storage del navegador.

Login y Autenticación JWT

Creamos dos archivos, ‘services/login-services.js’ y ‘controllers/login.js’.

El servicio LoginServices tendrá un único método llamado login(data), el cual recibe como parámetro el usuario y contraseña que ha introducido el usuario en el controlador. Este parámetro será enviando a la Api WordPress mediante el método Post a la url ‘/jwt-Auth/v1/token’. La respuesta la recibe en controlador. Directamente he enviado el Token, pero podría enviar la respuesta JSON completa y tratarse  entonces en el controlador.

El controlador LoginCtrl sólo tiene un método llamado login(data). Se obtiene en el formulario de la vista los datos introducidos por el usuario que son enviados posteriormente a el servicio, la respuesta se guarda en Local Storage con el nombre ‘token’.

En siguientes entradas publicaré más ejemplos de interacción entre WordPress Rest Api y AngularJS, más concretamente sobre como trabajar con las entradas de WordPress: Listar una o más entradas, crearlas, editarlas y eliminarlas.

https://github.com/ivanalbizu/angular_wordpress_rest_api

Esta entrada tiene 3 comentarios

  1. migue dice:

    gran trabajo Ivan !!!, gracias 😉

  2. Iván Albizu dice:

    Muchas gracias Miguel!
    Me alegro que tu guste. Tengo preparado nuevas partes y más chulas, las publicaré en breve, espero que también te guste.
    Abrazos!

  3. wil dice:

    Excelente aporte Ivan!! exitos para tí.

Deja un comentario





Time limit is exhausted. Please reload CAPTCHA.