Crear Cliente tipo Personal para API RESTful con laravel

Para conectarse a una API puedes utilizar Laravel y sus componentes para conseguir un sitema seguro y fiable.

En este ejemplo vamos a ver como implentar un cliente API para conectarse y autenticarse en una API creada por nosotros mimsos, que puedes ver en el post de cómo crear una API RESTful con laravel.

También puedes ver cómo crear un cliente tipo Password para API RESTful.

Crear nuevo proyecto cliente

Se puede craear el proyecto laravel a través de la línea de comandos y utilizando el comando

laravel new nombreproyecto

Configurar un nuevo servicio en configuración

Hay que indicar que se va a utilizar un nuevo servicio para llamar a una API. Entoces en el fichero services se añade una propiedad con los valores necesarios, por ejemplo:

config\services.php

'miapi' => [
        'url_api' => env('APP_URL_API'),
        'client_id' => env('API_CLIENT_ID'),
        'client_secret' => env('API_CLIENT_SECRET'),
    ],

El detalle de los parámetros se definen en el fichero .env, para evitar publicar estos datos confidenciales. Y buenas prácticas copiar también en el fichero .env.example, para dar a conocer las variables a quien utilice la aplicación web.

.env
.env.example

APP_URL_API=http://api.test/
API_CLIENT_ID=95b4f637-6d8b-4272-9bc0--------
API_CLIENT_SECRET=cmig33lyYrqKnI5i7Ai--------

Una vez definidas las propiedades, conviente cachearlas en Laravel con el comando config:cache

php artisan config:cache

Ahora no es necesario pero apuntar que para limpiar la caché se hace con la opción :clear

php artisan config:clear

Crear base de datos para el cliente API

Partiendo de que ya se sabe como crear una base de datos, en este ejemplo se usará phpmyadmin en un servidor local bajo Xamp.

Acceder a la url del servidor y poner phpMyAdmin. Ir al panel lateral izquierdo y hacer clic en Nueva. Poner el nombre deseado y hacer clic en botón crear.

Después ir al fichero de configuración del proyecto en Laravel y poner la dirección y nombre de la base de datos.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=mibasededatos
DB_USERNAME=root
DB_PASSWORD=

Instalar sistema de autenticación con Laravel Breeze

Una vez creado y situado dentro se instala el paquete de autenticación Laravel Breeze para tener un fácil y rápido sistema de control de usuarios. Mira como instalar Laravel Breeze.

En resumen son los siguientes comandos:

composer require laravel/breeze --dev
php artisan breeze:install
npm install
npm run dev
php artisan migrate

Crear ruta para solicitar tokens

Abrir el fichero de rutas y añadir dos rutas necesarias, una redirect y la otra callback

routes\web.php

Route::get('/redirect', [OauthController::class, 'redirect'])->name('redirect');

Route::get('/callback', [OauthController::class, 'callback'])->name('callback');

Ambas estarán controladas por el nuevo controlador que se va a crear OauthController.

Crear controlador para solicitar tokens

Para crear el nuevo controlador de las rutas, ejecutar el comando make:controller y nombre del mismo, seguido de la palabra Controller

php artisan make:controller OauthController

Abrir el fichero y agregar los métodos indicados en las rutas 'redirect' y 'callback'

class OauthController extends Controller
{
    public function redirect(Request $request){
        $request->session()->put('state', $state = Str::random(40));

        $query = http_build_query([
            'client_id' => config('services.apiamzn.client_id'),
            'redirect_uri' => route('callback'),
            'response_type' => 'code',
            'scope' => '',
            'state' => $state,
        ]);

        $urlapi = config('services.api.url_api');
        $version = config('services.api.url_api_ver');
        return redirect($urlapi . 'oauth/authorize?'.$query);
    }

    public function callback(Request $request ){
        return $request->all();
    }
}

En este momento se puede registrar un usuario para ir viendo como queda el cliente API.

Modificar vista Dashboard para llamada a la API

Aprovechando la vista del panel de control de usuario que ofrece el paquete Laravel Breeze, editamos el fichero de la vista dashboard.

resources\views\dashboard.blade.php

Modificar y añadir el código para añadir un link tipo botón de llamada a la API

...

<div class="p-6 bg-white border-b border-gray-200">
 Solicitar permisos

 <a href="{{route('redirect')}}" class="bg-blue-800 hover:bg-blue-200 text-white font-bold py-2 px-4 rounded">
 Redirigir
 </a>


                </div>

...

Cambio de estilos css en al API

Puede que el paquete passport venga con el paquete de estilos de bootstrap, y no se muestre bien, ya que la API está con estilos Tailwind.

Es facil cambiarlo, publicando las vistas y modificando el CDN

En la API (no en el cliente actual) ejecutar el comando vendor:publish y se le pasa las vistas a publicar

php artisan vendor:publish --tag=passport-views

Este copia los directorios y ficheros privados a la carpeta pública

Carpeta origen: \vendor\laravel\passport\resources\views
Carpeta destino: \resources\views\vendor\passport

Después de publicar los fichero s hay que limpiar y compilar de nuevo con los comandos

php artisan clear-compiled
composer dumpautoload

Abrir entonces el fichero authorize para cambiar el CDN de tailwind a bootstrap, para el ejemplo la versión 5.

resources\views\vendor\passport\authorize.blade.php

{{--<link href="{{ asset('/css/app.css') }}" rel="stylesheet">--}}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Generar un Cliente para API de tipo Personal

En el post ya indicamos cómo crear un cliente tipo Password, pero en esta ocasión estamos con un ejemplo de cliente para API de tipo personal, y que se genera indicando el tipo --personal

php artisan passport:client --personal

Pide dar un nombre, y si se omite toma el nombre por defecto "Laravel Personal Access Client"

Entonces de esta forma genera el Client ID y el Client Secret mostrándolo por consola.

Copiar las credenciales generadas al fichero .env del cliente y cachear de nuevo.

.env

...

Client ID: 95ba2a63-fd31-409d-a980--------
Client secret: Jr2XoNr8nLyAHqTlfih--------

...

php artisan config:cache
php artisan migrate:fresh

Así ya se podría acceder a la API desde el cliente tipo Personal.