Sign-up and sign-in with Dribbble using Azure AD B2C

This article describes how to add authentication for a Dribbble account to an Azure AD B2C custom policy.

Architecture

The following diagram illustrates the authentication flow for a Dribbble account to an Azure AD B2C custom policy.

For information about Dribbble and OAuth 2.0, see https://developer.dribbble.com/v2/oauth/.

Prerequisites

1. If you don’t already have one, then you must create an Azure AD B2C tenant that is linked to your Azure subscription.
2. Prepare your Azure AD B2C tenant by creating the token signing and encryption keys and creating the Identity Experience Framework applications.
3. Download one of the starter packs for Azure AD B2C from Microsoft’s GitHub repository.

Configure a Dribbble application

1. Log in to https://dribbble.com/account/applications.
2. On the Applications page, select Register a new Application.
3. On the Register Application page, enter the following fields and then select Register application:
   1. Name
   2. Description
   3. Website URL
   4. Callback URL: Enter either https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/oauth2/authresp if you use the built-in domain or https://your-domain-name/your-tenant-name.onmicrosoft.com/oauth2/authresp if you use a custom domain for the Redirect URL field. Replace your-tenant-name with your tenant name and your-domain-name with your custom domain.
4. On the application page, copy the Client ID and Client Secret fields.

Add the client secret for the Dribbble application as a policy key

1. Sign in to the Azure AD B2C portal.
2. Select Identity Experience Framework.
3. Select Policy keys.
4. Select Add.
5. In the Create a key section, enter the following fields and then select Create:
   1. Options: Manual
   2. Name: DribbbleClientSecret
   3. Secret: Paste the Client Secret field that was copied in the previous section.

Configure dribbbleUserID claim type

The identifier claim that’s returned from Dribbble for the authenticated user is of type long so we must configure a dribbbleUserId claim type that represents this identifier claim.

1. Open the TrustFrameworkExtensions.xml file.
2. Find the BuildingBlocks element and then the ClaimsSchema element. If they don’t exist, then add them to the TrustFrameworkPolicy element.
3. Add the following ClaimType element to the ClaimsSchema element.

<ClaimType Id="dribbbleUserId">
  <DisplayName>Dribbble User Identifier</DisplayName>
  <DataType>long</DataType>
</ClaimType>

Configure claims transformation

We must also configure a CreateIssuerUserIdForDribbble claims transformation that converts from the dribbbleUserId claim type of type long to the issuerUserId claim type of type string.

1. Open the TrustFrameworkExtensions.xml file.
2. Find the BuildingBlocks element and then the ClaimsTransformations element. If they don’t exist, then add them to the TrustFrameworkPolicy element.
3. Add the following ClaimsTransformation element to the ClaimsTransformations element.

<ClaimsTransformation Id="CreateIssuerUserIdForDribbble" TransformationMethod="ConvertNumberToStringClaim">
  <InputClaims>
    <InputClaim ClaimTypeReferenceId="dribbbleUserId" TransformationClaimType="inputClaim" />
  </InputClaims>
  <InputParameters>
    <InputParameter Id="stringFormat" DataType="string" Value="{0}" />
  </InputParameters>
  <OutputClaims>
    <OutputClaim ClaimTypeReferenceId="issuerUserId" TransformationClaimType="outputClaim" />
  </OutputClaims>
</ClaimsTransformation>

Configure Dribbble as an identity provider

1. Open the TrustFrameworkExtensions.xml file.
2. Find the ClaimsProviders element. If it doesn’t exist, then add it to the TrustFrameworkPolicy element.
3. Add the following ClaimsProvider element to the ClaimsProviders element. Replace your-dribbble-client-id with the Client ID field that was copied in the Configure a Dribbble application section.

