Innloggingsstrategi for en ren JavaScript-applikasjon

Innlogging med en ren JavaScript-basert applikasjon (eller en Single Page Application – SPA) kan være en liten utfordring. Med tradisjonelle server-baserte applikasjoner kan man spare på sesjoner i økter via serveren. Det er også enkelt å bruke hemmelig klientnøkler fordi brukeren ikke har tilgang til informasjon som er lagret på serveren. I retur får du gjerne en autorisasjonskode som du kan bruke til å hente ut informasjon eller ved lagring eller sletting av data på API-et.

I en nettleserbasert applikasjon er denne metoden usikker, fordi det er enkelt for brukeren å inspisere koden som kjøres og derved har full tilgang til eventuelle hemmelige nøkler du vil sette.

Det er derfor ikke noe poeng å gjøre det på denne måten, så i stedet skal jeg benytte meg av en metode som kalles «implicit grant», eller implisitt tilgang. Som navnet tilsier får vi ikke direkte tilgang via en autorisasjonskode som over, men vi får i stedet et token. Dette kan tenkes på som en slags midlertidig nøkkel som vi kan bruke til å gjennomføre API-operasjoner.

Dette er bra fra et sikkerhetsperspektiv, for denne nøkkelen inneholder ingen brukerinformasjon og er typisk bare gyldig i en kort periode, og gis bare som følge av et autentisert kall til serveren.

Eksempel-app

I eksempel-appen over skjer følgende: Når du klikker Login, sendes en POST til et tredjeparts-API som ligger på morning-forest-9780.herokuapp.com. Dette APIet er satt opp med Oauth2-autentisering (det er samme metode som Twitter, Facebook og de fleste andre store nettstedene bruker). Hvis innloggingsinformasjonen godkjennes, returnerer APIet et access_token med en forholdsvis kort levetid, og et refresh_token som kan benyttes til å forlenge levetiden.

Så kommer det nyttige. Når du får et godkjent resultat fra serveren, håndteres dette i webapplikasjonen ved at variabelen loggedIn i applikasjonens LoginStore settes til true. Denne variabelen har en getter som gjør det enkelt å vite om brukeren er autentisert eller ikke. I eksempelkoden er det laget en isAuthenticated()-funksjon som brukes til dette formålet.

isAuthenticated

Et enkelt kall til LoginStore.isAuthenticated() gir derfor øyeblikkelig informasjon om brukeren er innlogget.

Eksempel-appen kan nås her: http://learnreact.robbestad.com/#/login