Teilen über

Einrichten der Registrierung und Anmeldung mit einem Twitter-Konto mithilfe von Azure Active Directory B2C

  • Artikel

Bevor Sie beginnen, verwenden Sie den Auswahlpunkt Richtlinientyp wählen, um die Art der Richtlinie auszuwählen, die Sie einrichten möchten. Azure Active Directory B2C bietet zwei Methoden zum Definieren der Benutzerinteraktion mit Ihren Anwendungen: vordefinierte Benutzerflows oder vollständig konfigurierbare benutzerdefinierte Richtlinien. Die Schritte, die in diesem Artikel erforderlich sind, unterscheiden sich für jede Methode.

Hinweis

In Azure Active Directory B2C sind benutzerdefinierte Richtlinien in erster Linie für komplexe Szenarien konzipiert. Für die meisten Szenarien empfehlen wir die Verwendung von integrierten Benutzerflows. Informieren Sie sich, sofern noch nicht geschehen, unter Tutorial: Erstellen von Benutzerflows und benutzerdefinierten Richtlinien in Azure Active Directory B2C über das Starter Pack für benutzerdefinierte Richtlinien.

Voraussetzungen

Erstellen einer Anwendung

Um die Benutzeranmeldung mit einem Twitter-Konto in Azure AD B2C zu aktivieren, müssen Sie eine Twitter-Anwendung erstellen. Wenn Sie noch über kein Twitter-Konto verfügen, können Sie eines unter https://twitter.com/signup registrieren. Außerdem müssen Sie ein Entwicklerkonto beantragen. Weitere Informationen finden Sie unter Zugriff beantragen.

  1. Melden Sie sich im Twitter-Entwicklerportal mit den Anmeldeinformationen für Ihr Twitter-Konto an.
  2. Wählen Sie die Schaltfläche + Projekt erstellen aus.
  3. Geben Sie auf der Registerkarte Projektname den gewünschten Namen für Ihr Projekt ein, und wählen Sie dann die Schaltfläche Weiter aus.
  4. Wählen Sie auf der Registerkarte Anwendungsfall Ihren bevorzugten Anwendungsfall und dann Weiter aus.
  5. Geben Sie auf der Registerkarte Projektbeschreibung Ihre Projektbeschreibung ein, und wählen Sie dann die Schaltfläche Weiter aus.
  6. Geben Sie auf der Registerkarte App-Name einen Namen für Ihre App ein, z. B. azureadb2c, und wählen Sie die Schaltfläche Weiter aus.
  7. Kopieren Sie auf der Registerkarte Schlüssel & Token den Wert von API-Schlüssel und API-Schlüsselgeheimnis. Sie verwenden diese Informationen später für die Konfiguration.
  8. Wählen Sie App-Einstellungen aus, um die App-Einstellungen zu öffnen.
  9. Wählen Sie im unteren Teil der Seite unter Benutzerauthentifizierungseinstellungen die Option Einrichten aus.
  10. Wählen Sie unter App-Typ den passenden App-Typ aus, z. B. Web-App.
  11. Unter App-Informationen:
    1. Geben Sie als Rückruf-URI/Umleitungs-URL den Wert https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/your-policy-id/oauth1/authresp ein. Bei Verwendung einer benutzerdefinierten Domäne geben Sie https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp ein. Geben Sie den Mandantennamen und die Benutzerflow-ID selbst dann in Kleinbuchstaben ein, wenn sie in Azure AD B2C Großbuchstaben enthalten. Ersetzen Sie:
      • your-tenant-name durch den Namen Ihres Mandanten
      • your-domain-name durch Ihre benutzerdefinierte Domäne
      • your-policy-id durch den Bezeichner Ihres Benutzerflows Beispiel: b2c_1a_signup_signin_twitter.
    2. Geben Sie für die Website-URL die URL https://your-tenant.b2clogin.com ein. Ersetzen Sie your-tenant durch den Namen Ihres Mandanten. Beispiel: https://contosob2c.b2clogin.com. Bei Verwendung einer benutzerdefinierten Domäne geben Sie https://your-domain-name ein.
    3. (Optional:) Geben Sie eine URL für die Nutzungsbedingungen ein, z. B. http://www.contoso.com/tos. Die Richtlinien-URL ist eine von Ihnen verwaltete Seite, die Nutzungsbedingungen Ihrer Anwendung enthält.
    4. (Optional:) Geben Sie eine URL für die Datenschutzrichtlinie ein, z. B. http://www.contoso.com/privacy. Die Richtlinien-URL ist eine von Ihnen verwaltete Seite, die Datenschutzinformationen zu Ihrer Anwendung enthält.
  12. Wählen Sie Speichern aus.
  1. Melden Sie sich im Twitter-Entwicklerportal mit den Anmeldeinformationen für Ihr Twitter-Konto an.
  2. Wählen Sie die Schaltfläche + Projekt erstellen aus.
  3. Geben Sie auf der Registerkarte Projektname den gewünschten Namen für Ihr Projekt ein, und wählen Sie dann die Schaltfläche Weiter aus.
  4. Wählen Sie auf der Registerkarte Anwendungsfall Ihren bevorzugten Anwendungsfall und dann Weiter aus.
  5. Geben Sie auf der Registerkarte Projektbeschreibung Ihre Projektbeschreibung ein, und wählen Sie dann die Schaltfläche Weiter aus.
  6. Geben Sie auf der Registerkarte App-Name einen Namen für Ihre App ein, z. B. azureadb2c, und wählen Sie die Schaltfläche Weiter aus.
  7. Kopieren Sie auf der Registerkarte Schlüssel & Token den Wert von API-Schlüssel und API-Schlüsselgeheimnis für einen späteren Schritt. Sie verwenden beide Werte, um Twitter als Identitätsanbieter in Ihrem Azure AD B2C-Mandanten zu konfigurieren.
  8. Wählen Sie App-Einstellungen aus, um die App-Einstellungen zu öffnen.
  9. Wählen Sie im unteren Teil der Seite unter Benutzerauthentifizierungseinstellungen die Option Einrichten aus.
  10. Wählen Sie unter App-Typ den passenden App-Typ aus, z. B. Web-App.
  11. Unter App-Informationen:
    1. Geben Sie als Rückruf-URI/Umleitungs-URL den Wert https://your-tenant.b2clogin.com/your-tenant-name.onmicrosoft.com/your-user-flow-name/oauth1/authresp ein. Bei Verwendung einer benutzerdefinierten Domäne geben Sie https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp ein. Geben Sie den Mandantennamen und die Benutzerflow-ID selbst dann in Kleinbuchstaben ein, wenn sie in Azure AD B2C Großbuchstaben enthalten. Ersetzen Sie:
      • your-tenant-name durch den Namen Ihres Mandanten
      • your-domain-name durch Ihre benutzerdefinierte Domäne
      • your-user-flow-name durch den Bezeichner Ihres Benutzerflows Beispiel: b2c_1_signup_signin_twitter.
    2. Geben Sie für die Website-URL die URL https://your-tenant.b2clogin.com ein. Ersetzen Sie your-tenant durch den Namen Ihres Mandanten. Beispiel: https://contosob2c.b2clogin.com. Bei Verwendung einer benutzerdefinierten Domäne geben Sie https://your-domain-name ein.
    3. Geben Sie eine URL für die Nutzungsbedingungen ein, z. B. http://www.contoso.com/tos. Die Richtlinien-URL ist eine von Ihnen verwaltete Seite, die Nutzungsbedingungen Ihrer Anwendung enthält.
    4. Geben Sie eine URL für die Datenschutzrichtlinie ein, z. B. http://www.contoso.com/privacy. Die Richtlinien-URL ist eine von Ihnen verwaltete Seite, die Datenschutzinformationen zu Ihrer Anwendung enthält.
  12. Wählen Sie Speichern aus.

