Delen via

Registreren en aanmelden met een Twitter-account instellen met behulp van Azure Active Directory B2C

  • Artikel

Voordat u begint, gebruikt u de selector Een beleidstype kiezen om het type beleid te kiezen dat u instelt. U kunt in Azure Active Directory B2C op twee manieren definiëren hoe gebruikers met uw toepassingen communiceren: via vooraf gedefinieerde gebruikersstromen of via volledig configureerbaar aangepast beleid. De stappen die in dit artikel zijn vereist, verschillen voor elke methode.

Notitie

In Azure Active Directory B2C is aangepast beleid voornamelijk bedoeld om met complexe scenario's om te gaan. Voor de meeste scenario's wordt aangeraden ingebouwde gebruikersstromen te gebruiken. Als u dit nog niet hebt gedaan, vindt u meer informatie over aangepast beleid in het starterspakket in Aan de slag met aangepaste beleidsregels in Active Directory B2C.

Vereisten

Een app maken

Als u aanmelding wilt inschakelen voor gebruikers met een Twitter-account in Azure AD B2C, moet u een Twitter-toepassing maken. Als u nog geen Twitter-account hebt, kunt u zich aanmelden op https://twitter.com/signup. U moet ook een ontwikkelaarsaccount aanvragen. Zie Aanvragen voor toegang voor meer informatie.

  1. Meld u aan bij de Twitter Developer-portal met uw Twitter-accountreferenties.
  2. Selecteer + Knop Project maken.
  3. Voer op het tabblad Projectnaam een voorkeursnaam van uw project in en selecteer vervolgens de knop Volgende .
  4. Selecteer op het tabblad Use case uw voorkeursgebruik en selecteer vervolgens Volgende.
  5. Voer op het tabblad Projectbeschrijving uw projectbeschrijving in en selecteer vervolgens de knop Volgende .
  6. Voer op het tabblad App-naam een naam in voor uw app, zoals azureadb2c, en selecteer de knop Volgende .
  7. Kopieer op het tabblad Sleutelstokens& de waarde van API-sleutel en API-sleutelgeheim. U gebruikt deze later voor configuratie.
  8. Selecteer App-instellingen om de app-instellingen te openen.
  9. Selecteer In het onderste gedeelte van de pagina onder Instellingen voor gebruikersverificatie de optie Instellen.
  10. Selecteer onder Type app het juiste app-type, zoals Web App.
  11. Onder App-informatie:
    1. Voer voor de callback-URI/omleidings-URL in https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/your-policy-id/oauth1/authresp. Als u een aangepast domein gebruikt, voert u https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp in. Gebruik alle kleine letters bij het invoeren van uw tenantnaam en gebruikersstroom-id, zelfs als deze zijn gedefinieerd met hoofdletters in Azure AD B2C. Vervangen:
      • your-tenant-name met de naam van uw tenantnaam.
      • your-domain-name met uw aangepaste domein.
      • your-policy-id met de id van uw gebruikersstroom. Bijvoorbeeld b2c_1a_signup_signin_twitter.
    2. Voer voor de URL van de website het volgende inhttps://your-tenant.b2clogin.com. Vervang your-tenant door de naam van uw tenant. Bijvoorbeeld https://contosob2c.b2clogin.com. Als u een aangepast domein gebruikt, voert u https://your-domain-name in.
    3. (Optioneel) Voer bijvoorbeeld http://www.contoso.com/toseen URL in voor de servicevoorwaarden. De beleids-URL is een pagina die u onderhoudt om voorwaarden voor uw toepassing op te geven.
    4. (Optioneel) Voer bijvoorbeeld http://www.contoso.com/privacyeen URL in voor het privacybeleid. De beleids-URL is een pagina die u onderhoudt om privacygegevens voor uw toepassing op te geven.
  12. Selecteer Opslaan.
  1. Meld u aan bij de Twitter Developer-portal met uw Twitter-accountreferenties.
  2. Selecteer + Knop Project maken.
  3. Voer op het tabblad Projectnaam een voorkeursnaam van uw project in en selecteer vervolgens de knop Volgende .
  4. Selecteer op het tabblad Use case uw voorkeursgebruik en selecteer vervolgens Volgende.
  5. Voer op het tabblad Projectbeschrijving uw projectbeschrijving in en selecteer vervolgens de knop Volgende .
  6. Voer op het tabblad App-naam een naam in voor uw app, zoals azureadb2c, en selecteer de knop Volgende .
  7. Kopieer op het tabblad Sleutelstokens& de waarde van API-sleutel en API-sleutelgeheim voor later gebruik. U gebruikt beide om Twitter te configureren als een id-provider in uw Azure AD B2C-tenant.
  8. Selecteer App-instellingen om de app-instellingen te openen.
  9. Selecteer In het onderste gedeelte van de pagina onder Instellingen voor gebruikersverificatie de optie Instellen.
  10. Selecteer onder Type app het juiste app-type, zoals Web App.
  11. Onder App-informatie:
    1. Voer voor de callback-URI/omleidings-URL in https://your-tenant.b2clogin.com/your-tenant-name.onmicrosoft.com/your-user-flow-name/oauth1/authresp. Als u een aangepast domein gebruikt, voert u https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp in. Gebruik alle kleine letters bij het invoeren van uw tenantnaam en gebruikersstroom-id, zelfs als deze zijn gedefinieerd met hoofdletters in Azure AD B2C. Vervangen:
      • your-tenant-name met de naam van uw tenantnaam.
      • your-domain-name met uw aangepaste domein.
      • your-user-flow-name met de id van uw gebruikersstroom. Bijvoorbeeld b2c_1_signup_signin_twitter.
    2. Voer voor de URL van de website het volgende inhttps://your-tenant.b2clogin.com. Vervang your-tenant door de naam van uw tenant. Bijvoorbeeld https://contosob2c.b2clogin.com. Als u een aangepast domein gebruikt, voert u https://your-domain-name in.
    3. Voer bijvoorbeeld http://www.contoso.com/toseen URL in voor de servicevoorwaarden. De beleids-URL is een pagina die u onderhoudt om voorwaarden voor uw toepassing op te geven.
    4. Voer bijvoorbeeld http://www.contoso.com/privacyeen URL in voor het privacybeleid. De beleids-URL is een pagina die u onderhoudt om privacygegevens voor uw toepassing op te geven.
  12. Selecteer Opslaan.

