Verificatie configureren in een voorbeeld iOS Swift-app met behulp van Azure AD B2C

  • Artikel

Dit artikel gebruikt een voorbeeld van een iOS Swift toepassing om aan te tonen hoe u de verificatie van Azure Active Directory B2C (Azure AD B2C) kunt toevoegen aan uw webtoepassingen.

Overzicht

OpenID Connect (OIDC) is een verificatieprotocol dat is gebaseerd op OAuth 2.0. U kunt OIDC gebruiken om gebruikers veilig aan te melden bij een toepassing. Dit voorbeeld van een mobiele app maakt gebruik van de Microsoft Authentication Library (MSAL) met de OIDC-autorisatiecode Proof Key for Code Exchange (PKCE) stroom. MSAL is een door Microsoft geleverde bibliotheek die het toevoegen van verificatie- en autorisatieondersteuning aan mobiele apps vereenvoudigt.

De aanmeldingsstroom omvat de volgende stappen:

  1. Gebruikers openen de app en selecteren aanmelding.
  2. De app opent de systeembrowser van het mobiele apparaat en start een verificatieaanvraag voor Azure AD B2C.
  3. Gebruikers registreren of melden zich aan, het wachtwoord opnieuw instellen of zich aanmelden met een sociaal account.
  4. Nadat gebruikers zich hebben aangemeld, retourneert Azure AD B2C een autorisatiecode naar de app.
  5. De app voert de volgende acties uit:
    1. Hiermee worden de autorisatiecode voor een id-token, toegangstoken en vernieuwingstoken uitgewisseld.
    2. Het leest de id-tokenclaims.
    3. De tokens worden opgeslagen in een cache in het geheugen voor later gebruik.

Overzicht van app-registratie

Als u wilt dat de app zich kan aanmelden met Azure AD B2C en een web-API kan aanroepen, registreert u twee toepassingen in de Azure AD B2C-directory:

  • Met de registratie van de mobiele app kan uw app zich aanmelden met Azure AD B2C. Tijdens de app-registratie geeft u de omleidings-URI op. De omleidings-URI is het eindpunt waarnaar gebruikers worden omgeleid door Azure AD B2C nadat ze zich met Azure AD B2C hebben geverifieerd. Het app-registratieproces genereert een toepassings-id, ook wel de client-id genoemd, waarmee uw toepassing op unieke wijze wordt aangeduid (bijvoorbeeld app-id: 1).

  • Met de registratie van een web-API kan de app een beveiligde web-API aanroepen. De registratie maakt de web-API-machtigingen (bereiken) beschikbaar. Het app-registratieproces genereert een toepassings-id, waarmee uw web-API op unieke wijze wordt aangeduid (bijvoorbeeld app-id: 2). Verleen uw app (app-id: 1) machtigingen voor de web-API-bereiken (app-id: 2).

De registratie en architectuur van de toepassing worden geïllustreerd in de volgende diagrammen:

Diagram van de mobiele app met registraties en tokens voor web-API-aanroepen.

Aanroepen naar een web-API

Nadat de verificatie is voltooid, communiceren gebruikers met de app, die een beveiligde web-API aanroept. De web-API maakt gebruik van verificatie via een Bearer-token. Het Bearer-token is het toegangstoken dat de app van Azure AD B2C heeft gekregen. De app geeft het token door in de autorisatieheader van de HTTPS-aanvraag.

Authorization: Bearer <access token>

Als het bereik van het toegangstoken niet overeenkomt met de bereiken van de web-API, verkrijgt de verificatiebibliotheek een nieuw toegangstoken met de juiste bereiken.

De afmeldingsstroom

De afmeldingsstroom omvat de volgende stappen:

  1. Gebruikers melden zich af vanuit de app.
  2. De app wist de sessieobjecten en de verificatiebibliotheek wist de tokencache.
  3. De app brengt gebruikers naar het afmeldingseindpunt van Azure AD B2C om de Azure AD B2C-sessie te beëindigen.
  4. Gebruikers worden teruggeleid naar de app.

Vereisten

Een computer met:

Stap 1: Uw gebruikersstroom configureren

Wanneer gebruikers zich proberen aan te melden bij uw app, start de app een verificatieaanvraag naar het autorisatie-eindpunt via een gebruikersstroom. De gebruikersstroom definieert en bepaalt de gebruikerservaring. Nadat gebruikers de gebruikersstroom hebben voltooid, genereert Azure AD B2C een token en leidt het gebruikers vervolgens terug naar de toepassing.

