Краткое руководство: Настройка входа в одностраничное приложение с помощью Azure Active Directory B2C

Azure Active Directory B2C (Azure AD B2C) обеспечивает управление облачными удостоверениями для защиты приложений, бизнеса и клиентов. Azure AD B2C позволяет приложениям проходить проверку подлинности в учетных записях социальных сетей и корпоративных учетных записях с помощью открытых стандартных протоколов.

В этом кратком руководстве вы используете одностраничное приложение для входа с помощью поставщика удостоверений социальных сетей и вызова защищенного веб-API Azure AD B2C.

Предпосылки

• Visual Studio Code

• Node.js

• Аккаунт в социальных сетях от Facebook, Google или Microsoft

• Пример кода с GitHub: ms-identity-b2c-javascript-spa:

  Вы можете скачать zip-архив или клонировать репозиторий

  git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git
  

Запуск приложения

1. Запустите сервер, выполнив следующие команды из командной строки Node.js:

   npm install
   npm update
   npm start
   

   Сервер, запущенный server.js , отображает порт, который он прослушивает:

   Listening on port 6420...
   

2. Перейдите по URL-адресу приложения. Например: http://localhost:6420.

Вход с помощью учетной записи

1. Выберите Войти , чтобы начать цикл взаимодействия с пользователем.

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

   

   Вы проходите аутентификацию (входите в систему) с использованием учетных данных учетной записи социальной сети и разрешаете приложению считывать информацию из вашей учетной записи социальной сети. Предоставив доступ, приложение может получить информацию профиля из социальной сети, такую как ваше имя и город.

3. Завершите процесс входа для поставщика идентификации.

Доступ к защищенному ресурсу API

Выберите Вызвать API, чтобы ваше отображаемое имя было возвращено из веб-API в формате объекта JSON.

Пример одностраничного приложения включает маркер доступа в запрос к защищенному ресурсу веб-API.

Дальнейшие шаги

• Начните создавать собственное подразделение Azure Active Directory B2C на портале Azure