Configurer l’inscription et la connexion avec un compte Twitter à l’aide d’Azure Active Directory B2C

• Créez un flux d’utilisateurs pour permettre aux utilisateurs de s’inscrire et de se connecter à votre application.
• Inscrire une application web.

• Suivez les étapes dans Bien démarrer avec les stratégies personnalisées dans Active Directory B2C
• Inscrire une application web.

1. Connectez-vous au Portail des développeurs Twitter avec les informations d'identification de votre compte Twitter.
2. Sélectionnez le bouton + Créer un projet.
3. Sous l’onglet Nom du projet, entrez un nom pour votre projet, puis sélectionnez le bouton Suivant.
4. Sous l’onglet Cas d’usage, sélectionnez votre cas d’usage, puis sélectionnez Suivant.
5. Sous l’onglet Description du projet, entrez la description de votre projet, puis sélectionnez le bouton Suivant.
6. Sous l’onglet Nom de l’application, entrez un nom pour votre application, par exemple azureadb2c, puis sélectionnez le bouton Suivant.
7. Sous l’onglet Clés & jetons, copiez la valeur de Clé API et de Secret de clé API. Vous les utiliserez plus tard pour la configuration.
8. Sélectionnez Paramètres de l’application pour ouvrir les paramètres de l’application.
9. Dans la partie inférieure de la page, sous Paramètres d’authentification utilisateur, sélectionnez Configurer.
10. Sous Type d’application, sélectionnez le type d’application approprié, par exemple Application web.
11. Sous Infos sur l’application :
    1. Dans le champ URI de rappel/URL de redirection, entrez https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/your-policy-id/oauth1/authresp. Si vous utilisez un domaine personnalisé, entrez https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp. Lorsque vous entrez le nom de votre locataire et l'ID du flux d'utilisateurs, n’utilisez que des minuscules, même s'ils sont en majuscules dans Azure AD B2C. Remplacez :
       • your-tenant-name par le nom de votre locataire.
       • your-domain-name par votre domaine personnalisé.
       • your-policy-id par l’identificateur de votre flux d’utilisateur. Par exemple : b2c_1a_signup_signin_twitter.
    2. Dans le champ URL du site web, entrez https://your-tenant.b2clogin.com. Remplacez your-tenant par le nom de votre locataire. Par exemple : https://contosob2c.b2clogin.com. Si vous utilisez un domaine personnalisé, entrez https://your-domain-name.
    3. (Facultatif) Entrez une URL pour les Conditions d’utilisation du service, par exemple http://www.contoso.com/tos. L’URL de stratégie est une page que vous tenez à jour pour fournir les conditions générales de votre application.
    4. (Facultatif) Entrez une URL pour la Politique de confidentialité, par exemple http://www.contoso.com/privacy. L’URL de stratégie est une page que vous tenez à jour pour fournir des informations de confidentialité pour votre application.
12. Sélectionnez Enregistrer.

1. Connectez-vous au Portail des développeurs Twitter avec les informations d'identification de votre compte Twitter.
2. Sélectionnez le bouton + Créer un projet.
3. Sous l’onglet Nom du projet, entrez un nom pour votre projet, puis sélectionnez le bouton Suivant.
4. Sous l’onglet Cas d’usage, sélectionnez votre cas d’usage, puis sélectionnez Suivant.
5. Sous l’onglet Description du projet, entrez la description de votre projet, puis sélectionnez le bouton Suivant.
6. Sous l’onglet Nom de l’application, entrez un nom pour votre application, par exemple azureadb2c, puis sélectionnez le bouton Suivant.
7. Sous l’onglet Clés & jetons, copiez la valeur de Clé API et de Secret de clé API pour une utilisation ultérieure. Vous utiliserez ces deux valeurs pour configurer Twitter en tant que fournisseur d’identité dans votre locataire Azure AD B2C.
8. Sélectionnez Paramètres de l’application pour ouvrir les paramètres de l’application.
9. Dans la partie inférieure de la page, sous Paramètres d’authentification utilisateur, sélectionnez Configurer.
10. Sous Type d’application, sélectionnez le type d’application approprié, par exemple Application web.
11. Sous Infos sur l’application :
    1. Dans le champ URI de rappel/URL de redirection, entrez https://your-tenant.b2clogin.com/your-tenant-name.onmicrosoft.com/your-user-flow-name/oauth1/authresp. Si vous utilisez un domaine personnalisé, entrez https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp. Lorsque vous entrez le nom de votre locataire et l'ID du flux d'utilisateurs, n’utilisez que des minuscules, même s'ils sont en majuscules dans Azure AD B2C. Remplacez :
       • your-tenant-name par le nom de votre locataire.
       • your-domain-name par votre domaine personnalisé.
       • your-user-flow-name par l’identificateur de votre flux d’utilisateur. Par exemple : b2c_1_signup_signin_twitter.
    2. Dans le champ URL du site web, entrez https://your-tenant.b2clogin.com. Remplacez your-tenant par le nom de votre locataire. Par exemple : https://contosob2c.b2clogin.com. Si vous utilisez un domaine personnalisé, entrez https://your-domain-name.
    3. Entrez une URL pour les Conditions d'utilisation du service, par exemple http://www.contoso.com/tos. L’URL de stratégie est une page que vous tenez à jour pour fournir les conditions générales de votre application.
    4. Entrez une URL pour la Politique de confidentialité, par exemple http://www.contoso.com/privacy. L’URL de stratégie est une page que vous tenez à jour pour fournir des informations de confidentialité pour votre application.
