Настройка регистрации и входа с учетной записью Twitter через Azure Active Directory B2C

• Создайте поток пользователя, чтобы пользователи могли зарегистрироваться и входить в ваше приложение.
• Зарегистрируйте веб-приложение.

• Выполните шаги, описанные в статье Начало работы с настраиваемыми политиками в Azure Active Directory B2C.
• Зарегистрируйте веб-приложение.

1. Выполните вход на портал разработчиков Twitter с учетными данными для учетной записи Twitter.
2. Нажмите кнопку Создать проект.
3. На вкладке Имя проекта введите желаемое имя проекта и нажмите кнопку Далее.
4. На вкладке Вариант использования выберите предпочитаемый вариант использования и нажмите кнопку Далее.
5. На вкладке Описание проекта введите описание проекта и нажмите кнопку Далее.
6. На вкладке Имя приложения введите имя приложения, например azureadb2c, и нажмите кнопку Далее.
7. На вкладке "Маркеры ключей" & скопируйте значение ключа API и секрета ключа API. Они будут использоваться позже для настройки.
8. Выберите Параметры приложения, чтобы открыть параметры приложения.
9. В нижней части страницы в разделе Параметры проверки подлинности пользователя выберите Настроить.
10. В разделе "Тип приложения" выберите соответствующий тип приложения, например веб-приложение.
11. В разделе "Сведения о приложении":
    1. В поле URL-адрес обратного вызова или перенаправления введите значение https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/your-policy-id/oauth1/authresp. Если используется личный домен, введите https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp. При вводе имени клиента и идентификатора потока пользователя необходимо использовать только символы нижнего регистра, даже в тех случаях, когда эти данные имеют символы верхнего регистра в Azure AD B2C. Заменить:
       • your-tenant-name на имя вашего клиента.
       • your-domain-name на имя своего личного домена.
       • your-policy-id на идентификатор потока пользователя. Например, b2c_1a_signup_signin_twitter.
    2. В поле URL-адрес веб-сайта введите https://your-tenant.b2clogin.com. Замените your-tenant именем вашего клиента. Например, https://contosob2c.b2clogin.com. Если используется личный домен, введите https://your-domain-name.
    3. (Необязательно) Введите URL-адрес для условий обслуживания, например http://www.contoso.com/tos. URL-адрес политики — это управляемая вами страница, где предоставляются сведения об условиях использования вашего приложения.
    4. (Необязательно) Введите URL-адрес политики конфиденциальности, например http://www.contoso.com/privacy. URL-адрес политики — это управляемая вами страница, где предоставляются сведения о конфиденциальности для вашего приложения.
12. Выберите Сохранить.

1. Выполните вход на портал разработчиков Twitter с учетными данными для учетной записи Twitter.
2. Нажмите кнопку Создать проект.
3. На вкладке Имя проекта введите желаемое имя проекта и нажмите кнопку Далее.
4. На вкладке Вариант использования выберите предпочитаемый вариант использования и нажмите кнопку Далее.
5. На вкладке Описание проекта введите описание проекта и нажмите кнопку Далее.
6. На вкладке Имя приложения введите имя приложения, например azureadb2c, и нажмите кнопку Далее.
7. На вкладке Ключи и маркеры скопируйте значения ключа API и секрета ключа API для последующего использования. Оба эти значения необходимы для настройки Twitter в качестве поставщика удостоверений в вашем клиенте Azure AD B2C.
8. Выберите Параметры приложения, чтобы открыть параметры приложения.
9. В нижней части страницы в разделе Параметры проверки подлинности пользователя выберите Настроить.
10. В разделе "Тип приложения" выберите соответствующий тип приложения, например веб-приложение.
11. В разделе "Сведения о приложении":
    1. В поле URL-адрес обратного вызова или перенаправления введите значение https://your-tenant.b2clogin.com/your-tenant-name.onmicrosoft.com/your-user-flow-name/oauth1/authresp. Если используется личный домен, введите https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp. При вводе имени клиента и идентификатора потока пользователя необходимо использовать только символы нижнего регистра, даже в тех случаях, когда эти данные имеют символы верхнего регистра в Azure AD B2C. Заменить:
       • your-tenant-name на имя вашего клиента.
       • your-domain-name на имя своего личного домена.
       • your-user-flow-name на идентификатор потока пользователя. Например, b2c_1_signup_signin_twitter.
    2. В поле URL-адрес веб-сайта введите https://your-tenant.b2clogin.com. Замените your-tenant именем вашего клиента. Например, https://contosob2c.b2clogin.com. Если используется личный домен, введите https://your-domain-name.
    3. Введите URL-адрес условий предоставления услуг, например http://www.contoso.com/tos. URL-адрес политики — это управляемая вами страница, где предоставляются сведения об условиях использования вашего приложения.
    4. Введите URL-адрес политики конфиденциальности, например http://www.contoso.com/privacy. URL-адрес политики — это управляемая вами страница, где предоставляются сведения о конфиденциальности для вашего приложения.
