Zelf studie: id-providers toevoegen aan uw toepassingen in Azure Active Directory B2CTutorial: Add identity providers to your applications in Azure Active Directory B2C

Het is wellicht wenselijk dat uw gebruikers zich in uw toepassingen bij verschillende id-providers kunnen aanmelden.In your applications, you may want to enable users to sign in with different identity providers. Een id-provider maakt, onderhoudt en beheert id-gegevens en biedt tegelijkertijd verificatieservices voor toepassingen.An identity provider creates, maintains, and manages identity information while providing authentication services to applications. U kunt met behulp van de Azure Portal ID-providers toevoegen die door Azure Active Directory B2C (Azure AD B2C) worden ondersteund voor uw gebruikers stromen .You can add identity providers that are supported by Azure Active Directory B2C (Azure AD B2C) to your user flows using the Azure portal.

In dit artikel leert u het volgende:In this article, you learn how to:

  • De toepassingen voor de ID-provider makenCreate the identity provider applications
  • De id-providers toevoegen aan uw TenantAdd the identity providers to your tenant
  • De id-providers toevoegen aan uw gebruikers stroomAdd the identity providers to your user flow

Normaal gesp roken gebruikt u slechts één ID-provider in uw toepassingen, maar u hebt de mogelijkheid om meer toe te voegen.You typically use only one identity provider in your applications, but you have the option to add more. Deze zelf studie laat zien hoe u een Azure AD-ID-provider en een Facebook-ID-provider aan uw toepassing kunt toevoegen.This tutorial shows you how to add an Azure AD identity provider and a Facebook identity provider to your application. Het toevoegen van beide id-providers aan uw toepassing is optioneel.Adding both of these identity providers to your application is optional. U kunt ook andere id-providers toevoegen, zoals Amazon, github, Google, LinkedIn, micro softof Twitter.You can also add other identity providers, such as Amazon, GitHub, Google, LinkedIn, Microsoft, or Twitter.

Als u nog geen abonnement op Azure hebt, maak dan een gratis account aan voordat u begint.If you don't have an Azure subscription, create a free account before you begin.

VereistenPrerequisites

Maak een gebruikers stroom zodat gebruikers zich kunnen registreren en zich kunnen aanmelden bij uw toepassing.Create a user flow to enable users to sign up and sign in to your application.

Toepassingen makenCreate applications

ID-provider toepassingen bieden de id en de sleutel om communicatie met uw Azure AD B2C-Tenant mogelijk te maken.Identity provider applications provide the identifier and key to enable communication with your Azure AD B2C tenant. In deze sectie van de zelf studie maakt u een Azure AD-toepassing en een Facebook-toepassing van waaruit u id's en sleutels kunt toevoegen om de id-providers toe te voegen aan uw Tenant.In this section of the tutorial, you create an Azure AD application and a Facebook application from which you get identifiers and keys to add the identity providers to your tenant. Als u slechts een van de id-providers toevoegt, hoeft u alleen de toepassing voor die provider te maken.If you're adding just one of the identity providers, you only need to create the application for that provider.

Een Azure Active Directory-toepassing makenCreate an Azure Active Directory application