12. Sélectionnez Enregistrer.

Configurer Twitter en tant que fournisseur d'identité

1. Connectez-vous au portail Azure en tant qu’administrateur général de votre locataire Azure AD B2C.
2. Si vous avez accès à plusieurs locataires, utilisez l’icône Paramètres dans le menu supérieur pour basculer vers votre locataire Azure AD B2C à partir du menu Répertoires + abonnements.
3. Choisissez Tous les services dans le coin supérieur gauche du Portail Azure, recherchez et sélectionnez Azure Active Directory B2C.
4. Sélectionnez Fournisseurs d’identité, puis Twitter.
5. Saisissez un Nom. Par exemple, Twitter.
6. Dans le champ ID client, entrez la Clé API de l'application Twitter que vous avez créée précédemment.
7. Dans le champ Clé secrète client, entrez la Clé secrète API que vous avez consignée.
8. Sélectionnez Enregistrer.

Ajouter un fournisseur d’identité Twitter à un workflow d’utilisateur

À ce stade, le fournisseur d’identité Twitter a été configuré, mais il n’est encore disponible dans aucune des pages de connexion. Pour ajouter le fournisseur d’identité Twitter à un flux d’utilisateur :

1. Dans votre locataire Azure AD B2C, sélectionnez Flux d’utilisateur.
2. Sélectionnez le flux d'utilisateurs que vous souhaitez ajouter au fournisseur d'identité Twitter.
3. Sous Fournisseurs d’identité sociale, sélectionnez Twitter.
4. Sélectionnez Enregistrer.

Tester votre flux d’utilisateur

1. Pour tester votre stratégie, sélectionnez Exécuter le flux d’utilisateur.
2. Pour Application, sélectionnez l’application web testapp1 que vous avez précédemment inscrite. L’URL de réponse doit être https://jwt.ms.
3. Sélectionnez le bouton Exécuter le flux d’utilisateur.
4. À partir de la page d’inscription ou de connexion, sélectionnez Twitter pour vous connecter avec un compte Twitter.

Création d’une clé de stratégie

Vous devez stocker la clé secrète que vous avez enregistré pour l’application Twitter dans votre locataire Azure AD B2C.

1. Connectez-vous au portail Azure.
2. Si vous avez accès à plusieurs locataires, utilisez l’icône Paramètres dans le menu supérieur pour basculer vers votre locataire Azure AD B2C à partir du menu Répertoires + abonnements.
3. Dans le portail Azure, recherchez et sélectionnez Azure AD B2C.
4. Dans le menu de gauche, sous Stratégies, sélectionnez Identity Experience Framework.
5. Sélectionnez Clés de stratégie, puis Ajouter.
6. Pour Options, choisissez Manual.
7. Entrez un nom pour la clé de stratégie. Par exemple : TwitterSecret. Le préfixe B2C_1A_ est ajouté automatiquement au nom de votre clé.
8. Pour Secret, entrez la valeur de Secret de clé API notée précédemment.
9. Pour Utilisation de la clé, sélectionnez Signature.
10. Cliquez sur Créer.

Configurer Twitter en tant que fournisseur d'identité

Pour permettre aux utilisateurs de se connecter à l'aide d'un compte Twitter, vous devez définir le compte en tant que fournisseur de revendications avec lequel Azure AD B2C peut communiquer par le biais d'un point de terminaison. Le point de terminaison fournit un ensemble de revendications utilisées par Azure AD B2C pour vérifier qu’un utilisateur spécifique s’est authentifié.

