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
- If you don’t already have one, then you must create an Azure AD B2C tenant that is linked to your Azure subscription.
- Prepare your Azure AD B2C tenant by creating the token signing and encryption keys and creating the Identity Experience Framework applications.
- Download one of the starter packs for Azure AD B2C from Microsoft’s GitHub repository.
Configure a Dribbble application
- Log in to https://dribbble.com/account/applications.
- On the Applications page, select Register a new Application.
- On the Register Application page, enter the following fields and then select Register application:
- Name
- Description
- Website URL
- 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.
- On the application page, copy the Client ID and Client Secret fields.
Add the client secret for the Dribbble application as a policy key
- Sign in to the Azure AD B2C portal.
- Select Identity Experience Framework.
- Select Policy keys.
- Select Add.
- In the Create a key section, enter the following fields and then select Create:
- Options:
Manual
- Name:
DribbbleClientSecret
- Secret: Paste the Client Secret field that was copied in the previous section.
- Options:
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.
- Open the TrustFrameworkExtensions.xml file.
- Find the BuildingBlocks element and then the ClaimsSchema element. If they don’t exist, then add them to the TrustFrameworkPolicy element.
- 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
.
- Open the TrustFrameworkExtensions.xml file.
- Find the BuildingBlocks element and then the ClaimsTransformations element. If they don’t exist, then add them to the TrustFrameworkPolicy element.
- 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
- Open the TrustFrameworkExtensions.xml file.
- Find the ClaimsProviders element. If it doesn’t exist, then add it to the TrustFrameworkPolicy element.
- 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
- Open the TrustFrameworkBase.xml file.
- Copy the UserJourney element that includes
Id="SignUpOrSignIn"
. - Open the TrustFrameworkExtensions.xml file and find the UserJourneys element. If it doesn’t exist, then add it to the TrustFrameworkPolicy element.
- 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
- 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
- Open the SignUpOrSignIn.xml file.
- Replace the ReferenceId attribute for the DefaultUserJourney element from
"SignUpOrSignIn"
to"DribbbleSignUpOrSignIn"
.
<RelyingParty>
<DefaultUserJourney ReferenceId="DribbbleSignUpSignIn" />
...
</RelyingParty>
- 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
- Upload all policy files in the following order to your Azure AD B2C tenant:
- TrustFrameworkBase.xml
- TrustFrameworkLocalization.xml
- TrustFrameworkExtensions.xml
- SignUpOrSignIn.xml
- Test the B2C_1A_signup_signin policy from your Azure AD B2C tenant.