Als u het aanmelden voor gebruikers vanuit Azure AD wilt inschakelen, moet u een toepassing registreren in de Azure AD-Tenant.To enable sign-in for users from Azure AD, you need to register an application within the Azure AD tenant. De Azure AD-Tenant is niet hetzelfde als uw Azure AD B2C-Tenant.The Azure AD tenant is not the same as your Azure AD B2C tenant.

  1. Meld u aan bij de Azure Portal.Sign in to the Azure portal.

  2. Zorg ervoor dat u de map met uw Azure AD-Tenant gebruikt door het filter Directory + abonnement te selecteren in het bovenste menu en de map te kiezen die uw Azure AD-Tenant bevat.Make sure you're using the directory that contains your Azure AD tenant by selecting the Directory + subscription filter in the top menu and choosing the directory that contains your Azure AD tenant.

  3. Kies alle services in de linkerbovenhoek van de Azure Portal en zoek en selecteer app-registraties.Choose All services in the top-left corner of the Azure portal, and then search for and select App registrations.

  4. Selecteer nieuwe registratie.Select New registration.

  5. Voer een naam in voor de toepassing.Enter a name for your application. Bijvoorbeeld Azure AD B2C App.For example, Azure AD B2C App.

  6. Accepteer de selectie van accounts in deze organisatie Directory alleen voor deze toepassing.Accept the selection of Accounts in this organizational directory only for this application.

  7. Voor de omleidings-URIaccepteert u de waarde van Web en voert u de volgende URL in in kleine letters, waarbij u your-B2C-tenant-name vervangt door de naam van uw Azure AD B2C Tenant.For the Redirect URI, accept the value of Web and enter the following URL in all lowercase letters, replacing your-B2C-tenant-name with the name of your Azure AD B2C tenant.

    https://your-B2C-tenant-name.b2clogin.com/your-B2C-tenant-name.onmicrosoft.com/oauth2/authresp
    

    Bijvoorbeeld https://contoso.b2clogin.com/contoso.onmicrosoft.com/oauth2/authresp.For example, https://contoso.b2clogin.com/contoso.onmicrosoft.com/oauth2/authresp.

    Alle Url's moeten nu gebruikmaken van b2clogin.com.All URLs should now be using b2clogin.com.

  8. Selecteer registrerenen noteer vervolgens de client-id die u in een latere stap gebruikt.Select Register, then record the Application (client) ID which you use in a later step.

  9. Selecteer onder beheren in het toepassings menu de optie Certificaten & geheimenen selecteer vervolgens Nieuw client geheim.Under Manage in the application menu, select Certificates & secrets, then select New client secret.

  10. Voer een Beschrijving in voor het client geheim.Enter a Description for the client secret. Bijvoorbeeld Azure AD B2C App Secret.For example, Azure AD B2C App Secret.

  11. Selecteer de verval periode.Select the expiration period. Accepteer voor deze toepassing de selectie van in één jaar.For this application, accept the selection of In 1 year.

  12. Selecteer toevoegenen noteer vervolgens de waarde van het nieuwe client geheim dat u in een latere stap gebruikt.Select Add, then record the value of the new client secret which you use in a later step.

Een Facebook-toepassing makenCreate a Facebook application

Als u een Facebook-account wilt gebruiken als een id-provider in Azure AD B2C, moet u een toepassing maken op Facebook.To use a Facebook account as an identity provider in Azure AD B2C, you need to create an application at Facebook. Als u nog geen Facebook-account hebt, kunt u het downloaden op https://www.facebook.com/.If you don’t already have a Facebook account, you can get it at https://www.facebook.com/.

  1. Meld u aan bij Facebook voor ontwikkel aars met de referenties van uw Facebook-account.Sign in to Facebook for developers with your Facebook account credentials.
  2. Als u dit nog niet hebt gedaan, moet u zich registreren als Facebook-ontwikkelaar.If you haven't already done so, you need to register as a Facebook developer. U doet dit door aan de rechter bovenhoek van de pagina aan de slag te gaan , het beleid van Facebook te accepteren en de registratie stappen te volt ooien.To do this, select Get Started on the upper-right corner of the page, accept Facebook's policies, and complete the registration steps.
  3. Selecteer mijn apps en maak vervolgens een app.Select My Apps and then Create App.
  4. Voer een weergave naam in en geef een geldig e-mail adres voor de contact persoon op.Enter a Display Name and a valid Contact Email.
  5. Klik op App-ID maken.Click Create App ID. Hiervoor moet u mogelijk het Facebook-platform beleid accepteren en een online beveiligings controle volt ooien.This may require you to accept Facebook platform policies and complete an online security check.
  6. Selecteer instellingen > Basic.Select Settings > Basic.
  7. Kies een categorie, bijvoorbeeld Business and Pages.Choose a Category, for example Business and Pages. Deze waarde is vereist voor Facebook, maar wordt niet gebruikt door Azure AD B2C.This value is required by Facebook, but isn't used by Azure AD B2C.
  8. Selecteer onder aan de pagina platform toevoegenen selecteer vervolgens website.At the bottom of the page, select Add Platform, and then select Website.
  9. Voer in site-URLhttps://your-tenant-name.b2clogin.com/ your-tenant-name vervangen door de naam van uw Tenant.In Site URL, enter https://your-tenant-name.b2clogin.com/ replacing your-tenant-name with the name of your tenant.
  10. Voer een URL in voor de URL van het Privacybeleid, bijvoorbeeld http://www.contoso.com/.Enter a URL for the Privacy Policy URL, for example http://www.contoso.com/. De URL van het privacybeleid is een pagina die u kunt onderhouden voor het verstrekken van privacy-informatie voor uw toepassing.The privacy policy URL is a page you maintain to provide privacy information for your application.
  11. Selecteer Save changes.Select Save Changes.
  12. Noteer de waarde van de App-IDaan de bovenkant van de pagina.At the top of the page, record the value of App ID.
  13. Selecteer bij app-geheimde waarde weer geven en noteer deze.Next to App Secret, select Show and record its value. U gebruikt zowel de App-ID als het geheim van de app voor het configureren van Facebook als een id-provider in uw Tenant.You use both the App ID and App Secret to configure Facebook as an identity provider in your tenant. App-geheim is een belang rijke beveiligings referentie die u veilig moet opslaan.App Secret is an important security credential which you should store securely.
  14. Selecteer het plus teken naast productenen selecteer vervolgens onder Aanmelden bij Facebookde optie instellen.Select the plus sign next to PRODUCTS, then under Facebook Login, select Set up.
  15. Selecteer onder Facebook-aanmelding in het menu links de optie instellingen.Under Facebook Login in the left-hand menu, select Settings.
  16. Voer https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/oauth2/authrespin geldige OAuth omleidings-uri'sin.In Valid OAuth redirect URIs, enter https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/oauth2/authresp. Vervang your-tenant-name door de naam van uw Tenant.Replace your-tenant-name with the name of your tenant. Selecteer wijzigingen opslaan onder aan de pagina.Select Save Changes at the bottom of the page.
  17. Als u uw Facebook-toepassing beschikbaar wilt maken voor Azure AD B2C, klikt u op de status kiezer rechtsboven op de pagina en schakelt u deze in om de toepassing openbaar te maken en klikt u vervolgens op bevestigen.To make your Facebook application available to Azure AD B2C, click the Status selector at the top right of the page and turn it On to make the Application public, and then click Confirm. Op dit moment moet de status worden gewijzigd van ontwikkeling naar Live.At this point, the Status should change from Development to Live.