Twitter configureren als id-provider

  1. Meld u aan bij Azure Portal als globale beheerder van de Azure AD B2C-tenant.
  2. Als u toegang hebt tot meerdere tenants, selecteert u het pictogram Instellingen in het bovenste menu om over te schakelen naar uw Azure AD B2C-tenant in het menu Mappen en abonnementen.
  3. Kies Alle services linksboven in de Azure Portal, zoek Azure AD B2C en selecteer deze.
  4. Selecteer Id-providers en selecteer Vervolgens Twitter.
  5. Voer bij Naam een naam in. Bijvoorbeeld Twitter.
  6. Voer voor de client-id de API-sleutel in van de Twitter-toepassing die u eerder hebt gemaakt.
  7. Voer voor het clientgeheim het API-sleutelgeheim in dat u hebt vastgelegd.
  8. Selecteer Opslaan.

Twitter-id-provider toevoegen aan een gebruikersstroom

Op dit moment is de Twitter-id-provider ingesteld, maar deze is nog niet beschikbaar op een van de aanmeldingspagina's. De Twitter-id-provider toevoegen aan een gebruikersstroom:

  1. Selecteer Gebruikersstromen in uw Azure AD B2C-tenant.
  2. Selecteer de gebruikersstroom die u wilt toevoegen aan de Twitter-id-provider.
  3. Selecteer Twitter onder de id-providers voor sociale netwerken.
  4. Selecteer Opslaan.

Uw gebruikersstroom testen

  1. Selecteer Gebruikersstroom uitvoeren om uw beleid te testen.
  2. Selecteer voor Toepassing de webtoepassing met de naam testapp1 die u eerder hebt geregistreerd. De antwoord-URL moet https://jwt.ms weergeven.
  3. Klik op de knop Gebruikersstroom uitvoeren.
  4. Selecteer Op de registratie- of aanmeldingspagina Twitter om u aan te melden met een Twitter-account.

Een beleidssleutel maken

U moet de geheime sleutel opslaan die u eerder hebt vastgelegd voor de Twitter-app in uw Azure AD B2C-tenant.

  1. Meld u aan bij de Azure-portal.
  2. Als u toegang hebt tot meerdere tenants, selecteert u het pictogram Instellingen in het bovenste menu om over te schakelen naar uw Azure AD B2C-tenant in het menu Mappen en abonnementen.
  3. Zoek en selecteer Azure AD B2C in de Azure-portal.
  4. Selecteer in het linkermenu onder Beleid de optie Identity Experience Framework.
  5. Selecteer Beleidssleutels en vervolgens Toevoegen.
  6. Voor Opties kiest u Manual.
  7. Voer een naam in voor de beleidssleutel. Bijvoorbeeld TwitterSecret. Het voorvoegsel B2C_1A_ wordt automatisch toegevoegd aan de naam van uw sleutel.
  8. Voer voor Geheim de geheime waarde van uw API-sleutel in die u eerder hebt vastgelegd.
  9. Selecteer voor Sleutelgebruik de optie Signature.
  10. Klik op Create.

