Frontend Academy · Lektion

OAuth-flöden från frontend

Implementera Authorization Code-flödet med PKCE i en SPA, byt koden mot tokens, lagra access tokens säkert och undvik implicit flow.

Lektion 4 av 415 steg

OAuth-flöden från frontend är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad är OAuth?

OAuth 2.0 är ett delegeringsprotokoll: er app får tillåtelse att agera för användarens räkning hos en tredjepartstjänst (Google, GitHub med flera) utan att någonsin se användarens lösenord. Det används för 'Sign in with Google', GitHub OAuth-appar och den mesta moderna autentiseringen.

Viktiga roller

Resource Owner: användaren. Client: er app. Authorization Server: OAuth-leverantören (Google, Auth0). Resource Server: API:et som skyddas av access token.

Authorization Code-flödet

Det standardiserade och säkra flödet för serverbaserade appar: 1) Omdirigera användaren till leverantörens inloggning. 2) Användaren loggar in och samtycker. 3) Leverantören omdirigerar tillbaka med en code. 4) Servern byter koden mot en access token (en hemlighet som endast finns på servern).

Varför PKCE behövs för SPA:er

SPA:er kan inte lagra en client secret (den skulle finnas i webbläsarpaketet). PKCE (Proof Key for Code Exchange) ersätter hemligheten med en code verifier och challenge för varje begäran. Det är nu standard för alla publika OAuth-klienter.

PKCE-flödet steg för steg

1) Generera en slumpmässig code_verifier. 2) Beräkna SHA-256-hashen av den = code_challenge. 3) Omdirigera till /authorize med challenge-värdet. 4) Efter samtycket får ni tillbaka en code. 5) Byt code + verifier mot en access token. Leverantören verifierar att challenge = hash(verifier).

Generera code verifier och challenge

Verifier-värdet är en slumpmässig sträng och challenge-värdet är dess SHA-256-kodning i base64-URL-format.

function base64url(arr) {
  return btoa(String.fromCharCode(...arr))
    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

async function generatePKCE() {
  const arr = new Uint8Array(32);
  crypto.getRandomValues(arr);
  const verifier = base64url(arr);
  const hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier));
  const challenge = base64url(new Uint8Array(hash));
  return { verifier, challenge };
}

Omdirigera till leverantören

Bygg authorize-URL:en med challenge, state (CSRF-skydd) och scopes.

const { verifier, challenge } = await generatePKCE();
const state = crypto.randomUUID();
sessionStorage.setItem('pkce_verifier', verifier);
sessionStorage.setItem('oauth_state', state);

const url = new URL('https://accounts.google.com/o/oauth2/v2/auth');
url.searchParams.set('client_id', CLIENT_ID);
url.searchParams.set('redirect_uri', `${origin}/auth/callback`);
url.searchParams.set('response_type', 'code');
url.searchParams.set('scope', 'openid email profile');
url.searchParams.set('code_challenge', challenge);
url.searchParams.set('code_challenge_method', 'S256');
url.searchParams.set('state', state);

window.location.href = url.toString();

Hantera callbacken

Leverantören omdirigerar till er callback-URL med ?code=...&state=.... Verifiera state för att förhindra CSRF och byt sedan koden.

// /auth/callback page:
const params = new URLSearchParams(window.location.search);
const code = params.get('code');
const returnedState = params.get('state');
const expected = sessionStorage.getItem('oauth_state');
if (returnedState !== expected) throw new Error('Bad state');

const verifier = sessionStorage.getItem('pkce_verifier');

const tokens = await fetch('https://oauth2.googleapis.com/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
    grant_type: 'authorization_code',
    code,
    client_id: CLIENT_ID,
    redirect_uri: `${origin}/auth/callback`,
    code_verifier: verifier
  })
}).then(r => r.json());
// tokens: { access_token, id_token, refresh_token, expires_in }

Lagra tokens säkert

Bästa praxis: lagra inte access tokens i localStorage (de kan stjälas via XSS). Alternativ: 1) Endast i minnet (rensas vid uppdatering — ny autentisering krävs). 2) HttpOnly-cookie (sätts av er backend efter PKCE-flödet och kan inte stjälas av JavaScript).

Undvik implicit flow

Det gamla implicit flow returnerar access token direkt i URL-fragmentet. Det har ersatts enligt OAuth 2.0 Security BCP eftersom tokens läcker till webbläsarhistorik och refererfält. Använd alltid Authorization Code + PKCE.

Refresh tokens

Access tokens upphör att gälla (vanligtvis efter en timme). En refresh token med längre giltighet hämtar nya access tokens i bakgrunden. För SPA:er levereras refresh tokens allt oftare via HttpOnly-cookies — aldrig via localStorage.

ID tokens kontra access tokens

ID token (OpenID Connect): en JWT som bevisar vem användaren är. Access token: en opaque token eller JWT som används för att anropa API:er. Verifiera ID-tokenens signatur och claims (iss, aud, exp, nonce) innan ni litar på den.

Auth-bibliotek

Skriv inte en egen implementation. Använd: oidc-client-ts för ren OIDC, auth0/spa-js för Auth0, @clerk/clerk-react för Clerk, NextAuth.js/Auth.js för Next och Nuxt-auth för Nuxt. De hanterar PKCE, refresh och lagring.

Snabbkontroll

Varför måste Single-Page Applications använda PKCE (Proof Key for Code Exchange) med Authorization Code-flödet i stället för enbart det grundläggande Authorization Code-flödet?

Besvara frågan i den interaktiva lektionen

Sammanfattning: OAuth i frontend

Authorization Code + PKCE är den moderna standarden för SPA:er. Generera verifier + S256-challenge för varje begäran. Omdirigera till /authorize med challenge + state. Verifiera state i callbacken. Byt code + verifier mot tokens. Använd aldrig implicit flow. Föredra HttpOnly-cookies för tokenlagring. Använd bibliotek (auth0-spa-js, oidc-client-ts, NextAuth) — skriv inte en egen implementation.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”OAuth-flöden från frontend” gratis?

Ja – hela texten till ”OAuth-flöden från frontend” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”OAuth-flöden från frontend”?

Implementera Authorization Code-flödet med PKCE i en SPA, byt koden mot tokens, lagra access tokens säkert och undvik implicit flow. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”OAuth-flöden från frontend”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Frontend Academy-lektionen?

Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Frontend Academy