Configurare l'iscrizione e l'accesso con un account Twitter tramite Azure Active Directory B2C

• Creare un flusso utente in modo che gli utenti possano iscriversi e accedere all'applicazione.
• Registrare un'applicazione Web.

• Completare i passaggi descritti in Introduzione ai criteri personalizzati in Active Directory B2C
• Registrare un'applicazione Web.

1. Accedere al portale per sviluppatori di Twitter con le credenziali dell'account Twitter.
2. Fare clic sul pulsante + Crea progetto .
3. Nella scheda Nome progetto immettere un nome preferito del progetto e quindi fare clic sul pulsante Avanti .
4. Nella scheda Caso d'uso selezionare il caso d'uso preferito e quindi selezionare Avanti.
5. Nella scheda Descrizione progetto immettere la descrizione del progetto e quindi fare clic sul pulsante Avanti .
6. Nella scheda Nome app immettere un nome per l'app, ad esempio azureadb2c, e il pulsante Selezionare Avanti .
7. Nella scheda Token chiavi & copiare il valore della chiave API e del segreto della chiave API. Questi verranno usati per la configurazione in un secondo momento.
8. Selezionare Impostazioni app per aprire le impostazioni dell'app.
9. Nella parte inferiore della pagina, in Impostazioni di autenticazione utente selezionare Configura.
10. In Tipo di app selezionare il tipo di app appropriato, ad esempio App Web.
11. In Informazioni sull'app:
    1. Per l'URI di callback/URL di reindirizzamento immettere https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/your-policy-id/oauth1/authresp. Se si usa un dominio personalizzato, immettere https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp. Usare tutte le lettere minuscole quando si immette il nome del tenant e l'ID del flusso utente anche se sono definiti con lettere maiuscole in Azure AD B2C. Sostituire:
       • your-tenant-name con il nome del tenant.
       • your-domain-name con il dominio personalizzato.
       • your-policy-id con l'identificatore del flusso utente. Ad esempio, b2c_1a_signup_signin_twitter.
    2. Per URL del sito Web immettere https://your-tenant.b2clogin.com. Sostituire your-tenant con il nome del tenant. Ad esempio, https://contosob2c.b2clogin.com. Se si usa un dominio personalizzato, immettere https://your-domain-name.
    3. (Facoltativo) Immettere un URL per le Condizioni per il servizio, ad esempio http://www.contoso.com/tos. L'URL dei criteri è una pagina gestita per fornire termini e condizioni per l'applicazione.
    4. (Facoltativo) Immettere un URL per l'informativa sulla privacy, ad esempio http://www.contoso.com/privacy. L'URL del criterio è una pagina da mantenere per fornire informazioni sulla privacy per l'applicazione.
12. Seleziona Salva.

1. Accedere al portale per sviluppatori di Twitter con le credenziali dell'account Twitter.
2. Fare clic sul pulsante + Crea progetto .
3. Nella scheda Nome progetto immettere un nome preferito del progetto e quindi fare clic sul pulsante Avanti .
4. Nella scheda Caso d'uso selezionare il caso d'uso preferito e quindi selezionare Avanti.
5. Nella scheda Descrizione progetto immettere la descrizione del progetto e quindi fare clic sul pulsante Avanti .
6. Nella scheda Nome app immettere un nome per l'app, ad esempio azureadb2c, e il pulsante Selezionare Avanti .
7. Nella scheda Token chiavi & copiare il valore della chiave API e del segreto della chiave API per un secondo momento. Entrambi vengono usati per configurare Twitter come provider di identità nel tenant di Azure AD B2C.
8. Selezionare Impostazioni app per aprire le impostazioni dell'app.
9. Nella parte inferiore della pagina, in Impostazioni di autenticazione utente selezionare Configura.
10. In Tipo di app selezionare il tipo di app appropriato, ad esempio App Web.
11. In Informazioni sull'app:
    1. Per l'URI di callback/URL di reindirizzamento immettere https://your-tenant.b2clogin.com/your-tenant-name.onmicrosoft.com/your-user-flow-name/oauth1/authresp. Se si usa un dominio personalizzato, immettere https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp. Usare tutte le lettere minuscole quando si immette il nome del tenant e l'ID del flusso utente anche se sono definiti con lettere maiuscole in Azure AD B2C. Sostituire:
       • your-tenant-name con il nome del tenant.
       • your-domain-name con il dominio personalizzato.
       • your-user-flow-name con l'identificatore del flusso utente. Ad esempio, b2c_1_signup_signin_twitter.
    2. Per URL del sito Web immettere https://your-tenant.b2clogin.com. Sostituire your-tenant con il nome del tenant. Ad esempio, https://contosob2c.b2clogin.com. Se si usa un dominio personalizzato, immettere https://your-domain-name.
    3. Immettere un URL per le Condizioni per il servizio, ad esempio http://www.contoso.com/tos. L'URL dei criteri è una pagina gestita per fornire termini e condizioni per l'applicazione.
    4. Immettere un URL per l'informativa sulla privacy, ad esempio http://www.contoso.com/privacy. L'URL del criterio è una pagina da mantenere per fornire informazioni sulla privacy per l'applicazione.