Twitter configureren als id-provider

Als u wilt dat gebruikers zich kunnen aanmelden met een Twitter-account, moet u het account definiëren als een claimprovider waarmee Azure AD B2C kan communiceren via een eindpunt. Het eindpunt biedt een set claims die worden gebruikt door Azure AD B2C om te controleren of een specifieke gebruiker is geverifieerd.

U kunt een Twitter-account definiëren als claimprovider door dit toe te voegen aan het element ClaimsProviders in het extensiebestand van uw beleid. Raadpleeg het aangepaste starterpakket voor beleid dat u hebt gedownload in de vereisten van dit artikel.

  1. Open het bestand TrustFrameworkExtensions.xml.

  2. Ga naar het element ClaimsProviders. Als dit niet voorkomt, voegt u het toe onder het hoofdelement.

  3. Voeg als volgt een nieuwe ClaimsProvider toe:

    <ClaimsProvider>
  <Domain>twitter.com</Domain>
  <DisplayName>Twitter</DisplayName>
  <TechnicalProfiles>
    <TechnicalProfile Id="Twitter-OAuth1">
      <DisplayName>Twitter</DisplayName>
      <Protocol Name="OAuth1" />
      <Metadata>
        <Item Key="ProviderName">Twitter</Item>
        <Item Key="authorization_endpoint">https://api.twitter.com/oauth/authenticate</Item>
        <Item Key="access_token_endpoint">https://api.twitter.com/oauth/access_token</Item>
        <Item Key="request_token_endpoint">https://api.twitter.com/oauth/request_token</Item>
        <Item Key="ClaimsEndpoint">https://api.twitter.com/1.1/account/verify_credentials.json?include_email=true</Item>
        <Item Key="ClaimsResponseFormat">json</Item>
        <Item Key="client_id">Your Twitter application API key</Item>
      </Metadata>
      <CryptographicKeys>
        <Key Id="client_secret" StorageReferenceId="B2C_1A_TwitterSecret" />
      </CryptographicKeys>
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="issuerUserId" PartnerClaimType="user_id" />
        <OutputClaim ClaimTypeReferenceId="displayName" PartnerClaimType="screen_name" />
        <OutputClaim ClaimTypeReferenceId="email" />
        <OutputClaim ClaimTypeReferenceId="identityProvider" DefaultValue="twitter.com" />
        <OutputClaim ClaimTypeReferenceId="authenticationSource" DefaultValue="socialIdpAuthentication" />
      </OutputClaims>
      <OutputClaimsTransformations>
        <OutputClaimsTransformation ReferenceId="CreateRandomUPNUserName" />
        <OutputClaimsTransformation ReferenceId="CreateUserPrincipalName" />
        <OutputClaimsTransformation ReferenceId="CreateAlternativeSecurityId" />
        <OutputClaimsTransformation ReferenceId="CreateSubjectClaimFromAlternativeSecurityId" />
      </OutputClaimsTransformations>
      <UseTechnicalProfileForSessionManagement ReferenceId="SM-SocialLogin" />
    </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

  4. Vervang de waarde van client_id door de API-sleutel die u eerder hebt vastgelegd.

  5. Sla het bestand op.

Een gebruikerstraject toevoegen

Op dit punt is de id-provider ingesteld, maar is deze nog niet beschikbaar op een van de aanmeldingspagina's. Als u niet over een eigen aangepast gebruikerstraject beschikt, maakt u een duplicaat van een bestaand gebruikerstrajectsjabloon. In het andere geval gaat u verder met de volgende stap.

  1. Open het bestand TrustFrameworkBase.xml vanuit het starterspakket.
  2. Zoek en kopieer de volledige inhoud van het element UserJourney dat Id="SignUpOrSignIn" bevat.
  3. Open het bestand TrustFrameworkExtensions.xml en ga naar het element UserJourneys. Als het element niet voorkomt, voegt u het toe.
  4. Plak de volledige inhoud van het element UserJourney dat u hebt gekopieerd als een onderliggend element van het element UserJourneys.
  5. Wijzig de naam van de id van het gebruikerstraject. Bijvoorbeeld Id="CustomSignUpSignIn".

