Skip to content

identity-provider-twitter.md

Latest commit

 

History

History
217 lines (173 loc) · 13.4 KB

identity-provider-twitter.md

File metadata and controls

217 lines (173 loc) · 13.4 KB
title Set up sign-up and sign-in with an X account
titleSuffix Azure AD B2C
description Provide sign-up and sign-in to customers with X accounts in your applications using Azure Active Directory B2C.
author garrodonnell
manager CelesteDG
ms.service azure-active-directory
ms.topic how-to
ms.date 07/20/2022
ms.author godonnell
ms.subservice b2c
zone_pivot_groups b2c-policy-type

Set up sign-up and sign-in with an X account using Azure Active Directory B2C

[!INCLUDE active-directory-b2c-end-of-sale-notice-b]

[!INCLUDE active-directory-b2c-choose-user-flow-or-custom-policy] ::: zone pivot="b2c-custom-policy"

[!INCLUDE active-directory-b2c-advanced-audience-warning]

::: zone-end

Prerequisites

[!INCLUDE active-directory-b2c-customization-prerequisites]

Create an application

To enable sign-in for users with an X account in Azure AD B2C, you need to create an X application. If you don't already have an X account, you can sign up at https://x.com/signup. You also need to Apply for a developer account. For more information, see Apply for access.

::: zone pivot="b2c-custom-policy"

  1. Sign in to the X Developer Portal with your X account credentials.
  2. Select + Create Project button.
  3. Under Project name tab, enter a preferred name of your project, and then select Next button.
  4. Under Use case tab, select your preferred use case, and then select Next.
  5. Under Project description tab, enter your project description, and then select Next button.
  6. Under App name tab, enter a name for your app, such as azureadb2c, and the select Next button.
  7. Under Keys & Tokens tab, copy the value of API Key and API Key Secret. You will use these for configuration later.
  8. Select App settings to open the app settings.
  9. At the lower part of the page, under User authentication settings, select Set up.
  10. Under Type of app, select your appropriate app type such as Web App.
  11. Under App Info:
    1. For the Callback URI/Redirect URL, enter https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/your-policy-id/oauth1/authresp. If you use a custom domain, enter https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp. Use all lowercase letters when entering your tenant name and user flow ID even if they are defined with uppercase letters in Azure AD B2C. Replace:
      • your-tenant-name with the name of your tenant name.
      • your-domain-name with your custom domain.
      • your-policy-id with the identifier of your user flow. For example, b2c_1a_signup_signin_x.
    2. For the Website URL, enter https://your-tenant.b2clogin.com. Replace your-tenant with the name of your tenant. For example, https://contosob2c.b2clogin.com. If you use a custom domain, enter https://your-domain-name.
    3. (Optional) Enter a URL for the Terms of service, for example http://www.contoso.com/tos. The policy URL is a page you maintain to provide terms and conditions for your application.
    4. (Optional) Enter a URL for the Privacy policy, for example http://www.contoso.com/privacy. The policy URL is a page you maintain to provide privacy information for your application.
  12. Select Save. ::: zone-end

::: zone pivot="b2c-user-flow"

  1. Sign in to the X Developer Portal with your X account credentials.
  2. Select + Create Project button.
  3. Under Project name tab, enter a preferred name of your project, and then select Next button.
  4. Under Use case tab, select your preferred use case, and then select Next.
  5. Under Project description tab, enter your project description, and then select Next button.
  6. Under App name tab, enter a name for your app, such as azureadb2c, and the select Next button.
  7. Under Keys & Tokens tab, copy the value of API Key and API Key Secret for later. You use both of them to configure X as an identity provider in your Azure AD B2C tenant.
  8. Select App settings to open the app settings.
  9. At the lower part of the page, under User authentication settings, select Set up.
  10. Under Type of app, select your appropriate app type such as Web App.
  11. Under App Info:
    1. For the Callback URI/Redirect URL, enter https://your-tenant.b2clogin.com/your-tenant-name.onmicrosoft.com/your-user-flow-name/oauth1/authresp. If you use a custom domain, enter https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp. Use all lowercase letters when entering your tenant name and user flow ID even if they are defined with uppercase letters in Azure AD B2C. Replace:
      • your-tenant-name with the name of your tenant name.
      • your-domain-name with your custom domain.
      • your-user-flow-name with the identifier of your user flow. For example, b2c_1_signup_signin_x.
    2. For the Website URL, enter https://your-tenant.b2clogin.com. Replace your-tenant with the name of your tenant. For example, https://contosob2c.b2clogin.com. If you use a custom domain, enter https://your-domain-name.
    3. Enter a URL for the Terms of service, for example http://www.contoso.com/tos. The policy URL is a page you maintain to provide terms and conditions for your application.
    4. Enter a URL for the Privacy policy, for example http://www.contoso.com/privacy. The policy URL is a page you maintain to provide privacy information for your application.
  12. Select Save.

