Backend

Voor de eerste opzet was in eerste instantie de bedoeling om NuxtJS te gaan gebruiken, maar ik heb toch gekozen om het simpeler te houden en ExpressJS + EJS te gaan gebruiken. Dit nam al genoeg uitdaging met zich mee en gaf mij meer tijd om zich te focussen op daadwerkelijk de functionaliteiten met simpele pagina routing verbonden.

Voor het routen van pagina's gebruik ik de volgende code

app.get('/', async (req, res) => { // Voor /, /login, /callback, /poster en /demo.
    // Logica hier voor de pagina.
});

Voor de API redirect je naar verschillende pagina's

res.redirect(''); // Redirect naar pagina.

Voor het routen naar eigen pagina's met templating

res.render('poster of demo', { items: data.items }); // Hier render ik de poster of demo met data uit de API mee gestuurd.

Zoals in Spotify API uitgelegd is begin je eerst met de login route, hierin ga je naar https://accounts.spotify.com/authorize en maak je de verbinding tussen je applicatie en de Spotify API

app.get('/login', function (req, res) {
    const state = 'spotify';
    const scope = 'user-top-read';

    const params = new URLSearchParams({
        response_type: 'code',
        client_id,
        scope,
        redirect_uri,
        state
    });

    res.redirect(`https://accounts.spotify.com/authorize?${params.toString()}`);
});

Vervolgens kom je op de login pagina van Spotify aan en log je in als gebruiker. Nu weet Spotify dat deze gebruiker wilt inloggen via de applicatie en stuurt volgens een signaal terug met de access token van de gebruiker. Deze word opgehaald door de applicatie via de fetch methode.

app.get('/callback', async (req, res) => {
    const code = req.query.code || null;
    const state = req.query.state || null;

    if (state === null) {
        res.redirect('/');
    }

    try {
        const response = 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: code,
                redirect_uri: redirect_uri,
                grant_type: 'authorization_code'
            })
        });

        const data = await response.json();
        console.log(data);

        req.session.access_token = data.access_token;
        req.session.refresh_token = data.refresh_token;

        res.redirect('/poster');
    } catch (err) {
        console.error(err);
        res.redirect('/');
    }
});

Na het inloggen en Spotify die goedkeuring geeft dat deze gebruiker de applicatie wilt gebruiken hebben we de access token die we kunnen gebruiken om in de Spotify API de meest geluisterde artiesten op te halen. Dit doen we opnieuw met een fetch. De data uit de fetch sturen we mee wanneer we de poster template gaan renderen met items: data.items.

app.get('/poster', async (req, res) => {
    if (!req.session.access_token) {
        return res.redirect('/');
    }

    const response = await fetch('https://api.spotify.com/v1/me/top/artists?time_range=long_term&limit=30', {
        headers: {
            Authorization: `Bearer ${req.session.access_token}`
        }
    });
    const data = await response.json();
    console.log(data.items);
    res.render('poster', { items: data.items });
});

Demo is vrijwel een 1 op 1 kopie van poster, grote verschil is dat die een snapshot van mijn API data vast heeft die mee geleverd wordt

app.get('/demo', (req, res) => {
    const data = require('./public/demo.json');
    res.render('demo', { items: data });
});

Volgende pagina: Front-end