Konfigurieren von Twitter als Identitätsanbieter

  1. Melden Sie sich beim Azure-Portal als globaler Administrator Ihres Azure AD B2C-Mandanten an.
  2. Wenn Sie Zugriff auf mehrere Mandanten haben, wählen Sie das Symbol Einstellungen im Menü oben, um über das Menü Verzeichnisse + Abonnements zu Ihrem Azure AD B2C Mandanten zu wechseln.
  3. Klicken Sie links oben im Azure-Portal auf Alle Dienste, suchen Sie nach Azure AD B2C, und klicken Sie darauf.
  4. Wählen Sie Identitätsanbieter und dann Twitter aus.
  5. Geben Sie einen Namen ein. Beispiel: Twitter.
  6. Geben Sie für die Client-ID den API-Schlüssel der Twitter-Anwendung ein, die Sie zuvor erstellt haben.
  7. Geben Sie den zuvor notierten geheimen API-Schlüssel unter Geheimer Clientschlüssel ein.
  8. Wählen Sie Speichern aus.

Hinzufügen von Twitter als Identitätsanbieter zu einem Benutzerflow

Der Twitter-Identitätsanbieter ist jetzt eingerichtet, er ist jedoch noch auf keiner der Anmeldeseiten verfügbar. So fügen Sie den Twitter-Identitätsanbieter einem Benutzerflow hinzu:

  1. Wählen Sie in Ihrem Azure AD B2C-Mandanten die Option Benutzerflows aus.
  2. Wählen Sie den Benutzerflow aus, dem Sie Twitter als Identitätsanbieter hinzufügen möchten.
  3. Wählen Sie unter Soziales Netzwerk als Identitätsanbieter die Option Twitter aus.
  4. Wählen Sie Speichern aus.

