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

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

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

Предварительные требования

• Visual Studio Code

• Node.js

• Учетная запись социальных сетей Facebook, Google или Майкрософт

• Пример кода из 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

Нажмите кнопку Call API (Вызвать API), чтобы веб-API возвратил ваше отображаемое имя в качестве объекта JSON.

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

Дальнейшие действия

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