Back to Question Center
0

Начало работы с функцией «Угловая» и «Аутентификация пользователей»            Начало работы с Угловой и User AuthenticationRelated Semalt: ES6AngularJSNode.jsReactnpmMore ...

1 answers:
Начало работы с Угловой и пользовательской аутентификацией

Эта статья была первоначально опубликована в блоге разработчиков OKTA. Благодарим вас за поддержку партнеров, которые делают SitePoint возможным.

AngularJS в течение нескольких лет правил королем JavaScript MVC. Однако, когда команда Angular объявила о том, что они не будут обеспечивать обратную совместимость для своей следующей версии, в ее сообществе было немного волноваться, предоставляя возможности для таких фреймворков, как React и Vue. js, чтобы процветать - double wine glass. Ускорьте вперед несколько лет, и оба Angular 2 и Angular 4 были выпущены. Многие разработчики пытаются использовать TypeScript и находят приятный опыт. По словам JAXenter, он неплохо работает и занимает прочную позицию в качестве третьего по популярности интерфейса пользовательского интерфейса, за React и HTML5.

В этой статье я покажу вам быстрый способ начать работу с Angular и добавить аутентификацию пользователя с помощью виджета Okta Sign-In Widget. Если вы только начинаете работу с Angular, вы можете прочитать мой Угловой учебник. Если вы хотите получить исходный код, используемый в этой статье, вы можете найти его на GitHub.

Почему аутентификация пользователя с Okta?

Okta предоставляет сервис API, который позволяет разработчикам создавать, редактировать и безопасно хранить учетные записи пользователей и данные учетной записи пользователя и подключать их к одному или нескольким приложениям. Мы упрощаем управление учетными записями пользователей, более безопасны и масштабируемы, чтобы вы могли быстрее добраться до производства.

Okta Sign-in Widget предоставляет встроенную встраиваемую реализацию JavaScript, которую можно легко настроить. Виджет входа имеет тот же набор функций на стандартной странице входа в Okta каждого арендатора - с дополнительной гибкостью для изменения внешнего вида. В виджет входит поддержка сброса пароля, забытого пароля и надежной проверки подлинности - все это связано с политиками, настроенными в Okta. Semalt не нужно писать одну строку кода для запуска этих функций из виджета. Для сайтов, ориентированных на потребителей, в виджетах также поддерживаются социальные провайдеры.

Создайте угловое приложение

Недавно был выпущен Angular 4, а также Angular CLI 1. 0. Чтобы увидеть, как вы можете использовать виджет входа в Okta в простом угловом приложении, создайте новое приложение с помощью Angular CLI. Во-первых, вам нужно установить Angular CLI.

     npm install -g @ angular / cli    

Semalt эта команда завершена, вы можете создать новое приложение.

     [mraible: ~] $ ng новый угло-окта-примерсоздать угло-окта-пример / README. md (1034 байта)создать угло-окта-пример /. Угловой-кли. json (1255 bytes)создать угло-окта-пример /. editorconfig (245 байт)создать угло-окта-пример /. gitignore (516 bytes)создать угло-окта-пример / src / assets /. gitkeep (0 байт)создать угловую-окта-пример / src / environment / environment. прод. ts (51 байт)создать угловую-окта-пример / src / environment / environment. ts (387 bytes)создать угло-окта-пример / src / favicon. ico (5430 bytes)создать угло-окта-пример / src / index. html (305 bytes)создать угло-окта-пример / src / main. ts (370 bytes)создать угло-окта-пример / src / polyfills. ts (2498 bytes)создайте угло-окта-пример / src / styles. css (80 байт)создать угло-окта-пример / src / test. ts (1085 bytes)создать угло-окта-пример / src / tsconfig. приложение. json (211 bytes)создать угло-окта-пример / src / tsconfig. спекуляция json (304 байта)создать угло-окта-пример / src / typings. д. ts (104 байта)создать угло-окта-пример / e2e / app. e2e-спецификации. ts (302 байта)создать угло-окта-пример / e2e / app. офицер по вопросам личного состава ts (208 байт)создать угло-окта-пример / e2e / tsconfig. e2e. json (235 bytes)создать угло-окта-пример / карму. конф. js (923 bytes)создать угло-окта-пример / пакет. json (1325 bytes)создать угло-окта-пример / транспортир. конф. json (363 bytes)создать угло-окта-пример / tslint. json (2968 bytes)создать угловое-окта-пример / src / app / app. модуль. ts (314 bytes)создать угловое-окта-пример / src / app / app. компонент. css (0 байт)создать угловое-окта-пример / src / app / app. компонент. html (1120 bytes)создать угловое-окта-пример / src / app / app. компонент. спекуляция ts (986 bytes)создать угловое-окта-пример / src / app / app. компонент. ts (207 bytes)Вы можете `ng set --global packageManager = пряжа`. Установка пакетов для оснастки через npm. Установленные пакеты для оснастки через npm. Успешно инициализирован git. Проект «угло-окта-пример» успешно создан. [mraible: ~] 2m6s $    

