Integrering av svensk BankID i en React Native-applikasjon (+Expo)

 Trenger du å integrere svensk BankID i ditt React Native & Expo-prosjekt?

Iduras nylig lanserte SDK er her for å forenkle prosessen. Integrasjonen kan fullføres på kort tid og gir brukerne en smidig autentiseringsopplevelse.

I dette blogginnlegget viser vi deg hvor enkel integrasjonen er med Idura Verify ved å forbedre en mobilapplikasjon med sikker og uanstrengt autentisering.

Prosessen består av tre trinn:

1. Opprett en ny applikasjon i Idura Dashboard.
2. Installer SDK-en med npm og initialiser den med applikasjonsdetaljene våre. Legg til noen få kodelinjer for å rendere innloggingskomponenten for svensk BankID og hente JWT-påstandene med brukerinformasjon.
3. Når integrasjonen er fullført, kan vi utføre testinnlogginger med en gang.

Ved å integrere svensk Bank ID gjennom Idura kan du automatisk utnytte appbytte, slik at brukerne kan bytte mellom appen din og BankID-appen for å autentisere seg, uten at det er nødvendig med en nettleser.

Vi har lagt ved en video til slutt for å demonstrere den sømløse påloggingsreisen med svensk BankID og Idura.

La oss nå se nærmere på hvert integrasjonstrinn.

Trinn 1: Registrer en ny innloggingsapplikasjon

Først oppretter vi en ny påloggingsapplikasjon på Idura Dashboard.

Vi velger et domene og en klient-ID for applikasjonen vår. Ved å velge Native -> Expo (React Native) som teknologi kommer vi til den relevante integrasjonsveiledningen.

Når applikasjonen er registrert, trenger vi følgende informasjon fra fanen Generelt i applikasjonsinnstillingene:

• Klient-ID for å identifisere appen vår for Idura Verify. Vi valgte urn:cool-energy:expo:bankid.
• Domenet vi skal kommunisere med Idura Verify på.
  Vi bruker cool-energy-test.idura.broker.

Et siste trinn innebærer å legge til en URL for tilbakekalling for applikasjonen vår. Denne URL-adressen er der Idura Verify vil omdirigere brukeren når autentiseringen er vellykket. Det er også destinasjonen der applikasjonen vil motta et JSON Web Token med brukerinformasjon.

Vi utvikler med Expo Go, så vi bruker exp://127.0.0.1:8081/auth/callback som URL for tilbakekalling.

Hvis du setter opp et egendefinert URL-skjema, kan tilbakekallings-URL-en din se slik ut: yourscheme://auth/callback.

Trinn 2: Installer, initialiser og bruk SDK-en i applikasjonen din

La oss gå til kodeditoren og installere Idura Verify Expo SDK med npm:

npm install --save @criipto/verify-expo

Deretter setter vi opp SDK-en ved å pakke inn applikasjonen vår i CriiptoVerifyProvider. Vi bruker domenet og klientID-en til applikasjonen vi nettopp har konfigurert:

// src/App.jsx
import { View} from 'react-native';
import LoginScreen from './LoginScreen.jsx';
import {CriiptoVerifyProvider, useCriiptoVerify} from '@criipto/verify-expo';

export default function App() {
  return (
    <CriiptoVerifyProvider
      domain="cool-energy-test.idura.broker"
      clientID="urn:cool-energy:expo:bankid"
    >
      <View>
        <LoginScreen />
        ...
      </View>
    </CriiptoVerifyProvider>
  );
}

Vi kan nå utnytte den tilpassede kroken useCriiptoVerify() til å håndtere autentiseringsflyten. Her er et forenklet eksempel på en funksjon vi kan bruke:

// src/LoginScreen.jsx  
export default function LoginScreen() {
    const { login, claims, error } = useCriiptoVerify();
  
    const handlePress = async () => {
      try {
        const acrValues = 'urn:grn:authn:se:bankid:same-device';
        const redirectUri = 'exp://127.0.0.1:8081/auth/callback';
        const result = await login(acrValues, redirectUri);
        console.log(result);
      } catch (error) {
        console.error('Authentication Error:', error);
      }
    };
 
  ... 
  }

Vi brukte påloggingsmetoden til å starte autentiseringsprosessen, og sendte de to nødvendige argumentene:

acrValues for å spesifisere eID-en vi ønsker å bruke
redirectUri for tilbakekallings-URL-en

Til slutt legger vi til et UI-element som vil bruke funksjonen vi nettopp opprettet, slik at brukerne kan logge på appen vår med svensk BankID. Vi vil også gjengi JWT-krav og håndtere potensielle autentiseringsfeil:

export default function LoginScreen() {
  const { login, claims, error } = useCriiptoVerify();

  const handlePress = async () => {
    try {
      const redirectUri = 'exp://127.0.0.1:8081/auth/callback';
      const acrValues = 'urn:grn:authn:se:bankid:same-device';
      const result = await login(acrValues, redirectUri);
    } catch (error) {
      console.error('Authentication Error:', error);
    }
  };

  return (
    <>
      <Pressable onPress={handlePress}>
        <Image source={BankIdLogo} />
        <Text>Login with BankID</Text>
      </Pressable>

      {error ? <Text>An error occurred: {error.toString()}</Text> : null}

      {claims ? (
        <View>
          <Text> Name: {claims.name}</Text>
          <Text> SSN: {claims.ssn}</Text>
          <Text> Country: {claims.country}</Text>
        </View>
      ) : null}
    </>
  );
}

Med dette minimale oppsettet kan vi allerede prøve å logge inn med svensk BankID. (Vi trenger bare en testversjon av BankID-appen og en testbruker).

Trinn 3: Opplev autentiseringsflyten med testinnlogginger

Vil du se innloggingsopplevelsen av Expo-applikasjonen vår i aksjon? Ta en titt på videoen nedenfor.

Hvis du har lyst til å prøve det selv, kan du laste ned en eksempelapp fra GitHub.

Er din applikasjon drevet av React Native og Expo?

Vi hjelper deg gjerne med å forbedre den med en sikker og smidig autentiseringsopplevelse. Du kan bruke svensk BankID eller andre eID-er vi støtter.

La oss jobbe sammen for å gjøre appen din enda bedre!

Criipto er nå Idura!

Du kan støte på criipto i domenenavnene og kodeeksemplene våre. Dette er forventet siden vi har byttet navn!

Les hele historien i kunngjøringen vår.