Итак, у вас есть установка приложения angular 6? и у вас настроен клиент B2C? Давайте свяжем их, и ваши пользователи будут регистрироваться в вашем приложении.
Вы прочитали первую и вторую статью?
Если вы случайно попали в эту статью после поиска в Google одного из своих курсовых решений для университетских заданий, я надеюсь, что смогу помочь.
Если нет, и вы не знаете, что такое angular 6, и не знаете, что такое Microsoft B2C, прочтите следующее:
Как создать свое первое приложение на Angular 6 менее чем за 5 минут
У вас должно быть уже настроено следующее:
- Одно приложение Angular 6, которое вы можете запускать локально красиво и весело
- Один клиент Microsoft Azure B2C с двумя пользовательскими потоками (вход и регистрация)
Шаг 1. Установка Microsoft MSAL
Итак, если вы помните из первого поста, мы установили Angular CLI с помощью node. Теперь нам нужно установить библиотеку MSAL (используя Node).
Что такое MSAL ???
Библиотека MSAL представляет собой оболочку основной библиотеки MSAL.js, которая позволяет приложениям Angular (4.3–6) аутентифицировать корпоративных пользователей с помощью Microsoft Azure Active Directory (AAD). Чтобы узнать больше о MSAL, щелкните здесь.
Чтобы установить MSLA в наше приложение (Извините, для Mac):
- Перейдите в каталог приложения / b2c-basic-app.
- выполните следующую команду
npm install @azure/msal-angular --save
Шаг 2: Добавление MSAL в ваше приложение Angular
Итак, вы установили MSAL в свой проект, выполнив предыдущую команду. Но теперь вам нужно настроить приложение, чтобы получить доступ к некоторым функциям MSLA.
- Сначала вам нужно создать службу MSAL, которая будет использоваться в компонентах вашего приложения. Создайте в своем приложении каталог в / app и назовите его services.
- Затем создайте файл в этом каталоге / services с именем msal.service.ts.
- Ваша файловая структура должна выглядеть примерно так:
4. Откройте файл msal.service.ts и вставьте следующий код.
Позвольте мне попытаться объяснить вам код…
Этот объект - tenantConfig. Арендатор - это ваш идентификатор арендатора B2C. ClientID - это идентификатор приложения (образец веб-приложения). Ваш URI перенаправления - это URI перенаправления, указанный в ваших приложениях b2c. B2C_Scopes будет таким же, за исключением того, что вам нужно будет заменить арендатора своим именем арендатора.
Это создает объект clientApplication путем передачи tenantConfig и строки полномочий в MSAL. Этот объект клиентского приложения теперь действует как ваше приложение B2C.
Эти два метода очень похожи. Однако по-другому они меняют clientApplication.authority для использования других политик.
Это объект полномочия, который определяет, какая политика запускается. Итак, если вы присмотритесь, то заметите, что в конце авторитетного URL используются другие правила.
e.g.
При срабатывании входа в систему:
https://login.microsoftonline.com/tfp/ '+ this.tenantConfig.tenant + «/» + this.tenantConfig.signInPolicy;
Когда срабатывает регистрация:
https://login.microsoftonline.com/tfp/ '+ this.tenantConfig.tenant + «/» + this.tenantConfig.signUpPolicy;
Первый метод используется для аутентификации пользователей. И логин, и регистрация вызывают этот метод после установки объекта полномочий. Затем метод аутентификации использует клиентское приложение для запуска всплывающего окна входа в систему.
Если пользователь успешно завершит регистрацию или войдет в появившуюся форму, он вызовет saveAccessTokenToCache (accessToken);.
Этот метод использует sessionStorage для хранения вашего токена доступа. После того, как токен доступа будет сохранен, ваше приложение будет знать, что этот человек имеет право использовать ваше клиентское приложение.
Эти методы не требуют пояснений. Следует отметить метод getUserEmail (). При этом используется метод getUser (), который возвращает объект пользователя. В этом пользовательском объекте находится массив электронных писем. Электронная почта пользователя, вошедшего в систему, будет первым, отсюда [0].
Все еще не понимаете?
Попробуйте выйти из пользовательского объекта и проверить его в консоли Google Chrome. Console.log (this.clientApplication.getUser ())
Теперь углубитесь в объект, который был выведен на консоль.
Надеюсь, это объяснит, что мы делаем.
Хорошо, надеюсь, ты все еще со мной, и я еще не утомил тебя до смерти.
Не долго, обещаю ...
Итак, у вас должна быть служба MSAL, которую теперь можно использовать во всем приложении. Однако для того, чтобы позволить другим вашим компонентам использовать эту службу, вы должны сначала добавить ее в файл app.module.ts.
5. Откройте файл app.module.ts и вставьте в него следующий код:
Здесь я добавляю только что созданную вами службу MSAL в файл
app.module.ts (строка 5). Я также добавил MsalService в массив поставщиков (строка 15). Это позволяет вашему приложению узнать о служебном файле, чтобы вы могли позже импортировать его в компоненты.
6. Теперь откройте файл app.component.ts и вставьте следующий код.
Объяснение кода:
Здесь я импортирую службу, которую вы создали ранее, в свой app.component, чтобы вы могли создать экземпляр службы в своем компоненте.
Здесь я ввожу MsalService в компоненты. При этом используется только что импортированный MsalService и создается объект msalService, который будет использоваться для выполнения запросов MSAL в компоненте. Теперь вы можете получить доступ к методам объектов MsalService.
Эти плохие парни говорят сами за себя. Он просто использует службу msal для выполнения этих вызовов методов.
Шаг 3. Обновление app.component.html
WOOP WOOP - ТЫ ПРИЧИНИЛ !!!
Все, что нам сейчас нужно, это кнопка выхода и приветственное сообщение для пользователя после входа в систему.
Откройте файл app.component.html и вставьте следующий код в:
Объяснение кода:
Обратите внимание, как я использовал этот параметр * ngIf для тега div . Если вы посмотрите на app.component.ts, то заметите метод isUserLoggedIn ().
Это проверяет, вошел ли пользователь в систему. Он проверяет, не является ли пользователь нулевым. Если пользователь не вошел в систему, то на индексной странице будут отображаться две кнопки (вход / регистрация).
Тот же тег также добавляется к кнопке выхода, но на этот раз он не инвертируется, поэтому кнопка выхода отображается только тогда, когда пользователь вошел в систему.
Я также добавил Welcome{{username()} на главную страницу.
Это вызов метода файла app.component.ts, который использует службу msal для получения электронной почты пользователя.
Примечание: если вы получаете сообщение об ошибке, связанное с получением адреса электронной почты пользователя. Это означает, что вы не отметили EmailAddress и Email в заявках приложений рабочих процессов входа / регистрации.
Шаг 4: Запуск вашего приложения
Откройте каталог изменения терминала в каталоге вашего приложения и запустите небольшой
ng serve --open
Теперь это должно загрузить ваше приложение. Вы можете регистрировать новых пользователей и входить в систему текущих пользователей.
Каждый успешно вошедший в систему пользователь будет встречен приветственным сообщением.
Заключение
Надеюсь, у тебя все заработало. Я понимаю, что в этой статье было много копий и вставок кода, поэтому, если у вас есть какие-либо вопросы, пожалуйста, напишите мне сообщение. Я более чем счастлив помочь.
Теперь у вас должно быть очень простое приложение Angular 6, в котором вы можете входить и регистрировать пользователей.
Теперь вы являетесь администратором этих пользователей. Если вы не совсем помните, как просматривать список пользователей, зарегистрированных в вашем приложении, вернитесь и прочтите мою статью Как настроить Active Directory B2C в Microsoft Azure (шаг 3 должен ответить на ваш вопрос)
Если вам понравилась эта статья, пожалуйста, дайте мне аплодисменты, она сделает мой день немного лучше.
Следующая статья
Моя следующая статья будет посвящена настраиваемым пользовательским потокам. Пользовательские потоки пользователей по сути являются пользовательскими потоками по умолчанию, которые вы только что использовали, однако они предоставляют разработчикам дополнительные настройки. Пользовательские потоки пользователей могут быть полностью отредактированы разработчиком идентификации для выполнения множества различных задач.
Зачем вам нужны специальные политики?
Допустим, у вас есть база данных пользователей. У каждого пользователя в базе данных есть имя, добрый день, почтовый индекс и адрес электронной почты.
Теперь вы хотите создать клиентское приложение, которое позволяет пользователям из этой базы данных создавать учетные записи в вашем клиентском приложении. Вы же не хотите, чтобы какие-нибудь Том Дик и Гарри создавали аккаунты. С помощью политик по умолчанию вы не сможете это контролировать.