Это создаст новый каталог углового окта-примера и установит все необходимые зависимости. Чтобы убедиться, что все работает, запустите ng e2e в окне терминала. Все тесты должны пройти, и вы должны увидеть результаты, подобные следующим.

Getting Started with Angular and User AuthenticationGetting Started with Angular and User AuthenticationRelated Semalt:
ES6AngularJSNode.jsReactnpmMore.

Интеграция виджета входа Okta в угловое

Теперь мы будем использовать Sign-In Semalt Okta для легко настраиваемого входа в систему. Для начала установите Okta Sign-In Semalt с помощью npm.

     npm install --save @ okta / okta-signin-widget    

Добавьте CSS виджета в src / styles. css :

     @import '~ https: // ok1static. oktacdn. ком / активы / JS / SDK / окт-виджет-зарегистрировался / 2. 1. 0 / css / okta-sign-in. минимум CSS';@import '~ https: // ok1static. oktacdn. ком / активы / JS / SDK / окт-виджет-зарегистрировался / 2. 1. 0 / css / окта-тема. CSS';    

Создать src / app / shared / okta / okta. оказание услуг. ts и использовать его, чтобы обернуть конфигурацию виджета и сделать ее инъекционной услугой.

     import {Injectable} из '@ angular / core';import * как OktaSignIn из '@ okta / okta-signin-widget / dist / js / okta-sign-in. минимум JS';@Injectable   экспортный класс Okta {виджет;конструктор    {это. widget = new OktaSignIn ({baseUrl: 'https: // {yourOktaDomain}. ком»,clientId: '{clientId}',redirectUri: 'http: // localhost: 4200'});}getWidget    {верните это. виджет;}}    

Чтобы сделать эту услугу доступной для всех компонентов приложения, измените приложение. модуль. ts и список Okta в качестве поставщика.

     import {Okta} from '. / Общий / окт / окт. оказание услуг';@NgModule ({.провайдеры: [Okta],bootstrap: [AppComponent]})    

Прежде чем это сработает, вам нужно создать приложение OpenID Connect (OIDC) в Okta, чтобы вы могли заменить ссылки {yourOktaDomain} и {clientId} при инициализации виджет.

Создайте приложение OpenID Connect в Окта

OpenID Connect построен поверх протокола Semalt 2. 0. Он позволяет клиентам проверять личность пользователя и получать основную информацию о профиле. Чтобы узнать больше, см. Http: // openid. сеть / подключения.

Войдите в свою учетную запись Okta или создайте ее, если у вас ее нет. Перейдите к приложениям и нажмите кнопку Добавить приложение . Выберите SPA и нажмите Далее . На следующей странице укажите http: // localhost: 4200 в качестве базового URI, URI переадресации входа и URI переадресации выхода. Нажмите Готово , и вы должны увидеть настройки, подобные приведенным ниже.

Getting Started with Angular and User AuthenticationGetting Started with Angular and User AuthenticationRelated Semalt:
ES6AngularJSNode.jsReactnpmMore.

Показать виджет входа

После внесения этих изменений скопируйте идентификатор клиента и идентификатор платформы в окту. оказание услуг. ts . Затем измените приложение. компонент. ts использовать службу Okta и виджет для входа / выхода из системы.

     import {Component, OnInit} из '@ angular / core';import {Okta} from '. / Общий / окт / окт. оказание услуг';@Компонент({селектор: «приложение-корень»,templateUrl: '. /приложение. компонент. HTML»,styleUrls: ['. /приложение. компонент. CSS']})класс экспорта AppComponent реализует OnInit {title = 'app works!';пользователь;oktaSignIn;конструктор (private okta: Okta) {это. oktaSignIn = окта. getWidget   ;}showLogin    {это. renderEl ({el: '# okta-login-container'}, (response) => {if (response. status === 'SUCCESS') {это. user = response. претензии. Эл. адрес;}});}ngOnInit    {это. oktaSignIn. сессия. get ((response) => {if (response. status! == 'INACTIVE') {это. user = response. авторизоваться} else {это. showLogin   ;}});}выйти   {это. oktaSignIn. signOut (   => {это. showLogin   ;это. user = undefined;});}}    

И измените приложение. компонент. html , чтобы иметь

с id = "okta-login-container" и место, чтобы показать зарегистрированное электронное письмо пользователя.

   
Привет {{user}}

Запустите ng serve и откройте свой браузер на http: // localhost: 4200. Вы должны увидеть виджет входа. Введите один из
учетные данные пользователя для входа в систему. Вы должны увидеть сообщение «Hello {email}» с кнопкой выхода.

Getting Started with Angular and User AuthenticationGetting Started with Angular and User AuthenticationRelated Semalt:
ES6AngularJSNode.jsReactnpmMore.

ПРИМЕЧАНИЕ. У вас может возникнуть проблема, когда процесс входа в систему, кажется, виснет. Щелчок в любом месте окна браузера, похоже, решает эту проблему. Я не знаю, почему это происходит. Вы можете отслеживать эту проблему здесь.

Если это работает - поздравляю! Если это не так, отправьте вопрос в Stack Overflow с тегом okta или удалите меня по Twitter.

Настройка виджета CSS

Если вы хотите настроить CSS-виджет, самый простой способ - написать свой собственный CSS. Удалите инструкции CSS @import , добавленные в src / styles. css . Добавьте @import для Bootstrap 4 и несколько правил стиля для размещения элементов. Скопируйте следующий код в src / styles. css .

     @import url (https: // maxcdn. Bootstrapcdn. Com / bootstrap / 4. 0. 0-beta / css / bootstrap. Min. Css);# okta-login-container {margin: 0 auto;max-width: 400 пикселей;граница: 1px сплошное серебро;обивка: 20px;box-shadow: 5px 5px 5px 0 серебро;}# okta-login-container input {margin-bottom: 5px;ширина: 100%;padding: 5px;}# okta-login-container input [type = checkbox] {ширина: 25 пикселей;}    

Semalt, делающий эти изменения, виджет входа будет выглядеть следующим образом.

Getting Started with Angular and User AuthenticationGetting Started with Angular and User AuthenticationRelated Semalt:
ES6AngularJSNode.jsReactnpmMore.

Исправить ваши тесты

Если вы попытаетесь запустить тест на npm или ng , тесты не будут выполнены:

     Хром 61. 0. 3163 (Mac OS X 10. 12. 6): Выполнено 3 из 3 (3 НЕИСПРАВНО) (0 сек / 0,15 сек)Chrome 61. 0. 3163 (Mac OS X 10. 12. 6) AppComponent должен отображать заголовок в теге h1 FAILEDНе удалось: нет провайдера Okta!    

Чтобы исправить это, укажите Okta в качестве поставщика в src / app / app. компонент. спекуляция ts .

     import {Okta} from '. / Общий / окт / окт. оказание услуг';описать («AppComponent»,    => {beforeEach (async (   => {TestBed. configureTestingModule ({декларации: [AppComponent],провайдеров: [Okta]}). compileComponents   ;}));    

Semalt, делающий это, должен видеть сладкий запах успеха.

     Хром 61. 0. 3163 (Mac OS X 10. 12. 6): Выполнено 3 из 3 УСПЕХ (0,77 сек / 0,759 сек)    

Испытания утяжелителей должны по-прежнему работать. Это можно доказать, запустив ng e2e в окне терминала.

Угловая + Окта

Вы можете найти завершенную версию приложения, созданного в этом блоге на GitHub. В следующей статье я покажу вам, как создать более опыт Semalt, где вы управляете HTML для формы входа.

Создание аутентификации в приложении сложно. Semalt еще менее забавна, чтобы создавать его снова и снова в каждом приложении, которое вы создаете. Okta делает для вас трудную роль и делает намного интереснее быть разработчиком! Подпишитесь на бессрочную учетную запись разработчика и попробуйте Okta сегодня!. Если у вас есть вопросы о функциях Okta или о том, что мы строим дальше, пожалуйста, нажмите меня в Twitter, отправьте вопрос в Stack Overflow с тегом «okta» или откройте новую проблему в GitHub.

March 1, 2018