12. Seleziona Salva.

Configurare Twitter come provider di identità

1. Accedere al portale di Azure come amministratore globale del tenant di Azure AD B2C.
2. Se si ha accesso a più tenant, selezionare l'icona Impostazioni nel menu in alto per passare al tenant di Azure AD B2C dal menu Directory e sottoscrizioni.
3. Scegliere Tutti i servizi nell'angolo in alto a sinistra del portale di Azure, cercare Azure AD B2C e selezionarlo.
4. Selezionare Provider di identità e quindi Twitter.
5. Immetti un valore per Nome. Ad esempio, Twitter.
6. Per ID client immettere la chiave API dell'applicazione Twitter creata in precedenza.
7. Per Segreto client immettere il segreto della chiave API registrato.
8. Seleziona Salva.

Aggiungere un provider di identità Twitter a un flusso utente

A questo punto, il provider di identità twitter è stato configurato, ma non è ancora disponibile in nessuna delle pagine di accesso. Per aggiungere il provider di identità Twitter a un flusso utente:

1. Nel tenant di Azure AD B2C selezionare Flussi utente.
2. Selezionare il flusso utente da aggiungere al provider di identità Twitter.
3. In Provider di identità social selezionare Twitter.
4. Seleziona Salva.

Testare il flusso utente

1. Per testare i criteri, selezionare Esegui flusso utente.
2. In Applicazione selezionare l'applicazione Web denominata testapp1 registrata in precedenza. L'URL di risposta dovrebbe mostrare https://jwt.ms.
3. Selezionare il pulsante Esegui flusso utente.
4. Nella pagina di iscrizione o accesso selezionare Twitter per accedere con l'account Twitter.

Creare una chiave dei criteri

È necessario archiviare la chiave privata registrata in precedenza per l'app Twitter nel tenant di Azure AD B2C.

1. Accedi al portale di Azure.
2. Se si ha accesso a più tenant, selezionare l'icona Impostazioni nel menu in alto per passare al tenant di Azure AD B2C dal menu Directory e sottoscrizioni.
3. Nel portale di Azure cercare e selezionare Azure AD B2C.
4. Nel menu a sinistra, in Criteri, selezionare Framework dell'esperienza di gestione delle identità.
5. Selezionare Chiavi dei criteri e quindi selezionare Aggiungi.
6. Per Opzioni scegliere Manual.
7. Immettere un nome per la chiave dei criteri. Ad esempio, TwitterSecret. Verrà aggiunto automaticamente il prefisso B2C_1A_ al nome della chiave.
8. In Segreto immettere il valore del segreto della chiave API registrato in precedenza.
9. In Uso chiave selezionare Signature.
10. Fai clic su Crea.

Configurare Twitter come provider di identità

Per consentire agli utenti di accedere usando un account Twitter, è necessario definire l'account come provider di attestazioni con cui Azure AD B2C può comunicare tramite un endpoint. L'endpoint offre un set di attestazioni che vengono usate da Azure AD B2C per verificare se un utente specifico è stato autenticato.