Testen des Benutzerflows

  1. Um die Richtlinie zu testen, wählen Sie Benutzerflow ausführen aus.
  2. Wählen Sie für Anwendung die Webanwendung testapp1 aus, die Sie zuvor registriert haben. Als Antwort-URL sollte https://jwt.ms angezeigt werden.
  3. Wählen Sie die Schaltfläche Benutzerflow ausführen aus.
  4. Wählen Sie auf der Registrierungs- oder Anmeldeseite die Option Twitter aus, um sich mit dem Twitter-Konto anzumelden.

Erstellen eines Richtlinienschlüssels

Sie müssen den geheimen Schlüssel, den Sie zuvor für die Twitter-App notiert haben, in Ihrem Azure AD B2C-Mandanten speichern.

  1. Melden Sie sich beim Azure-Portal an.
  2. Wenn Sie Zugriff auf mehrere Mandanten haben, wählen Sie das Symbol Einstellungen im Menü oben, um über das Menü Verzeichnisse + Abonnements zu Ihrem Azure AD B2C Mandanten zu wechseln.
  3. Suchen Sie im Azure-Portal nach Azure AD B2C, und wählen Sie diese Option dann aus.
  4. Wählen Sie im linken Menü unter Richtlinien die Option Identity Experience Framework aus.
  5. Klicken Sie erst auf Richtlinienschlüssel und anschließend auf Hinzufügen.
  6. Klicken Sie unter Optionen auf Manual.
  7. Geben Sie einen Namen für den Richtlinienschlüssel ein. Beispiel: TwitterSecret. Dem Namen Ihres Schlüssels wird automatisch das Präfix B2C_1A_ hinzugefügt.
  8. Geben Sie für Geheimnis den Wert für Ihren geheimen API-Schlüssel ein, den Sie zuvor notiert haben.
  9. Wählen Sie für Schlüsselverwendung die Option Signature aus.
  10. Klicken Sie auf Erstellen.

Konfigurieren von Twitter als Identitätsanbieter

Wenn Sie möchten, dass sich Benutzer mit einem Twitter-Konto anmelden können, müssen Sie das Konto als Anspruchsanbieter definieren, mit dem Azure AD B2C über einen Endpunkt kommunizieren kann. Der Endpunkt bietet eine Reihe von Ansprüchen, mit denen Azure AD B2C überprüft, ob ein bestimmter Benutzer authentifiziert wurde.

Sie können ein Twitter-Konto als Anspruchsanbieter definieren, indem Sie es in der Erweiterungsdatei Ihrer Richtlinie dem Element ClaimsProvider hinzufügen. Verweisen Sie auf das benutzerdefinierte Richtlinienstartpaket, das Sie im Abschnitt „Voraussetzungen“ dieses Artikels heruntergeladen haben.

  1. Öffnen Sie die Datei TrustFrameworkExtensions.xml.

  2. Suchen Sie nach dem Element ClaimsProviders. Falls das Element nicht vorhanden sein sollte, fügen Sie es unter dem Stammelement hinzu.

  3. Fügen Sie ein neues ClaimsProvider-Element wie folgt hinzu:

    <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. Ersetzen Sie den Wert von client_id durch den zuvor notierten API-Schlüssel.

  5. Speichern Sie die Datei .

Hinzufügen einer User Journey

Der Identitätsanbieter wurde nun eingerichtet, aber er ist noch auf keiner der Anmeldeseiten verfügbar. Wenn Sie nicht über eine eigene benutzerdefinierte User Journey verfügen, erstellen Sie ein Duplikat einer vorhandenen User Journey-Vorlage, und fahren Sie andernfalls mit dem nächsten Schritt fort.

  1. Öffnen Sie die Datei TrustFrameworkBase.xml aus dem Starter Pack.
  2. Suchen und kopieren Sie den gesamten Inhalt des UserJourney-Elements, das Id="SignUpOrSignIn" enthält.
  3. Öffnen Sie die Datei TrustFrameworkExtensions.xml, und suchen Sie nach dem UserJourneys-Element. Wenn das Element nicht vorhanden ist, fügen Sie ein solches hinzu.
  4. Fügen Sie den gesamten Inhalt des kopierten UserJourney-Element als untergeordnetes Element des UserJourneys-Elements ein.
  5. Benennen Sie die ID der User Journey um. Beispiel: Id="CustomSignUpSignIn".

