Guide · BankID

Hur bygger man BankID-inloggning i Next.js och React?

BankID-inloggning i en webbapp byggs mot BankID:s API för förlitande parter från er server, aldrig från webbläsaren. Servern startar en order, visar en animerad QR-kod som byts varje sekund (eller öppnar BankID-appen direkt på samma enhet), frågar BankID om status och skapar en egen session först när ordern är klar. Certifikatet som identifierar er mot BankID stannar på servern, och personnumret ni får tillbaka är en personuppgift som ska skyddas. Vi kör BankID-inloggning i Autofixter, tillsammans med Stripe, Klarna och Swish i samma kassa.

Så fungerar flödet

  1. Starta ordern på servern

    Er API-route anropar BankID:s auth-tjänst med användarens IP-adress och får tillbaka en orderreferens och de värden som behövs för QR-koden och applänken.

  2. Visa en animerad QR-kod eller öppna appen

    Servern skapar en ny QR-kod varje sekund utifrån de värdena, och sidan hämtar och visar den. På samma enhet öppnar sidan i stället BankID-appen med autostart-token.

  3. Fråga efter status

    Servern anropar BankID:s collect för ordern ungefär varannan sekund och översätter varje hintCode till BankID:s rekommenderade användarmeddelanden, till exempel att starta appen. Skannas inte QR-koden i tid misslyckas ordern och användaren behöver starta en ny.

  4. Skapa en egen session

    När collect svarar complete kontrollerar servern att ordern hör till webbläsarsessionen som startade den (håll orderRef på serversidan och ta aldrig emot en från sidan), skapar sedan en egen session och sparar bara de identitetsuppgifter som behövs.

  5. Avbryt övergivna order

    Om användaren avbryter eller lämnar sidan medan ordern pågår anropar ni cancel, så att nästa försök börjar rent.

Vanliga misstag

  • Att anropa BankID från webbläsaren

    Certifikatet för förlitande part får aldrig lämna servern. Alla anrop till BankID går via er backend.

  • En statisk QR-kod

    BankID kräver en animerad QR-kod; statiska QR-koder stöds inte längre. Varje ny kod skapas på servern utifrån orderns hemlighet och antalet sekunder sedan ordern startade, så en kopierad kod, till exempel i en skärmdump, slutar snabbt att fungera. Behåll hemligheten på servern och skicka bara den färdiga koden till sidan.

  • Att behandla inloggning som behörighet

    BankID talar om vem personen är, inte vad den får komma åt. Det är behörighetsmodellens jobb, i backend och helst även i databasen.

  • Personnummer i loggar

    Personnumret är en personuppgift, och enligt dataskyddslagen (3 kap. 10 §) får det behandlas utan samtycke bara när det är klart motiverat med hänsyn till ändamålet, vikten av en säker identifiering eller något annat beaktansvärt skäl. Skriv ner varför ni behöver det, håll det borta från loggar, analysverktyg och URL:er, använd ett eget internt id som nyckel och spara personnumret bara där ni behöver det.

  • BankID-anrop från Edge-runtime

    BankID identifierar er tjänst med dess klientcertifikat över ömsesidig TLS, och det kan Edge-runtime inte skicka med. Lägg anropen i Route Handlers eller Server Actions på Node.js-runtime (standard) och hämta endUserIp från proxyns forwarded-header, inte serverns egen adress.

Exempel

Identitet och betalning i samma kassa

Autofixter har BankID-inloggning och Stripe, Klarna och Swish i samma kassa. Bygger ni samma kombination är ett bra generellt mönster att identifiera användaren först, låta köpet vara en enda order på servern och lägga varje betalleverantör bakom samma gränssnitt på serversidan, så att inloggningen inte påverkas när en leverantör läggs till eller byts.

Frågor

Vad behöver vi för att använda BankID i produktion?
Ett avtal med en bank som erbjuder BankID till företag, som ger er ett produktionscertifikat, eller en identitetstjänst som sköter integrationen åt er. Utveckling och test görs i BankID:s testmiljö med ett testcertifikat och ett test-BankID.
Ska vi integrera direkt eller använda en identitetstjänst?
En identitetstjänst går snabbare att komma igång med och sköter certifikat och API åt er, mot en avgift. En direkt integration ger full kontroll, men då äger ni certifikatet och säkerheten kring det.
Kan en AI-agent eller chattbot använda BankID?
BankID kan bekräfta vem personen är innan en agent agerar åt den, till exempel innan den visar orderhistorik. Agenten ska sedan bara få de behörigheter som den verifierade användaren har, kontrollerat i er backend.
Fungerar BankID både i mobilen och på datorn?
Ja. På en dator skannar användaren den animerade QR-koden med BankID-appen i mobilen; i mobilen öppnar sidan BankID-appen direkt.

Vill ni ha det här på plats i er kodbas?

Börja med ett kostnadsfritt introsamtal på 30 minuter. Vi tittar på era repon och säger ärligt var ni bör börja.

Boka introsamtal