Créer un système d'authentification OAuth avec spotify

Voici comment créer un système d'authentification OAuth avec Spotify.

Commencez par créer un compte développeur sur Spotify.

Une fois le compte créé, vous avez accès à un client ID et client Secret.

Ensuite, ajoutez votre site (ex: http://localhost:3000/) et l'URL de callback (ex: http://localhost:3000/callback) dans les settings.

Ajoutez dans votre code (JavaScript, PHP, Python) un lien (ex: /login) qui redirige vers l'adresse suivante :

const CLIENT_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
const REDIRECT_URI = 'http://localhost:3000/callback';

const scope 'user-read-email'; // Plus d'infos sur https://spoti.fi/3sp8zZY
const state 'f5d587a11cf33f26812ff17bbedb1928' // une chaine aléatoire de 16 caractères

res.redirect(`https://accounts.spotify.com/authorize?response_type=code&client_id=${CLIENT_ID}&scope=${scope}&redirect_uri=${REDIRECT_URI}&state=${state}`);

Une fois que la personne à cliquer sur le lien spotify, cela lui demandera si il accepte de nous fournir ces informations, dans notre cas il s'agit de l'email (user-read-email).

Cela redirigera ensuite la personne sur l'adresse de callback avec le paramètre code.

Ce paramètre code nous sert à récupérer le token d'accès pour communiquer avec l'API de spotify.

const { code } = req.query;
const { CLIENT_ID, CLIENT_SECRET, REDIRECT_URI } = process.env;

const { access_token: accessToken } = await fetch('https://accounts.spotify.com/api/token', {
	method: 'POST',
	headers: {
		Authorization: `Basic ${Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString('base64')}`,
		'Content-Type': 'application/x-www-form-urlencoded',
	},
	body: new URLSearchParams({
		code,
		redirect_uri: REDIRECT_URI,
		grant_type: 'authorization_code',
	}),
}).then((r) => r.json());

On peut à présent récupérer l'email de l'utilisateur :

const { email } = await fetch('https://api.spotify.com/v1/me', {
	headers: { Authorization: `Bearer ${accessToken}` },
}).then((r) => r.json());

Références :