De id-provider toevoegen aan een gebruikerstraject

Nu u over een gebruikerstraject beschikt, voegt u de nieuwe id-provider toe aan het gebruikerstraject. U voegt eerst een aanmeldingsknop toe en koppelt de knop aan een actie. De actie is het technische profiel dat u eerder hebt gemaakt.

  1. Ga in het gebruikerstraject naar het element van de indelingsstap dat Type="CombinedSignInAndSignUp" of Type="ClaimsProviderSelection" bevat. Dit is doorgaans de eerste indelingsstap. Het element ClaimsProviderSelections bevat een lijst met id-providers waarmee een gebruiker zich kan aanmelden. De volgorde van de elementen bepaalt de volgorde van de aanmeldingsknoppen die aan de gebruiker worden gepresenteerd. Voeg een XML-element ClaimsProviderSelection toe. Stel de waarde van TargetClaimsExchangeId in op een beschrijvende naam.

  2. Voeg in de volgende indelingsstap een element ClaimsExchange toe. Stel de id in op de waarde van de Exchange-id van de doelclaims. Werk de waarde van TechnicalProfileReferenceId bij naar de id van het technische profiel dat u eerder hebt gemaakt.

In de volgende XML ziet u de eerste twee indelingsstappen van een gebruikerstraject met de id-provider:

<OrchestrationStep Order="1" Type="CombinedSignInAndSignUp" ContentDefinitionReferenceId="api.signuporsignin">
  <ClaimsProviderSelections>
    ...
    <ClaimsProviderSelection TargetClaimsExchangeId="TwitterExchange" />
  </ClaimsProviderSelections>
  ...
</OrchestrationStep>

<OrchestrationStep Order="2" Type="ClaimsExchange">
  ...
  <ClaimsExchanges>
    <ClaimsExchange Id="TwitterExchange" TechnicalProfileReferenceId="Twitter-OAuth1" />
  </ClaimsExchanges>
</OrchestrationStep>

Het Relying Party-beleid configureren

Met het Relying Party-beleid, bijvoorbeeld SignUpSignIn.xml, wordt het gebruikerstraject opgegeven dat door Azure AD B2C wordt uitgevoerd. Ga naar het element DefaultUserJourney binnen de Relying Party. Werk de ReferenceId bij zodat deze overeenkomt met de gebruikerstraject-id, waarin u de id-provider hebt toegevoegd.

In het volgende voorbeeld is voor het CustomSignUpSignIn-gebruikerstraject de ReferenceId ingesteld op CustomSignUpSignIn:

<RelyingParty>
  <DefaultUserJourney ReferenceId="CustomSignUpSignIn" />
  ...
</RelyingParty>

Het aangepaste beleid uploaden

  1. Meld u aan bij de Azure-portal.
  2. Selecteer het pictogram Map + Abonnement in de werkbalk van de portal en selecteer vervolgens de map die uw Azure AD B2C-tenant bevat.
  3. Zoek en selecteer Azure AD B2C in de Azure-portal.
  4. Selecteer onder Beleid de optie Identity Experience Framework.
  5. Selecteer Aangepast beleid uploaden en upload vervolgens de twee beleidsbestanden die u hebt gewijzigd, in de volgende volgorde: het uitbreidingsbeleid, bijvoorbeeld TrustFrameworkExtensions.xml en vervolgens het Relying Party-beleid, zoals SignUpSignIn.xml.

Uw aangepaste beleid testen

  1. Selecteer uw Relying Party-beleid, bijvoorbeeld B2C_1A_signup_signin.
  2. Selecteer voor Toepassing een webtoepassing die u eerder hebt geregistreerd. De antwoord-URL moet https://jwt.ms weergeven.
  3. Selecteer de knop Nu uitvoeren.
  4. Selecteer Op de registratie- of aanmeldingspagina Twitter om u aan te melden met een Twitter-account.

Als het aanmeldingsproces is voltooid, wordt uw browser omgeleid naar https://jwt.ms, waar de inhoud van het door Azure AD B2C geretourneerde token wordt weergegeven.

Fooi

Als er een fout optreedt unauthorized tijdens het testen van deze id-provider, moet u ervoor zorgen dat u de juiste Twitter-API-sleutel en API-sleutelgeheim gebruikt of probeert u toegang met verhoogde bevoegdheden aan te vragen. We raden u ook aan de projectstructuur van Twitter te bekijken als u uw app hebt geregistreerd voordat de functie beschikbaar was.