De id-providers toevoegenAdd the identity providers

Nadat u de toepassing hebt gemaakt voor de ID-provider die u wilt toevoegen, voegt u de ID-provider aan uw Tenant toe.After you create the application for the identity provider that you want to add, you add the identity provider to your tenant.

De Azure Active Directory-ID-provider toevoegenAdd the Azure Active Directory identity provider

  1. Zorg ervoor dat u de map gebruikt die Azure AD B2C Tenant bevat.Make sure you're using the directory that contains Azure AD B2C tenant. Selecteer het filter Directory + abonnement in het bovenste menu en kies de map die uw Azure AD B2C Tenant bevat.Select the Directory + subscription filter in the top menu and choose the directory that contains your Azure AD B2C tenant.

  2. Kies Alle services linksboven in de Azure Portal, zoek Azure AD B2C en selecteer deze.Choose All services in the top-left corner of the Azure portal, and then search for and select Azure AD B2C.

  3. Selecteer id-providersen selecteer vervolgens nieuwe OpenID Connect Connect-provider.Select Identity providers, and then select New OpenID Connect provider.

  4. Voer een naamin.Enter a Name. Voer bijvoorbeeld Contoso Azure ADin.For example, enter Contoso Azure AD.

  5. Voor meta gegevens-URLvoert u de volgende URL in die your-AD-tenant-domain vervangt door de domein naam van uw Azure AD-Tenant:For Metadata url, enter the following URL replacing your-AD-tenant-domain with the domain name of your Azure AD tenant:

    https://login.microsoftonline.com/your-AD-tenant-domain/.well-known/openid-configuration
    

    Bijvoorbeeld https://login.microsoftonline.com/contoso.onmicrosoft.com/.well-known/openid-configuration.For example, https://login.microsoftonline.com/contoso.onmicrosoft.com/.well-known/openid-configuration.

  6. Voer voor client-idde toepassings-id in die u eerder hebt vastgelegd.For Client ID, enter the application ID that you previously recorded.

  7. Voer voor client geheimhet client geheim in dat u eerder hebt vastgelegd.For Client secret, enter the client secret that you previously recorded.

  8. Behoud de standaard waarden voor het bereik, het antwoord typeen de antwoord modus.Leave the default values for Scope, Response type, and Response mode.

  9. Beschrijving Voer een waarde in voor Domain_hint.(Optional) Enter a value for Domain_hint. Bijvoorbeeld ContosoAD.For example, ContosoAD. Domein hints zijn richt lijnen die zijn opgenomen in de verificatie aanvraag van een toepassing.Domain hints are directives that are included in the authentication request from an application. Ze kunnen worden gebruikt om de gebruiker te versnellen tot hun federatieve IdP-aanmeldings pagina.They can be used to accelerate the user to their federated IdP sign-in page. Of ze kunnen worden gebruikt door een toepassing met meerdere tenants om de gebruiker rechtstreeks naar de aanmeldings pagina van Azure AD te versnellen voor hun Tenant.Or they can be used by a multi-tenant application to accelerate the user straight to the branded Azure AD sign-in page for their tenant.

  10. Voer onder claim toewijzing van de identiteits providerde volgende claim toewijzings waarden in:Under Identity provider claims mapping, enter the following claims mapping values:

    • Gebruikers-id: OIDUser ID: oid
    • Weergave naam: naamDisplay name: name
    • Gegeven naam: given_nameGiven name: given_name
    • Achternaam: family_nameSurname: family_name
    • E-mail: unique_nameEmail: unique_name
  11. Selecteer Opslaan.Select Save.