Hinzufügen des Identitätsanbieters zu einer User Journey

Nachdem Sie nun über eine User Journey verfügen, fügen Sie den neuen Identitätsanbieter der User Journey hinzu. Fügen Sie zunächst eine Anmeldeschaltfläche hinzu, und verknüpfen Sie dann die Schaltfläche mit einer Aktion. Die Aktion ist das technische Profil, das Sie zuvor erstellt haben.

  1. Suchen Sie nach dem Orchestrierungsschrittelement, das Type="CombinedSignInAndSignUp" enthält, oder Type="ClaimsProviderSelection" in der User Journey. Dies ist in der Regel der erste Orchestrierungsschritt. Das ClaimsProviderSelections-Element enthält eine Liste mit Identitätsanbietern, mit denen sich ein Benutzer anmelden kann. Die Reihenfolge der Elemente gibt die Reihenfolge der Anmeldeschaltflächen vor, die dem Benutzer angezeigt werden. Fügen Sie ein ClaimsProviderSelection-XML-Element hinzu. Legen Sie für TargetClaimsExchangeId einen Anzeigenamen fest.

  2. Fügen Sie im nächsten Orchestrierungsschritt ein ClaimsExchange-Element hinzu. Legen Sie die ID auf den Wert der Zielanspruchs-Austausch-ID fest. Ändern Sie den Wert von TechnicalProfileReferenceId in die ID des technischen Profils, das Sie zuvor erstellt haben.

Der folgende XML-Code veranschaulicht die ersten beiden Orchestrierungsschritte einer User Journey mit dem Identitätsanbieter:

<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>

Konfigurieren einer Richtlinie für die vertrauende Seite

Die Richtlinie für die vertrauende Seite (z. B. SignUpSignIn.xml) gibt die User Journey an, die Azure AD B2C ausführt. Suchen Sie das DefaultUserJourney-Element in Vertrauende Seite. Aktualisieren Sie ReferenceId auf die ID der User Journey, in der Sie den Identitätsanbieter hinzugefügt haben.

Im folgenden Beispiel wird die ReferenceId für die User Journey CustomSignUpSignIn auf CustomSignUpSignIn festgelegt:

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

Hochladen der benutzerdefinierten Richtlinie

  1. Melden Sie sich beim Azure-Portal an.
  2. Wählen Sie auf der Symbolleiste des Portals das Symbol Verzeichnis und Abonnement aus, und wählen Sie dann das Verzeichnis aus, das Ihren Azure AD B2C-Mandanten enthält.
  3. Suchen Sie im Azure-Portal nach Azure AD B2C, und wählen Sie diese Option dann aus.
  4. Wählen Sie unter Richtlinien die Option Identity Experience Framework aus.
  5. Wählen Sie Benutzerdefinierte Richtlinie hochladen aus, und laden Sie dann die beiden geänderten Richtliniendateien in der folgenden Reihenfolge hoch: zuerst die Erweiterungsrichtlinie (z. B. TrustFrameworkExtensions.xml) und dann die Richtlinie für die vertrauende Seite (z. B. SignUpSignIn.xml).

Testen der benutzerdefinierten Richtlinie

  1. Wählen Sie die Richtliniendatei für die vertrauende Seite aus, z. B. B2C_1A_signup_signin.
  2. Wählen Sie für Anwendung eine Webanwendung aus, die Sie zuvor registriert haben. Als Antwort-URL sollte https://jwt.ms angezeigt werden.
  3. Wählen Sie die Schaltfläche Jetzt ausführen aus.
  4. Wählen Sie auf der Registrierungs- oder Anmeldeseite die Option Twitter aus, um sich mit dem Twitter-Konto anzumelden.

Wenn der Anmeldevorgang erfolgreich verlaufen ist, wird der Browser an https://jwt.ms umgeleitet und dadurch der Inhalt des von Azure AD B2C zurückgegebenen Tokens angezeigt.

Tipp

Wenn beim Testen dieses Identitätsanbieters der Fehler unauthorized auftritt, stellen Sie sicher, dass Sie den richtigen Twitter-API-Schlüssel und den geheimen API-Schlüssel verwenden, oder versuchen Sie, einen Zugriff mit erhöhten Rechten zu beantragen. Außerdem empfehlen wir Ihnen, einen Blick auf die Projektstruktur von Twitter zu werfen, wenn Sie Ihre App registriert haben, bevor das Feature verfügbar war.