<ClaimsProvider>
  <Domain>dribbble.com</Domain>
  <DisplayName>Dribbble</DisplayName>
  <TechnicalProfiles>
    <TechnicalProfile Id="Dribbble-OAuth2">
      <DisplayName>Dribbble</DisplayName>
      <Protocol Name="OAuth2" />
      <Metadata>
        <Item Key="client_id">your-dribbble-client-id</Item>
        <Item Key="authorization_endpoint">https://dribbble.com/oauth/authorize</Item>
        <Item Key="AccessTokenEndpoint">https://dribbble.com/oauth/token</Item>
        <Item Key="ClaimsEndpoint">https://api.dribbble.com/v2/user</Item>
        <Item Key="HttpBinding">POST</Item>
        <Item Key="BearerTokenTransmissionMethod">AuthorizationHeader</Item>
        <Item Key="UsePolicyInRedirectUri">false</Item>
      </Metadata>
      <CryptographicKeys>
        <Key Id="client_secret" StorageReferenceId="B2C_1A_DribbbleClientSecret" />
      </CryptographicKeys>
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="authenticationSource" DefaultValue="socialIdpAuthentication" AlwaysUseDefaultValue="true" />
        <OutputClaim ClaimTypeReferenceId="identityProvider" DefaultValue="dribbble.com" AlwaysUseDefaultValue="true" />
        <OutputClaim ClaimTypeReferenceId="dribbbleUserId" PartnerClaimType="id" />
        <OutputClaim ClaimTypeReferenceId="displayName" PartnerClaimType="name" />
      </OutputClaims>
      <OutputClaimsTransformations>
        <OutputClaimsTransformation ReferenceId="CreateRandomUPNUserName" />
        <OutputClaimsTransformation ReferenceId="CreateUserPrincipalName" />
        <OutputClaimsTransformation ReferenceId="CreateIssuerUserIdForDribbble" />
        <OutputClaimsTransformation ReferenceId="CreateAlternativeSecurityId" />
      </OutputClaimsTransformations>
      <UseTechnicalProfileForSessionManagement ReferenceId="SM-SocialLogin" />
    </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

Add a user journey

1. Open the TrustFrameworkBase.xml file.
2. Copy the UserJourney element that includes Id="SignUpOrSignIn".
3. Open the TrustFrameworkExtensions.xml file and find the UserJourneys element. If it doesn’t exist, then add it to the TrustFrameworkPolicy element.
4. Paste the UserJourney element that was copied in step 2 to the UserJourneys element and replace the Id attribute for this UserJourney element from "SignUpOrSignIn" to "DribbbleSignUpOrSignIn".

Add the identity provider to the user journey

1. Add the claims provider that was configured in the Configure Dribbble as an identity provider section to the user journey that was added in the previous section.

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

<OrchestrationStep Order="2" Type="ClaimsExchange">
  ...
  <ClaimsExchanges>
    <ClaimsExchange Id="DribbbleExchange" TechnicalProfileReferenceId="Dribbble-OAuth2" />
  </ClaimsExchanges>
  ...
</OrchestrationStep>

Configure the relying party policy

1. Open the SignUpOrSignIn.xml file.
2. Replace the ReferenceId attribute for the DefaultUserJourney element from "SignUpOrSignIn" to "DribbbleSignUpOrSignIn".

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

3. The email claim isn’t returned from Dribbble for an authenticated user so we must remove the email claim type from the output claims for the PolicyProfile technical profile.

<TechnicalProfile Id="PolicyProfile">
  <DisplayName>PolicyProfile</DisplayName>
  <Protocol Name="OpenIdConnect" />
  <OutputClaims>
    <OutputClaim ClaimTypeReferenceId="objectId" PartnerClaimType="sub" />
    <OutputClaim ClaimTypeReferenceId="displayName" />
    <OutputClaim ClaimTypeReferenceId="givenName" />
    <OutputClaim ClaimTypeReferenceId="surname" />
    <OutputClaim ClaimTypeReferenceId="identityProvider" />
    <OutputClaim ClaimTypeReferenceId="tenantId" DefaultValue="{Policy:TenantObjectId}" AlwaysUseDefaultValue="true" />
  </OutputClaims>
  <SubjectNamingInfo ClaimType="sub" />
</TechnicalProfile>

Upload and test the custom policy

1. Upload all policy files in the following order to your Azure AD B2C tenant:
   1. TrustFrameworkBase.xml
   2. TrustFrameworkLocalization.xml
   3. TrustFrameworkExtensions.xml
   4. SignUpOrSignIn.xml
2. Test the B2C_1A_signup_signin policy from your Azure AD B2C tenant.

Related articles

• Sign up and sign in with Atlassian using Azure AD B2C
• Sign up and sign in with Basecamp using Azure AD B2C
• Sign up and sign in with Bitbucket using Azure AD B2C
• Sign up and sign in with Box using Azure AD B2C
• Sign up and sign in with Digital Ocean using Azure AD B2C