🛠️Client Spotify

Cette année j'ai voulu commencer à faire une application avec l'api Spotify. Le but du projet est de recréer une application client et d'améliorer la gestion des playlists qui n'est vraiment pas à mon goût. Pour le moment je suis toujours dans la phase de R&D ( recherche et développement ). Pour le moment j'ai réussis à créer la page de connexion à spotify, sans outils externe, afin de récupérer le token pour les requêtes à l'api.

Le principe est tout simple:

1. Après avoir créer l'application sur api.spotify.com on envoi une requête avec l'id de notre app

const params = new URLSearchParams({
  response_type: 'code',
  client_id: clientId,
  scope: 'user-read-private user-read-email',
  redirect_uri: 'http://localhost:8080/callback',
  state: 'ioquegfqbdkjcbwug'
})

function login() {
  console.log('https://accounts.spotify.com/authorize?' + params)
  window.location.href = 'https://accounts.spotify.com/authorize?' + params.toString()
}

1. Ensuite on est rediriger sur une page de login :

1. Une fois logger, on est renvoyé sur notre application sur la path "/callback" avec comme paramètre un code. Il ne reste plus qu'à envoyer le code avec le l'id et le token secret pour récupérer un token, qui donne accès à toutes les requêtes.

<template>
    callback
    {{ user }}
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import axios from 'axios';

const router = useRouter()
const code = router.currentRoute.value.query.code as string
const clientId = 'id';
const clientSecret = 'secret'

const auth = ref()
const user = ref()

const params = new URLSearchParams();
params.append('code', code);
params.append('redirect_uri', 'http://localhost:8080/callback');
params.append('grant_type', 'authorization_code');

onMounted(() => {
    axios.post('https://accounts.spotify.com/api/token', params, {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': 'Basic ' + btoa(clientId + ':' + clientSecret)
        }
    })
    .then((response) => {
        console.log(response)
        if (response.status == 200) {
            document.cookie =
                "token=" + response.data.access_token + ";" + 'max-age=3600' + ";path=/";
        }
        // router.push('/')
        window.location.href = '/'
    })
    .catch(() => {
        window.location.href = '/'
    })
})

</script>

Je met le token en cookie afin de le garder, et voilà ! Démonstration animée :