::: zone-end

::: zone pivot="b2c-user-flow"

Configure X as an identity provider

  1. Sign in to the Azure portal with an account that has at least External Identity Provider Administrator privileges.
  2. If you have access to multiple tenants, select the Settings icon in the top menu to switch to your Azure AD B2C tenant from the Directories + subscriptions menu.
  3. Choose All services in the top-left corner of the Azure portal, search for and select Azure AD B2C.
  4. Select Identity providers, then select Twitter.
  5. Enter a Name. For example, X.
  6. For the Client ID, enter the API Key of the X application that you created earlier.
  7. For the Client secret, enter the API key secret that you recorded.
  8. Select Save.

Add X identity provider to a user flow

At this point, the X identity provider has been set up, but it's not yet available in any of the sign-in pages. To add the X identity provider to a user flow:

  1. In your Azure AD B2C tenant, select User flows.
  2. Select the user flow that you want to add the X identity provider.
  3. Under the Social identity providers, select Twitter.
  4. Select Save.

Test your User Flow

  1. To test your policy, select Run user flow.
  2. For Application, select the web application named testapp1 that you previously registered. The Reply URL should show https://jwt.ms.
  3. Select the Run user flow button.
  4. From the sign-up or sign-in page, select Twitter to sign in with X account.

::: zone-end

::: zone pivot="b2c-custom-policy"

Create a policy key

You need to store the secret key that you previously recorded for X app in your Azure AD B2C tenant.

  1. Sign in to the Azure portal.
  2. If you have access to multiple tenants, select the Settings icon in the top menu to switch to your Azure AD B2C tenant from the Directories + subscriptions menu.
  3. In the Azure portal, search for and select Azure AD B2C.
  4. On the left menu, under Policies, select Identity Experience Framework.
  5. Select Policy Keys and then select Add.
  6. For Options, choose Manual.
  7. Enter a Name for the policy key. For example, XSecret. The prefix B2C_1A_ is added automatically to the name of your key.
  8. For Secret, enter your API key secret value that you previously recorded.
  9. For Key usage, select Signature.
  10. Click Create.

Configure X as an identity provider

To enable users to sign in using an X account, you need to define the account as a claims provider that Azure AD B2C can communicate with through an endpoint. The endpoint provides a set of claims that are used by Azure AD B2C to verify that a specific user has authenticated.

You can define an X account as a claims provider by adding it to the ClaimsProviders element in the extension file of your policy. Refer to the custom policy starter pack that you downloaded in the Prerequisites of this article.

  1. Open the TrustFrameworkExtensions.xml.

  2. Find the ClaimsProviders element. If it does not exist, add it under the root element.

  3. Add a new ClaimsProvider as follows:

    <ClaimsProvider>
  <Domain>x.com</Domain>
  <DisplayName>X</DisplayName>
  <TechnicalProfiles>
    <TechnicalProfile Id="Twitter-OAuth1">
      <DisplayName>X</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 X 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. Replace the value of client_id with the API key that you previously recorded.

  5. Save the file.

[!INCLUDE active-directory-b2c-add-identity-provider-to-user-journey]

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

[!INCLUDE active-directory-b2c-configure-relying-party-policy]

Test your custom policy

  1. Select your relying party policy, for example B2C_1A_signup_signin.
  2. For Application, select a web application that you previously registered. The Reply URL should show https://jwt.ms.
  3. Select the Run now button.
  4. From the sign-up or sign-in page, select Twitter to sign in with X account. ::: zone-end

If the sign-in process is successful, your browser is redirected to https://jwt.ms, which displays the contents of the token returned by Azure AD B2C.

Tip

If you're facing unauthorized error while testing this identity provider, make sure you use the correct X API Key and API Key Secret, or try to apply for elevated access. Also, we recommend you've a look at X's projects structure, if you registered your app before the feature was available.