
Mist er en webapplikasjon som består av en backend skrevet i Django, en frontend skrevet i React, og et kommunikasjonslag som baserer seg på GraphQL. For å integrere mot Entra ID er vi derfor nødt til å starte autentiseringsøkten på klientsiden (frontend) slik at bruker kan oppgi innloggingsdetaljer, for deretter å overføre økten til tjenersiden (backend) for å sjekke tilganger på applikasjonsnivå. Denne artikkelen tar utgangspunkt i denne arkitekturen.
Selve interaksjonen med Entra ID skjer gjennom enten Microsoft Graph APIet, eller Microsoft Authentication Library (MSAL). Heldigvis finnes det eksisterende pakker som gjør de tunge løftene for oss, så vi slipper å kode dette fra bunnen av!
Integrasjonen innebærer følgende steg:
Autentiseringsprosedyren baserer seg på at man kobler seg mot en konfigurasjon (app registration) som er opprettet på din organisasjon i Azure. For arkitekturer med en klient- og tjenerside er man nødt til å opprette én app registration for hver av dem ( frontend og backend ), dog med noen ulike parametre.
Vi fulgte denne oppskriften for å konfigurere alt nødvendig oppsett: https://django-auth-adfs.readthedocs.io/en/latest/azure_ad_config_guide.html

Når oppsettet er fullført sitter man igjen med et sett konfigurasjonsnøkler som skal brukes av klient- og tjenerapplikasjonene i neste steg.
I denne portalen kan man også gjøre videre tilgangsbegrensninger og -tilpasninger. Et tips vi mottok fra brukeren som ba oss legge til støtte, er å gå til Enterprise Applications i sidemenyen og søke opp appregistreringene man akkurat opprettet. Der kan man tilegne brukere og grupper, slik at kun disse har mulighet til å logge inn på applikasjonen.
Vi brukte pakken django-auth-adfs for å utvide Djangos autentiseringssystem med støtte for Entra ID.
Først er vi nødt til å legge inn env-variablene AZURE_CLIENT_ID , AZURE_CLIENT_SECRET og AZURE_TENANT_ID som ble hentet ut fra appregistreringen til backend fra steg 1.
Konfigurasjonen legges i settings.py. Der styrer CLAIM_MAPPING hvordan
brukerdata fra Entra ID sendes videre til Djangos User-modell. Du velger selv
hvor mye data som skal hentes inn.
Dette steget avhenger av hvilken teknologi du bruker på frontend av applikasjonen din. For Mist, som bruker React, trengte vi installere pakkene @azure/msal-browser og @azure/msal-react .
Først legger man inn env-variablene AZURE_CLIENT_ID , AZURE_TENANT_ID som ble hentet ut fra appregistreringen til frontend fra steg 1, samt AZURE_BACKEND_CLIENT_ID som ble hentet ut fra appregistreringen til backend . Husk at disse må være eksponert til nettleseren; i vårt tilfelle bruker vi prefikset REACT_APP_ til dette.
Deretter lager du et msalConfig-objekt som håndterer SSO-innloggingen, og en
<SignInWithMicrosoft />-komponent til innloggingssiden. Funksjonene
handleLogin og handleLoginFailure sender tilgangstokenet fra Entra ID videre
til tjenersiden, der det valideres og brukes av forretningslogikken.
Mist støttet allerede tokenbasert innlogging med brukernavn og passord, og vi
ønsket å beholde den ved siden av SSO. Begge deler kan støttes med en egen
middleware som utvider den eksisterende innloggingslogikken. Den nye klassen
legges i middleware-listen i settings.py. Resultatet er en egen knapp for
innlogging med Microsoft Entra ID:

Er du i en lignende situasjon som oss, kan vi trygt si at en slik integrasjon både er mulig å legge til (selv i en eksisterende Django-applikasjon) og heller ikke er særlig vanskelig eller tidkrevende å utføre.
Det er selvsagt mulig å skreddersy konfigurasjonen utover eksemplene i denne artikkelen. Her anbefaler jeg å bla gjennom dokumentasjonen til pakkene som ble benyttet, for å få en oversikt over hvilke valgmuligheter som finnes:
La oss utforske mulighetene sammen
Kom i gang