Hvordan integrere Azure Entra ID med Django

Hvordan integrere Azure Entra ID med Django

Christian De Frène
Christian De Frène
25. november 2024

Teknisk arkitektur

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!

Guide

Integrasjonen innebærer følgende steg:

1. Lag Entra ID app registrations i Azure-portalen

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

Appregistreringene Mist Frontend og Mist Backend i Azure-portalen

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.

2. Installer og konfigurer pakken django-auth-adfs

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.

3. Installer klient-spesifikke pakker

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.

4. Tilpass eksisterende business-logikk for innlogging

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:

Innlogging i Mist med Microsoft Entra ID

Oppsummert

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:

schni.tsxtypescript

Fra idé til et produkt klart for markedet

La oss utforske mulighetene sammen

Kom i gang

Relaterte artikler