Vous pouvez définir un compte Twitter en tant que fournisseur de revendications en l’ajoutant à l’élément ClaimsProviders dans le fichier d’extension de votre stratégie. Reportez-vous au pack de démarrage de stratégie personnalisée que vous avez téléchargé dans les Prérequis de cet article.

1. Ouvrez le fichier TrustFrameworkExtensions.xml.

2. Recherchez l’élément ClaimsProviders. S’il n’existe pas, ajoutez-le sous l’élément racine.

3. Ajoutez un nouveau ClaimsProvider comme suit :

   <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. Remplacez la valeur de client_id par la Clé API notée précédemment.

5. Enregistrez le fichier .

Ajouter un parcours utilisateur

À ce stade, le fournisseur d’identité a été configuré, mais il n’est encore disponible dans aucune des pages de connexion. Si vous n’avez pas votre propre parcours utilisateur personnalisé, créez un doublon d’un modèle de parcours utilisateur existant ; sinon, passez à l’étape suivante.

1. Ouvrez le fichier TrustFrameworkBase.xml à partir du pack de démarrage.
2. Recherchez et copiez l’intégralité du contenu de l’élément UserJourney comprenant Id="SignUpOrSignIn".
3. Ouvrez le fichier TrustFrameworkExtensions.xml, puis recherchez l’élément UserJourneys. Si l’élément n’existe pas, ajoutez-en un.
4. Collez l’intégralité du contenu de l’élément UserJourney que vous avez copié en tant qu’enfant de l’élément UserJourneys.
5. Renommez l’ID du parcours utilisateur. Par exemple : Id="CustomSignUpSignIn".

Ajoutez le fournisseur d’identité à un parcours utilisateur

Maintenant que vous disposez d’un parcours utilisateur, ajoutez-y le nouveau fournisseur d’identité. Vous ajoutez d’abord un bouton de connexion, puis vous liez le bouton à une action. L’action représente le profil technique que vous avez créé plus haut.

1. Recherchez l’élément d’étape d’orchestration comprenant Type="CombinedSignInAndSignUp" ou Type="ClaimsProviderSelection" dans le parcours utilisateur. Il s’agit généralement de la première étape d’orchestration. L’élément ClaimsProviderSelections contient une liste de fournisseurs d’identité auxquels un utilisateur peut se connecter. L’ordre des éléments détermine l’ordre des boutons de connexion présentés à l’utilisateur. Ajoutez un élément XML ClaimsProviderSelection. Définissez la valeur TargetClaimsExchangeId sur un nom convivial.

2. À la prochaine étape d’orchestration, ajoutez un élément ClaimsExchange. Définissez ID sur la valeur de l’ID d’échange des revendications cible. Mettez à jour la valeur de TechnicalProfileReferenceId sur l’ID du profil technique que vous avez créé précédemment.

Le code XML suivant montre les deux premières étapes d’orchestration d’un parcours utilisateur avec le fournisseur d’identité :

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

Configurer la stratégie de partie de confiance

La stratégie de partie de confiance, par exemple SignUpSignIn.xml, spécifie le parcours utilisateur à partir duquel Azure AD B2C s’exécutera. Recherchez l’élément DefaultUserJourney dans la partie de confiance. Mettez à jour la valeur ReferenceId afin qu’elle corresponde à l’ID du parcours utilisateur auquel vous avez ajouté le fournisseur d'identité.

Dans l’exemple suivant, pour le parcours utilisateur CustomSignUpSignIn, la valeur ReferenceId est définie sur CustomSignUpSignIn :

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

Téléchargez la stratégie personnalisée

1. Connectez-vous au portail Azure.
2. Sélectionnez l’icône Annuaire et abonnement dans la barre d’outils du portail, puis sélectionnez l’annuaire qui contient votre locataire Azure AD B2C.
3. Dans la Portail Azure, recherchez et sélectionnez Azure AD B2C.
4. Sous Stratégies, sélectionnez Identity Experience Framework.
5. Sélectionnez Charger une stratégie personnalisée, puis chargez les deux fichiers de stratégie que vous avez modifiés, dans l’ordre suivant : la stratégie d’extension, par exemple TrustFrameworkExtensions.xml, puis la stratégie de la partie de confiance, par exemple SignUpSignIn.xml.

Tester votre stratégie personnalisée

1. Sélectionnez votre stratégie de partie de confiance, par exemple B2C_1A_signup_signin.
2. Pour Application, sélectionnez une application web que vous avez précédemment inscrite. L’URL de réponse doit être https://jwt.ms.
3. Sélectionnez le bouton Exécuter maintenant.
4. À partir de la page d’inscription ou de connexion, sélectionnez Twitter pour vous connecter avec un compte Twitter.