Maak een gebruikersstroom of een aangepast beleid als u dit nog niet hebt gedaan. Herhaal de stappen om de volgende drie afzonderlijke gebruikersstromen te maken:

  • Een gecombineerde gebruikersstroom voor aanmelden en registreren, zoals susi. Deze gebruikersstroom ondersteunt ook de ervaring Wachtwoord vergeten.
  • Een gebruikersstroom voor profielbewerking, zoals edit_profile.
  • Een gebruikersstroom voor Wachtwoord opnieuw instellen, zoals reset_password.

Azure AD B2C voegt B2C_1_ vóór de naam van de gebruikersstroom toe. susi wordt bijvoorbeeld B2C_1_susi.

Stap 2: Mobiele apps registreren

Maak de mobiele app en de registratie van de web-API-toepassing en geef de bereiken van uw web-API op.

Stap 2.1: Web-API-app registreren

Voer de volgende stappen uit om de registratie van de web-API-app (app-id: 2) te maken:

  1. Meld u aan bij de Azure-portal.

  2. Zorg ervoor dat u de map gebruikt die uw Azure AD B2C-tenant bevat. Selecteer het pictogram Directory's en abonnementen op de portalwerkbalk.

  3. Ga op de pagina Portalinstellingen | Directory's en abonnementen naar uw Azure AD B2C-directory in de lijst Mapnaam en selecteer vervolgens Omzetten.

  4. Zoek en selecteer Azure AD B2C in de Azure-portal.

  5. Selecteer App-registraties en selecteer vervolgens Nieuwe registratie.

  6. Voer bij Naam een naam in voor de toepassing (bijvoorbeeld my-api1). Laat de standaardwaarden voor omleidings-URI en ondersteunde accounttypen staan.

  7. Selecteer Registreren.

  8. Nadat de app-registratie is voltooid, selecteert u Overzicht.

  9. Noteer voor later gebruik de waarde van de toepassings-id (client) wanneer u de webtoepassing configureert.

    Schermopname waarin wordt getoond hoe u een web-API-toepassings-id kunt krijgen.

Stap 2.2: Bereiken van een web-API-app configureren

  1. Selecteer de my-api1-toepassing die u hebt gemaakt (app-id: 2) om de overzichtspagina te openen.

  2. Selecteer onder BeherenEen API beschikbaar maken.

  3. Selecteer naast URI voor de toepassings-id de link Instellen. Vervang de standaardwaarde (GUID) door een unieke naam (bijvoorbeeld tasks-api) en selecteer Opslaan.

    Wanneer uw webtoepassing een toegangstoken voor de web-API aanvraagt, moet deze de URI toevoegen als het voorvoegsel voor elk bereik dat u voor de API definieert.

  4. Onder Bereiken die door deze API worden bepaald selecteert u Een bereik toevoegen.

  5. Een bereik maken waarin leestoegang tot de API wordt gedefinieerd:

    1. Voer voor bereiknaamtasks.read in.
    2. Voer leestoegang tot taken-API in voor Beheerderstoestemming weergavenaam.
    3. Voer voor Beheerderstoestemming beschrijvingleestoegang tot de taken-API in.

  6. Selecteer Bereik toevoegen.

  7. Selecteer Bereik toevoegen en voeg vervolgens een bereik toe dat leestoegang tot de API definieert:

    1. Voer voor Bereiknaamtasks.write in.
    2. Voer voor Beheerderstoestemming weergavenaamschrijftoegang tot taken-API in.
    3. Voer voor Beschrijving beheerderstoestemmingStaat schrijftoegang tot de Tasks-API toe in.

  8. Selecteer Bereik toevoegen.

Stap 2.3: De mobiele app registreren

Ga als volgt te werk om de registratie van de mobiele app te maken:

  1. Meld u aan bij de Azure-portal.
  2. Selecteer App-registraties en selecteer vervolgens Nieuwe registratie.
  3. Voer onder Naam een naam in voor de toepassing (bijvoorbeeld iOS-app1).
  4. Selecteer onder Ondersteunde accounttypenAccounts in een identiteitsprovider of organisatieadreslijst (voor het verifiëren van gebruikers met gebruikersstromen) .
  5. Selecteer onder Omleidings-URIOpenbare client/systeemeigen (mobiel & bureaublad) en voer vervolgens msauth.com.microsoft.identitysample.MSALiOS://auth in het URL-vak.
  6. Selecteer Registreren.
  7. Nadat de app-registratie is voltooid, selecteert u Overzicht.
  8. Noteer voor later gebruik de toepassings-id (client) wanneer u de webtoepassing configureert. Schermopname van de mobiele app-id.

Stap 2.4: De machtigingen voor de mobiele app verlenen voor de web-API