12. Выберите Сохранить.

Настройка Twitter в качестве поставщика удостоверений

1. Войдите на портал Azure с правами глобального администратора клиента Azure AD B2C.
2. Если у вас есть доступ к нескольким клиентам, выберите значок Параметры в верхнем меню, чтобы переключиться на клиент Azure AD B2C из меню каталогов и подписок.
3. Выберите Все службы в левом верхнем углу окна портала Azure, найдите службу Azure AD B2C и выберите ее.
4. Щелкните элемент Поставщики удостоверений и выберите вариант Twitter.
5. Введите Имя. Например, Twitter.
6. В поле Идентификатор клиента введите ключ API для созданного ранее приложения Twitter.
7. В поле Секрет клиента введите секрет ключа API для приложения, записанный ранее.
8. Выберите Сохранить.

Добавление поставщика удостоверений Twitter в поток пользователя

На этом этапе поставщик удостоверений Twitter уже настроен, но еще не отображается на страницах входа. Чтобы добавить поставщик удостоверений Twitter в поток пользователя, выполните следующие действия.

1. В клиенте Azure AD B2C выберите Потоки пользователей.
2. Выберите поток пользователя, для которого требуется добавить поставщик удостоверений Twitter.
3. В разделе Поставщики удостоверений в социальных сетях выберите Twitter.
4. Выберите Сохранить.

Тестирование потока пользователя

1. Чтобы проверить политику, выберите Выполнить поток пользователя.
2. В разделе Приложение выберите зарегистрированное ранее веб-приложение с именем testapp1. В поле URL-адрес ответа должно содержаться значение https://jwt.ms.
3. Нажмите кнопку Выполнить поток пользователя.
4. На странице регистрации или входа выберите Twitter для входа с использованием учетной записи Twitter.

Создание ключа политики

Сохраните секретный ключ, который ранее был сохранен для приложения Twitter в клиенте Azure AD B2C.

1. Войдите на портал Azure.
2. Если у вас есть доступ к нескольким клиентам, выберите значок Параметры в верхнем меню, чтобы переключиться на клиент Azure AD B2C из меню каталогов и подписок.
3. В портале Azure найдите и выберите Azure AD B2C.
4. В меню слева в разделе Политики выберите Identity Experience Framework.
5. Выберите Ключи политики, а затем щелкните Добавить.
6. Для пункта Параметры выберите Manual.
7. Введите имя ключа политики. Например, TwitterSecret. Префикс B2C_1A_ будет автоматически добавлен к имени ключа.
8. Введите в поле Секрет значение секрета ключа API, которое вы записали ранее.
9. Для параметра Использование ключа выберите Signature.
10. Нажмите кнопку Создать.

Настройка Twitter в качестве поставщика удостоверений

Чтобы разрешить пользователям входить в систему с помощью учетной записи Twitter, определите учетную запись, используемую в качестве поставщика утверждений, с которым Azure AD B2C может взаимодействовать через конечную точку. Конечная точка предоставляет набор утверждений, используемых Azure AD B2C, чтобы проверить, была ли выполнена проверка подлинности определенного пользователя.