È possibile definire un account Twitter come provider di attestazioni aggiungendolo all'elemento ClaimsProviders nel file di estensione dei criteri. Fare riferimento al pacchetto di avvio dei criteri personalizzato scaricato nei prerequisiti di questo articolo.

1. Aprire TrustFrameworkExtensions.xml.

2. Trovare l'elemento ClaimsProviders. Se non esiste, aggiungerlo nell'elemento radice.

3. Aggiungere un nuovo ClaimsProvider come illustrato di seguito:

   <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. Sostituire il valore di client_id con la chiave API registrata in precedenza.

5. Salva il file.

Aggiungere un percorso utente

A questo punto, il provider di identità è stato configurato, ma non è ancora disponibile in nessuna delle pagine di accesso. Se non si ha un percorso utente personalizzato, creare un duplicato di un percorso utente modello esistente, altrimenti continuare con il passaggio successivo.

1. Aprire il file TrustFrameworkBase.xml dallo starter pack.
2. Trovare e copiare l'intero contenuto dell'elemento UserJourney che include Id="SignUpOrSignIn".
3. Aprire TrustFrameworkExtensions.xml e trovare l'elemento UserJourneys. Se l'elemento non esiste, aggiungerne uno.
4. Incollare l'intero contenuto dell'elemento UserJourney copiato come figlio dell'elemento UserJourneys.
5. Rinominare l'ID del percorso utente. Ad esempio, Id="CustomSignUpSignIn".

Aggiungere il provider di identità a un percorso utente

Dopo aver creato un percorso utente, aggiungere il nuovo provider di identità al percorso utente. Aggiungere prima un pulsante di accesso, quindi collegare il pulsante a un'azione. L'azione è il profilo tecnico creato in precedenza.

1. Trovare l'elemento del passaggio di orchestrazione che include Type="CombinedSignInAndSignUp"o Type="ClaimsProviderSelection" nel percorso utente. In genere è il primo passaggio di orchestrazione. L'elemento ClaimsProviderSelections contiene un elenco di provider di identità con cui un utente può accedere. L'ordine degli elementi controlla l'ordine dei pulsanti di accesso presentati all'utente. Aggiungere un elemento XML ClaimsProviderSelection . Impostare il valore di TargetClaimsExchangeId su un nome descrittivo.

2. Nel passaggio di orchestrazione successivo aggiungere un elemento ClaimsExchange . Impostare ID sul valore dell'ID di scambio di attestazioni di destinazione. Aggiornare il valore di TechnicalProfileReferenceId sull'ID del profilo tecnico creato in precedenza.

Il codice XML seguente illustra i primi due passaggi di orchestrazione di un percorso utente con il provider di 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>

Configurare i criteri della relying party

I criteri della relying party, ad esempio SignUpSignIn.xml, specificano il percorso utente che verrà eseguito da Azure AD B2C. Trovare l'elemento DefaultUserJourney all'interno della relying party. Aggiornare ReferenceId in modo che corrisponda all'ID percorso utente in cui è stato aggiunto il provider di identità.

Nell'esempio seguente, per il CustomSignUpSignIn percorso utente, ReferenceId è impostato su CustomSignUpSignIn:

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

Caricare il criterio personalizzati

1. Accedi al portale di Azure.
2. Selezionare l'icona Directory e sottoscrizione nella barra degli strumenti del portale e quindi la directory contenente il tenant di Azure AD B2C.
3. Nel portale di Azure cercare e selezionare Azure AD B2C.
4. In Criteri selezionare Identity Experience Framework.
5. Selezionare Carica criteri personalizzati e quindi caricare i due file di criteri modificati, nell'ordine seguente: i criteri di estensione, ad esempio , quindi i criteri della relying party, ad esempio TrustFrameworkExtensions.xmlSignUpSignIn.xml.

Testare i criteri personalizzati

1. Selezionare i criteri della relying party, ad esempio B2C_1A_signup_signin.
2. In Applicazione selezionare un'applicazione Web registrata in precedenza. L'URL di risposta dovrebbe mostrare https://jwt.ms.
3. Selezionare il pulsante Esegui adesso .
4. Nella pagina di iscrizione o accesso selezionare Twitter per accedere con l'account Twitter.