De Facebook-ID-provider toevoegenAdd the Facebook identity provider

  1. Selecteer id-providersen selecteer vervolgens Facebook.Select Identity providers, then select Facebook.
  2. Voer een naamin.Enter a Name. Bijvoorbeeld Facebook.For example, Facebook.
  3. Voer voor de client-idde app-id in van de Facebook-toepassing die u eerder hebt gemaakt.For the Client ID, enter the App ID of the Facebook application that you created earlier.
  4. Voer voor het client geheimhet app-geheim in dat u hebt vastgelegd.For the Client secret, enter the App Secret that you recorded.
  5. Selecteer Opslaan.Select Save.

De gebruikers stroom bijwerkenUpdate the user flow

In de zelf studie die u als onderdeel van de vereisten hebt voltooid, hebt u een gebruikers stroom gemaakt voor het aanmelden en aanmelden met de naam B2C_1_signupsignin1.In the tutorial that you completed as part of the prerequisites, you created a user flow for sign-up and sign-in named B2C_1_signupsignin1. In deze sectie voegt u de id-providers toe aan de B2C_1_signupsignin1 gebruikers stroom.In this section, you add the identity providers to the B2C_1_signupsignin1 user flow.

  1. Selecteer gebruikers stromen (beleid) en selecteer vervolgens de B2C_1_signupsignin1 gebruikers stroom.Select User flows (policies), and then select the B2C_1_signupsignin1 user flow.
  2. Selecteer id-providers, selecteer de Facebook -en Contoso Azure AD -id-providers die u hebt toegevoegd.Select Identity providers, select the Facebook and Contoso Azure AD identity providers that you added.
  3. Selecteer Opslaan.Select Save.

De gebruikers stroom testenTest the user flow

  1. Selecteer op de pagina overzicht van de gebruikers stroom die u hebt gemaakt, de optie gebruikers stroom uitvoeren.On the Overview page of the user flow that you created, select Run user flow.
  2. Selecteer voor toepassingde webtoepassing met de naam webapp1 die u eerder hebt geregistreerd.For Application, select the web application named webapp1 that you previously registered. In de antwoord-URL moeten https://jwt.msworden weer gegeven.The Reply URL should show https://jwt.ms.
  3. Selecteer gebruikers stroom uitvoerenen meld u aan met een id-provider die u eerder hebt toegevoegd.Select Run user flow, and then sign in with an identity provider that you previously added.
  4. Herhaal stap 1 tot en met 3 voor de andere id-providers die u hebt toegevoegd.Repeat steps 1 through 3 for the other identity providers that you added.

Als de aanmeldings bewerking is geslaagd, wordt u omgeleid naar https://jwt.ms waarin de gedecodeerde token wordt weer gegeven, vergelijkbaar met:If the sign in operation is successful, you're redirected to https://jwt.ms which displays the Decoded Token, similar to:

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "<key-ID>"
}.{
  "exp": 1562346892,
  "nbf": 1562343292,
  "ver": "1.0",
  "iss": "https://your-b2c-tenant.b2clogin.com/10000000-0000-0000-0000-000000000000/v2.0/",
  "sub": "20000000-0000-0000-0000-000000000000",
  "aud": "30000000-0000-0000-0000-000000000000",
  "nonce": "defaultNonce",
  "iat": 1562343292,
  "auth_time": 1562343292,
  "name": "User Name",
  "idp": "facebook.com",
  "postalCode": "12345",
  "tfp": "B2C_1_signupsignin1"
}.[Signature]

Volgende stappenNext steps

In dit artikel hebt u het volgende geleerd:In this article, you learned how to:

  • De toepassingen voor de ID-provider makenCreate the identity provider applications
  • De id-providers toevoegen aan uw TenantAdd the identity providers to your tenant
  • De id-providers toevoegen aan uw gebruikers stroomAdd the identity providers to your user flow

Vervolgens leert u hoe u de gebruikers interface kunt aanpassen van de pagina's die worden weer gegeven aan gebruikers als onderdeel van hun identiteits ervaring in uw toepassingen:Next, learn how to customize the UI of the pages shown to users as part of their identity experience in your applications: