Enkel BankID pålogging med Criipto og Firebase

Vi er i sluttfasen av et prosjekt der bruker vi BankID for autentisering ved hjelp av Criipto og Firebase. I utgangspunktet så vi for oss at det kom til å bli mye jobb og en lang prosess, men det var overraskende enkelt og smertefritt.

Criipto

BankID har en liste over partnere man kan benytte. Vi valgte å gå for Criipto ettersom de var greit priset og gjorde oppsettet smertefritt. Man kan teste tjenesten gratis med fiksjonelle bankid brukere. For å bruke reelle BankID pålogginger må man ha et aktivt abonnement. Selve oppsettet av BankID pålogging var så enkelt som å fylle ut et skjema så opprettes en ny OpenID provider.

For å gå over i produksjon fylte vi ut et skjema hos Criipto som de videreformidlet til banken. En dag senere fikk vi tilsendt en lenke fra banken med signering av BankID avtalen.

Firebase

I firebase oppretter man en ny OpenID Connect authentication provider og fyller inn dataene fra Criipto. Når en bruker prøver å logge seg på ved hjelp av bibliotekene til Firebase vil han bli møtt med det vanlige BankID pålogging vinduet. Nye brukere opprettes automatisk som brukere i Firebase og alt av tokens blir automatisk holdt i livet mellom sesjoner om man ønsker det. Det siste som gjenstår er å lage en enkel frontend for pålogging. Her er en ned strippet versjon som login siden, vi bruker Nuxt (Vue) og VueFire for integrasjon mot Firebase:

// /pages/login.vue
<template>
  <div>
    <Button label="Logg inn" @click="login"/>
  </div>
</template>

<script setup>
import { signInWithPopup, OAuthProvider } from 'firebase/auth'

const provider = new OAuthProvider('oidc.valgt-navn-i-firebase');
const auth = useFirebaseAuth() //NB: https://vuefire.vuejs.org/
const router = useRouter()

const login = async() => {
  try{
    await signInWithPopup(auth, provider)
    router.push({path: route.query.redirect ? route.query.redirect : '/'})
  }
  catch(err){
    throw err
  }
}
</script>