Usar la Api de Spotify con Laravel

Cómo crear una aplicación simple con Laravel que acceda a los datos relacionados con el usuario mediante la API de Spotify haciendo uso de Guzzle HTTP client.

Registro de la aplicacion en Spotify

Accedemos al dashboard del portal de Spotify para desarrolladores y nos acreditamos con una cuenta de Spotify.
Creamos una nueva app y guardamos las claves Client_Id y Client_Secret.
En Edit Settings añadimos la dirección a la que queremos que nos redirijan tras loguear al usuario: http://spovel.loc:8085/profile/ (en mi caso).

Configuración de las Variables de Entorno

Creamos las variables de entorno agregando estas dos líneas al archivo .env :

SPOTIFY_CLIENT_ID='Tu id de cliente'
SPOTIFY_CLIENT_SECRET='Tu cliente secreto'

Creamos el fichero config/spotify.php y le añadimos el siguiente código :

<?php

return [
    'clientId' => env('SPOTIFY_CLIENT_ID'),
    'clientSecret' => env('SPOTIFY_CLIENT_SECRET')
];

Controlador para interactuar con Spotify

php artisan make:controller SpotifyController

Añadimos un constructor y los atributos que vamos a necesitar, donde $redirectUri será la dirección que especificamos desde el Dashboard de Spotify :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class SpotifyController extends Controller
{   
    private $clientId;
    private $clientSecret;
    private $redirectUri = 'http://spovel.loc:8085/profile/';

    public function __construct(){
        $this->clientId = config('spotify.clientId');
        $this->clientSecret = config('spotify.clientSecret');   
    }

Añadimos los 3 métodos que vamos a utilizar :

login ( )

Nos redirecciona a la autorización de cuenta de Spotify para loguearnos, pasando como parámetros en la URL : el scope ( con los permisos correspondientes), nuestro id de cliente y la página a la que debe redirigirnos. En la respuesta obtenemos el parámetro code en la URL.

<?php
	public function login()
    {
        $scopes = 'user-read-private user-read-email';
        return redirect(
            'https://accounts.spotify.com/authorize' .
                            '?response_type=code' .
                            '&client_id=' . $this->clientId .
                            ($scopes ? '&scope=' . urlencode($scopes) : '') .
                            '&redirect_uri=' . urlencode($this->redirectUri)
        );
    }

getToken ( )

A través de la función de PHP $_GET( ) accedemos al parámetro ‘code’ para intercambiarlo por un Token.

Aquí hacemos uso de Guzzle HTTP Client, el cual viene incluido en Laravel 8.

<?php
    public function getToken()
    {
        $code = $_GET['code'];
       
        $response = Http::withHeaders([
            'Authorization' => 'Basic ' . base64_encode($this->clientId . ':' . $this->clientSecret)            
            ])->asForm()
            ->post('https://accounts.spotify.com/api/token', [
            'code' => trim($code),
            'redirect_uri' => $this->redirectUri,
            'grant_type' => 'authorization_code',
        ]);
        
        return $response->json()['access_token'];

    }

getUser ( )

Enviamos el Token al end-point de la API de Spotify encargado de devolvernos los datos del usuario y retornamos la Vista que nos muestra dichos datos.

<?php
    public function getUser() {
        $token = $this->getToken();

        $profile = Http::withHeaders([
            'Authorization' => 'Bearer ' . $token])
            ->get('https://api.spotify.com/v1/me');
        
        return view('profile')->with(['profile' => $profile->json()]); 
    }

Rutas Web

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SpotifyController;

Route::view('/', 'home')->name('home');
Route::get('login', [SpotifyController::class, 'login'])->name('login');
Route::get('profile', [SpotifyController::class, 'getUser'])->name('profile');

Vistas

Home

Vista que nos invita a loguearnos en Spotify :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Example of the Authorization Code flow with Spotify</title>
</head>
<body>
    <h1>This is an example of the Authorization Code flow</h1>
    <p><a 
        style="background-color:green; color:white; text-decoration:none; border-radius: 5px; padding: .5em;"
        href="{{route('login')}}">Log in with Spotify
        </a></p>
</body>
</html>

Profile

Vista que recibe los datos del usuario y los muestra por pantalla :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Profile</title>
</head>
<body>
    <h2>Perfil del Usuario</h2>
    
    <p>Pais: {{$profile['country']}} </p>
    <p>Nombre: {{$profile['display_name']}} </p>
    <p>email: {{$profile['email']}} </p>
    <p>Dirección de Usuario: {{$profile['external_urls']['spotify']}} </p>
    <img src="{{$profile['images'][0]['url']}}" alt="profile">
    
</body>
</html>

El código completo se encuentra en el siguiente repositorio de GitHub.

Registro de la aplicacion en Spotify

Configuración de las Variables de Entorno

Controlador para interactuar con Spotify

login ( )

getToken ( )

getUser ( )

Rutas Web

Vistas

Home

Profile

Interacciones con los lectores

Comentarios

Deja una respuesta Cancelar la respuesta