Чтобы определить учетную запись Twitter в качестве поставщика утверждений, можно добавить ее в элемент ClaimsProviders в файле расширения политики. Ознакомьтесь с пакетом для начала работы с настраиваемой политикой, который вы скачали при подготовке предварительных требований к этой статье.

1. Откройте файл TrustFrameworkExtensions.xml.

2. Найдите элемент ClaimsProviders. Если он не существует, добавьте его в корневой элемент.

3. Добавьте новый элемент ClaimsProvider следующим образом.

   <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. Замените значение параметра client_id ключом API, записанным ранее.

5. Сохраните файл.

Добавление пути взаимодействия пользователя

На этом этапе поставщик удостоверений уже настроен, но еще не отображается на страницах входа. Если у вас нет собственного пути взаимодействия пользователя, создайте дубликат существующего шаблона. В противном случае перейдите к следующему шагу.

1. Откройте файл TrustFrameworkBase.xml из начального пакета.
2. Найдите и скопируйте все содержимое элемента UserJourney, в котором присутствует запись Id="SignUpOrSignIn".
3. Откройте файл TrustFrameworkExtensions.xml и найдите элемент UserJourneys. Если элемент не существует, добавьте его.
4. Вставьте все скопированное содержимое элемента UserJourney в качестве дочернего элемента в элемент UserJourneys.
5. Переименуйте идентификатор этого пути взаимодействия пользователя. Например, Id="CustomSignUpSignIn".

Добавление поставщика удостоверений в путь взаимодействия пользователя

Теперь, когда у вас есть путь взаимодействия пользователя, добавьте в него новый поставщик удостоверений. Сначала добавьте кнопку входа, а затем свяжите кнопку с действием. Это действие является техническим профилем, который вы создали ранее.

1. В пути взаимодействия пользователя найдите элемент шага оркестрации, включающий Type="CombinedSignInAndSignUp" или Type="ClaimsProviderSelection". Обычно это первый шаг оркестрации. Элемент ClaimsProviderSelections содержит список поставщиков удостоверений, которые пользователь может использовать для входа. Порядок элементов управляет порядком кнопок входа, представленных пользователем. Добавьте XML-элемент ClaimsProviderSelection. Присвойте значению TargetClaimsExchangeId понятное имя.

2. На следующем шаге оркестрации добавьте элемент ClaimsExchange. Задайте в качестве Id значение идентификатора обмена утверждениями целевого объекта. Замените значение TechnicalProfileReferenceId идентификатором технического профиля, созданным ранее.

В следующем коде XML показаны первые два этапа оркестрации пути взаимодействия пользователя с поставщиком удостоверений:

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

Настройка политики проверяющей стороны

Политика проверяющей стороны, например SignUpSignIn.xml, указывает путь взаимодействия пользователя, который будет исполнять Azure AD B2C. Найдите элемент DefaultUserJourney в элементе проверяющей стороны. Обновите ReferenceId в соответствии с идентификатором пути взаимодействия пользователя, в который добавлен поставщик удостоверений.

В следующем примере в качестве значения параметра ReferenceId пути взаимодействия пользователя CustomSignUpSignIn задано CustomSignUpSignIn:

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

Передача настраиваемой политики

1. Войдите на портал Azure.
2. Выберите значок Каталог и подписка в верхней панели инструментов портала, а затем выберите каталог, содержащий клиент Azure AD B2C.
3. В портале Azure найдите и выберите Azure AD B2C.
4. В разделе Политики выберите Identity Experience Framework.
5. Выберите Отправить пользовательскую политику, а затем отправьте два измененных файла политики в следующем порядке: политика расширения, например TrustFrameworkExtensions.xml, а затем политика проверяющей стороны, например SignUpSignIn.xml.

Тестирование настраиваемой политики

1. Выберите политику проверяющей стороны, например B2C_1A_signup_signin.
2. В разделе Приложение выберите зарегистрированное ранее веб-приложение. В поле URL-адрес ответа должно содержаться значение https://jwt.ms.
3. Нажмите кнопку Выполнить.
4. На странице регистрации или входа выберите Twitter для входа с использованием учетной записи Twitter.