OAUTH - Juliusmeeuwisse/blok-tech-crocmeisters GitHub Wiki

OAuth

OAuth is een protocol voor het krijgen van autorisatie bij apps of websites. Het protocol werkt volgens een authentication flow waarbij een aantal handeling moeten gebeuren voordat er autorisatie wordt verleend. Het idee is dat er toegang wordt verleend als de gebruiker een zogeheten 'token' heeft. Een token is eigenlijk je entreebewijs tot de service waar je gebruik van wilt maken. Om dit token te krijgen moet je eerst de authentication flow volgen.

Authentication Flow

De authentication flow is de handelingen die genomen worden voor het verkrijgen van een Token. Deze flow kan op verschillende manieren plaats vinden, dit noemen we grant-types, ik ga alleen de grant-types behandelen die voor het gebruik maken van de Spotify-API gebruikt worden. De authentication flow voor Spotify kan via drie verschillende grant-types, namelijk:

  • Authorization Code
  • Client Credentials
  • Implicit Grant

Voor elke grant-type heb je een andere flow en gelden er andere scopes voor het ophalen van Data.

Authorization Code

De eerste grant-type is Authorization Code, deze aanmeld flow is geschikt voor applicaties waarbij je langere tijd bent ingelogd. via deze flow krijg je maar één keer toestemming tot het gebruik van de app. Deze toestemming krijg je in de vorm van een Acces-token dit Acces token is een uur lang geldig waarna deze vervalt. Ook krijg je een refresh-token, dit token gebruik je om je acces token te vernieuwen voordat deze verloopt na het uur dat deze geldig is.

Zodra je je aanmeld wordt je door gestuurd naar een aanmeld omgeving waarin er om toestemming wordt gebruikt dat de app jouw gegevens gebruikt. Als je inlogt met een bestaand account en je gaat akkoord met de voorwaarden wordt je geredirect waarna je een acces-token ontvangt. je kunt nu met dit token requests maken naar de app of website. De authorization Code flow voor Spotify ziet er als volgt uit:

Voor het gebruik van deze flow heb je een client-id, secret-id en een callback-url nodig. hier leg ik straks meer over uit.

Implicit Grant

De Implicit Grant flow wordt gebruikt als je app volledig gebouwd is met Javascript en geen server side code wordt gebruikt. Je maakt dus vanuit de Client side requests naar de Spotify API. Je dient wel in te loggen bij Spotify waarna je een Acces-token ontvangt, met dit token heeft een korte verloop tijd en kan niet worden verlengt met een refresh-token, dit is dus handig als je bijvoorbeeld eenmalig informatie nodig hebt op een pagina. De Implicit Grant flow voor Spotify ziet er als volgt uit:

Client Credentials

De laatste manier van aanmelden bij Spotify is via de Client Credentials flow en wordt gebruikt bij een server naar server authentication, met deze manier is het dus niet mogelijk om gebruikers informatie op te vragen. Ook hier krijg je nadat je een request naar Spotify hebt gedaan een acces-token terug die gebruikt kan worden voor het benaderen van de API. De Implicit Grant flow voor Spotify ziet er als volgt uit:

Conclusie

Ik heb gekozen voor de eerste authentication flow, de Authorization Code, ik heb gekozen voor deze flow omdat je met deze flow de meeste data kunt opvragen en inzien, ook is het idee dat je voor langere tijd ingelogd bent, dus als mijn gebruiker twee uur lang gebruik wilt maken van de applicatie moet dit kunnen, dit is bij de andere twee manieren niet mogelijk. Client credentials flow viel gelijk al af omdat het niet mogelijk is om gebruikers data op te halen en dit wil nodig is in de applicatie die wij maken. Ik heb dus gekozen voor Authorization code. Hier onder leg ik uit hoe je dan precies je autoriseert via deze flow.

authentication bij Spotify met Authorization Code

Om met Authentication Code te kunnen inloggen moet je de app registreren bij Spotify, dit doe je op de volgende website: https://developer.spotify.com/dashboard/

Op dit dashboard maak je je app aan waarbij je aangeeft hoe de app heet, en wat de callback-url is. deze url is waar je naar wordt terug verwezen zodra je bent aangemeld bij Spotify zodat je je acces-token kan ontvangen. Je aangemaakte app, bevat een Client-id, een client-secret en de callback-url. Deze gegevens heb je nodig om met de Spotify-API te kunnen verbinden

Zodra je naar My Music Match gaat wordt er gevraagd om in te loggen, wanneer je dit doet wordt je geredirect naar Spotify, de code die ik hier voor gebruik ziet er als volgt uit:

model

const SpotifyWebApi = require('spotify-web-api-node')

// Spotify authorization
const spotifyApi = new SpotifyWebApi({
  clientId: process.env.CLIENT_ID,
  clientSecret: process.env.CLIENT_SECRET,
  redirectUri: process.env.CALLBACK_URL
})

// scope defines which information the user can ask for
const scopes = [
  'ugc-image-upload',
  'user-read-currently-playing',
  'streaming',
  'app-remote-control',
  'user-read-email',
  'user-read-private',
  'playlist-read-collaborative',
  'playlist-modify-public',
  'playlist-read-private',
  'playlist-modify-private',
  'user-library-read',
  'user-top-read',
  'user-read-playback-position',
  'user-read-recently-played',
  'user-follow-read',
  'user-follow-modify'
]

const authorizeURL = spotifyApi.createAuthorizeURL(scopes, 'checkcheck')

module.exports = {
  authorizeURL: authorizeURL,
  spotifyApi: spotifyApi
}
  • Controller *
const spotifyApi = spotifyAuth.spotifyApi
const authorizeURL = spotifyAuth.authorizeURL

const redirectToSpotifyLogin = (req, res) => {
  res.redirect(authorizeURL)
}

Wanneer je binnen de Spotify omgeving inlogt wordt je terug verbonden naar de callback url die je hebt ingevoerd in het dashboard. hier verkrijg je je acces-token en je refresh-token die ik opsla op het spotifyApi object door middel van de volgende code:

const setAccestokens = (req, res) => {
  const { code } = req.query
  spotifyApi.authorizationCodeGrant(code)
    .then((data) => {
      spotifyApi.setAccessToken(data.body.access_token)
      spotifyApi.setRefreshToken(data.body.refresh_token)
})

Je hebt nu een acces-token waarmee je requests kan maken naar de Spotify-API, de autorisatie is dus geslaagd. vanaf hier kun je requests maken naar de API totdat de token verloopt, dan kun je deze refreshen en verder gaan met je sessie.

⚠️ **GitHub.com Fallback** ⚠️