Voer de volgende stappen uit om uw app (App-id: 1) machtigingen te verlenen:

  1. Selecteer App-registraties en selecteer vervolgens de app die u hebt gemaakt (App-id: 1).

  2. Selecteer onder Beheren de optie API-machtigingen.

  3. Selecteer onder Geconfigureerde machtigingen de optie Een machtiging toevoegen.

  4. Selecteer het tabblad Mijn API's.

  5. Selecteer de API (App-id: 2) waarvoor aan de webclienttoepassing toegang moet worden verleend. Voer bijvoorbeeld my-api1 in.

  6. Vouw onder Machtigingtaken uit en selecteer vervolgens de bereiken die u eerder hebt gedefinieerd (bijvoorbeeld tasks.read en tasks.write).

  7. Selecteer Machtigingen toevoegen.

  8. Selecteer Beheerderstoestemming verlenen voor <naam van uw tenant>.

  9. Selecteer Ja.

  10. Selecteer Vernieuwen en controleer vervolgens of voor beide bereiken Verleend voor... wordt weergegeven onder Status.

  11. Selecteer uw bereik in de lijst geconfigureerde machtigingen en kopieer vervolgens de volledige naam van het bereik.

    Schermopname van het geconfigureerde venster met machtigingen, waarop te zien is dat toegangsmachtigingen zijn verleend.

Stap 3: De voorbeeld web-API configureren

Dit voorbeeld verkrijgt een toegangstoken met de relevante bereiken, die de mobiele app kan gebruiken voor een web-API. Ga als volgt te werk om een web-API aan te roepen vanuit code:

  1. Gebruik een bestaande web-API of maak een nieuwe. Zie Verificatie inschakelen in uw eigen web-API met behulp van Azure AD B2C voor meer informatie.
  2. Wijzig de voorbeeldcode om een web-API aan te roepen.
  3. Nadat u de web-API hebt geconfigureerd, kopieert u de URI van het web-API-eindpunt. In de volgende stappen gebruikt u het web-API-eindpunt.

Tip

Als u geen web-API hebt, kunt u dit voorbeeld nog steeds uitvoeren. In dit geval retourneert de app het toegangstoken, maar kan de web-API niet worden aangeroepen.

Stap 4: Het voorbeeld van de mobiele iOS-app ophalen

  1. Download het .zip-bestand of kloon de voorbeeld webtoepassing vanuit GitHub repo.

    git clone https://github.com/Azure-Samples/active-directory-b2c-ios-swift-native-msal

  2. Gebruik CocoaPods om de MSAL-bibliotheek te installeren. Ga naar de hoofdmap van het project in een terminalvenster. Deze map bevat het podfile-bestand. Voer de volgende opdracht uit:

    pod install

  3. Open de MSALiOS.xcworkspace werkruimte met Xcode.

Stap 5: De voorbeeld mobiele app configureren

Open het bestand ViewController.swift. Het bestand ViewController klasseleden bevat informatie over uw Azure AD B2C-id-provider. De mobiele app gebruikt deze informatie om een vertrouwensrelatie tot stand te brengen met Azure AD B2C, gebruikers aan te melden en af te melden, tokens te verkrijgen en deze te valideren.

Werk de volgende klasseleden bij:

Sleutel Waarde
kTenantName De volledige tenantnaam van uw Azure AD B2C-tenant (bijvoorbeeld contoso.onmicrosoft.com).
kAuthorityHostName Het eerste deel van uw Azure AD B2C-tenantnaam (bijvoorbeeld contoso.b2clogin.com).
kClientID De id van de mobiele app uit stap 2.3.
kRedirectUri De omleidings-URI van de mobiele app vanuit stap 2.3, msauth.com.microsoft.identitysample.MSALiOS://auth.
kSignupOrSigninPolicy De gebruikersstroom voor registratie of aanmelding of het aangepaste beleid dat u in stap 1 hebt gemaakt.
kEditProfilePolicy De profiel bewerken gebruikersstroom of het aangepaste beleid dat u in stap 1 hebt gemaakt.
kGraphURI (Optioneel) Het web-API-eindpunt dat u in stap 3 hebt gemaakt (bijvoorbeeld https://contoso.azurewebsites.net/hello).
kScopes De web-API-bereiken die u in stap 2.4 hebt gemaakt.

Stap 6: de mobiele app uitvoeren en testen

  1. Bouw en voer het project uit met een simulator van een verbonden iOS-apparaat.

  2. Selecteer Aanmelden en registreer u of meld u vervolgens aan met uw lokaal of sociale account van Azure AD B2C.

    Schermopname die aantoont hoe de aanmeldingsstroom wordt gestart.

  3. Als de verificatie is geslaagd, staat uw weergavenaam in de navigatiebalk.

    Schermopname van het Azure AD B2C toegangstoken en gebruikers-id.

Volgende stappen

Leer hoe u het volgende doet: