Back to Question Center
0

Utwórz aplikację kątową z uwierzytelnianiem w 20 minut            Stwórz aplikację kątową z uwierzytelnianiem w ciągu 20 minut. APIsnpmAjaxES6jQueryMore ...

1 answers:
Stwórz aplikację kątową z uwierzytelnianiem w 20 minut

Artykuł został pierwotnie opublikowany na blogu OKTA dla programistów. Dziękujemy za wsparcie dla partnerów, którzy umożliwiają SitePoint.

Angular (dawniej Angular 2. 0) szybko staje się jednym z najpotężniejszych sposobów na zbudowanie nowoczesnej, jednostronicowej aplikacji. Główną siłą jest Semalt skupiając się na budowaniu komponentów wielokrotnego użytku, które pomagają w rozłączeniu różnych problemów w aplikacji. Weźmy na przykład uwierzytelnianie: kompilacja może być bolesna, ale po zawinięciu w komponent, logika uwierzytelniania może być ponownie wykorzystana w całej aplikacji - spring races headpieces bridal.

Semalt CLI ułatwia rusztowanie nowych komponentów, a nawet całych projektów. Jeśli nie używałeś Semali CLI, aby szybko wygenerować kod Semalala, czeka Cię przyjemność!

W tym przykładzie zbudujesz prostą aplikację internetową z Angular CLI, narzędziem do rozwoju Angular. Semalt tworzy aplikację z funkcjami wyszukiwania i edycji, a następnie dodaje uwierzytelnianie.

Utwórz aplikację kątową

WSKAZÓWKA: Jeśli chcesz pominąć tworzenie aplikacji Angular i uzyskać prawo do dodawania uwierzytelnienia, możesz sklonować mój projekt ng-demo , a następnie przejść do aplikacji Utwórz aplikację OpenID Connect w sekcji Okta.

   git clone https: // github. com / mraible / ng-demo. git    

Co jest potrzebne

  • Około 20 minut
  • Ulubiony edytor tekstu lub IDE. Polecam IntelliJ IDEA
  • Węzeł. Zainstalowano js i npm. Polecam używanie nvm
  • Zainstalowano kątowe CLI. Jeśli nie masz zainstalowanego Angularnego interfejsu CLI, zainstaluj go za pomocą npm install -g @ angle / cli

Utwórz nowy projekt za pomocą polecenia ng nowy :

   ng nowe demo    

Spowoduje to utworzenie projektu ng-demo i uruchomienia instalacji npm . Jego ukończenie zajmie około minuty, ale może się różnić w zależności od szybkości połączenia.

   [mraible: ~ / dev] $ ng new ng-demoinstalowanie ngStwórz. editorconfigutwórz README. mdutwórz src / app / app. składnik. cssutwórz src / app / app. składnik. htmlutwórz src / app / app. składnik. spec. tsutwórz src / app / app. składnik. tsutwórz src / app / app. moduł. tsutwórz src / assets /. gitkeeputwórz src / environments / environment. szturchać. tsutwórz src / environments / environment. tsutwórz src / favicon. i coutwórz src / index. htmlutwórz src / main. tsutwórz src / polyfills. tsutwórz src / styles. cssutwórz src / test. tsutwórz src / tsconfig. aplikacja. jsonutwórz src / tsconfig. spec. jsonutwórz src / typings. re. tsStwórz. kątowy-cli. jsonutwórz e2e / aplikację. e2e-spec. tsutwórz e2e / aplikację. po. tsutwórz e2e / tsconfig. e2e. jsonStwórz. gitignorestwórz karmę. conf. jsutwórz pakiet. jsonutwórz kątomierz. conf. jsutwórz tsconfig. jsonUtwórz tslint. jsonPomyślnie zainicjowano git. Instalowanie pakietów do oprzyrządowania za pomocą npm. Zainstalowane pakiety do oprzyrządowania za pomocą npm. Możesz ustawić `ng set --global packageManager = yarn`. Projekt "ng-demo" został pomyślnie utworzony. [mraible: ~] 46s $    

Możesz zobaczyć, w jakiej wersji Angular CLI używasz ng --version .

   $ ng --version_ _ ____ _ ___/ \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ |/ △ \ | "_ \ / _` | | | | | / _` | "__ | | | | | | |/ ___ \ | | | | (_ | | | _ | | | (_ | | | | | ___ | | ___ | |/ _ / \ _ \ _ | | _ | \ __, | \ __, _ | _ | \ __, _ | _ | \ ____ | _____ | ___ || ___ /@ angle / cli: 1. 3. 2węzeł: 8. 4. 0os: darwin x64    

Uruchom swoją aplikację kątową

Projekt jest skonfigurowany za pomocą serwera deweloperskiego Webpack.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Możesz upewnić się, że testy nowego projektu zdały egzamin :

   $ ng test Chrome 60. 0. 3112 (Mac OS X 10. 12. 6): Wykonano 3 z 3 SUCCESS (0. 239 secs / 0. 213 secs)    

Dodaj funkcję wyszukiwania

Aby dodać funkcję wyszukiwania, otwórz projekt w IDE lub ulubionym edytorze tekstu. W przypadku IntelliJ IDEA, użyj Plik> Nowy projekt> Statyczna sieć i wskaż katalog ng-demo .

W oknie terminalu przejdź do katalogu projektu i uruchom następującą komendę. Spowoduje to utworzenie składnika wyszukiwania.

   $ ng g Wyszukiwanie składnikówinstalowanie komponentuutwórz src / app / search / search. składnik. cssutwórz src / app / search / search. składnik. htmlutwórz src / app / search / search. składnik. spec. tsutwórz src / app / search / search. składnik. tszaktualizuj src / app / app. moduł. ts    

Otwórz src / app / search / search. składnik. html i zamień domyślny kod HTML na następujący:

   

Szukaj

">

Dokumentacja routera dla Angular zawiera informacje potrzebne do ustawienia trasy do wygenerowanego właśnie składnika SearchComponent . Oto krótkie podsumowanie:

In src / app / app. moduł. ts , dodaj stałą appRoutes i zaimportuj ją do @NgModule :

     importuj {Routes, RouterModule} z '@ angle / router';const appRoutes: Routes = [{ścieżka: "szukaj", składnik: SearchComponent},{path: '', redirectTo: '/ search', pathMatch: 'full'}];@NgModule ({.Import: [.RouterModule. ForRoot (appRoutes)] })moduł wyeksportowania AppModule {}    

In src / app / app. składnik. html , dostosuj zawartość symbolu zastępczego i dodaj znacznik , aby wyświetlić trasy.

   

Witaj w {{title}}!

Po skonfigurowaniu routingu możesz kontynuować pisanie funkcji wyszukiwania.

Jeśli nadal masz ng serve , twoja przeglądarka powinna odświeżyć się automatycznie. Jeśli nie, przejdź do http: // localhost: 4200. Najprawdopodobniej zobaczysz pusty ekran. Otwórz konsolę JavaScript, a zobaczysz problem.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Aby rozwiązać ten problem, otwórz src / app / app. moduł. ts i dodaj FormsModule jako import w @NgModule :

     importuj {FormsModule} z '@ angleular / forms';@NgModule ({.Import: [.FormsModule] })moduł wyeksportowania AppModule {}    

Teraz powinieneś zobaczyć formularz wyszukiwania.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Jeśli chcesz dodać CSS do tych komponentów, otwórz src / app / search / search. składnik. css i dodaj trochę CSS. Na przykład:

  : host {Blok wyświetlacza;dopełnienie: 0 20px;}    

W tej sekcji pokazano, jak wygenerować nowy komponent do podstawowej aplikacji kątowej z Angularnym interfejsem CLI. W następnej sekcji pokażemy, jak utworzyć i użyć pliku JSON i localStorage w celu utworzenia fałszywego API.

Aby uzyskać wyniki wyszukiwania, utwórz SearchService , która wysyła żądania HTTP do pliku JSON. Zacznij od wygenerowania nowej usługi.

   $ ng g Wyszukiwanie usługiinstalacja usługiutwórz src / app / search. usługa. spec. tsutwórz src / app / search. usługa. tsOSTRZEŻENIE Serwis jest generowany, ale nie jest dostarczany, musi być zapewniony do użycia    

Przenieś wygenerowane wyszukiwanie. usługa. ts i jego test do app / shared / search . Musisz utworzyć ten katalog.

   mkdir -p src / app / shared / searchmv src / app / search. usługa. * src / app / shared / search /.     

Utwórz src / assets / data / people. json do przechowywania danych. usługa. ts i zapewniają Http jako zależność w jego konstruktorze. W tym samym pliku utwórz metodę getAll , aby zebrać wszystkie osoby. Określ również klasy Adres i Osoby , do których JSON będzie kierowany.

     import {Injectable} from '@ angle / core';import {Http, Response} from '@ kątowy / http';importuj "rxjs / add / operator / map";@Injectable   klasa eksportu SearchService {konstruktor (prywatny http: Http) {}getAll    {zwróć to. http. get ("assets / data / people. json"). map ((res: Response) => res. json   );}}klasa eksportu Adres {ulica: ciąg;miasto: ciąg;stan: ciąg;zip: string;constructor (obj ?: any) {to. street = obj && obj. ulica || zero;to. city ​​= obj && obj. miasto || zero;to. state = obj && obj. stan || zero;to. zip = obj && obj. zip || zero;}}klasa eksportu Person {numer identyfikacyjny;name: string;telefon: ciąg;adres Adres;constructor (obj ?: any) {to. id = obj && Numer (obj. id) || zero;to. name = obj && obj. imię || zero;to. phone = obj && obj. telefon || zero;to. address = obj && obj. adres || zero;}}    

Aby udostępnić te klasy do spożycia przez komponenty, edytuj src / app / shared / index. ts i dodać następujące informacje:

     wywóz * z ". /Szukaj Szukaj. usługa';    

Powodem utworzenia tego pliku jest możliwość importowania wielu klas w jednym wierszu, bez konieczności importowania poszczególnych klas w oddzielnych wierszach.

W src / app / search / search. składnik. ts , dodaj import dla tych klas.

     zaimportuj {Person, SearchService} z '. / shared ";    

Możesz teraz dodać zapytania i zmienne searchResults . Kiedy tam jesteś, zmodyfikuj konstruktor, aby wprowadzić SearchService .

     klasa eksportu SearchComponent implementuje OnInit {zapytanie: string;searchResults: Array ;konstruktor (private searchService: SearchService) {}    

Następnie zaimplementuj metodę search , aby wywołać metodę service getAll .

     search   : void {to. searchService. getAll   . subskrybować(data => {this. searchResults = data; },błąd => konsola. log (błąd));}    

W tym momencie prawdopodobnie zobaczysz następujący komunikat w konsoli przeglądarki.

     ORYGINALNY WYJĄTEK: Brak dostawcy usługi SearchService!    

Aby naprawić błąd "Brak dostawcy" z góry, zaktualizuj aplikację . moduł. ts , aby zaimportować SearchService i dodać usługę do listy dostawców. Ponieważ SearchService zależy od Http , musisz również zaimportować HttpModule .

     importuj {SearchService} from '. / shared ";importuj {HttpModule} z '@ kątowego / http';@NgModule ({.Import: [.HttpModule],Dostawcy: [SearchService],bootstrap: [AppComponent]})    

Teraz kliknięcie przycisku wyszukiwania powinno zadziałać. Aby wyniki wyglądały lepiej, usuń znacznik

     i zastąp go      w    src / app / search / search. składnik. html   .  

   
Nazwa Telefon Adres
{{person. nazwa}} {{person. phone}} {{person. adres. street}}
{{osoba. adres. city}}, {{person. adres. stan}} {{person. adres. zamek błyskawiczny}}

Następnie dodaj kilka dodatkowych CSS w src / app / search / search. składnik. css , aby poprawić układ tabeli.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Ale czekaj, wciąż nie masz funkcji wyszukiwania! Aby dodać funkcję wyszukiwania, dodaj metodę search do SearchService .

     import {Observable} z 'rxjs';search (q: string): Observable  {if (! q || q === '*') {q = "";} else {q = q. toLowerCase   ;}zwróć to. getAll   . map (dane => dane, filtr (pozycja => JSON, stringify (element) .toLowerCase   . zawiera (q)));}    

Następnie refactor SearchComponent wywołuje tę metodę za pomocą jej zmiennej zapytania .

     search   : void {to. searchService. szukaj (to zapytanie). subskrybować(data => {this. searchResults = data; },błąd => konsola. log (błąd));}    

Teraz wyniki wyszukiwania będą filtrowane według wprowadzonej wartości zapytania.

W tej sekcji pokazano, jak pobrać i wyświetlić wyniki wyszukiwania. Następna sekcja opiera się na tym i pokazuje, jak edytować i zapisywać rekord.

Dodaj funkcję edycji

Modyfikuj src / app / search / search. składnik. html , aby dodać link do edycji osoby.

   
{{person. nazwa}}

Uruchom następujące polecenie, aby wygenerować EditComponent .

   $ ng g edycja komponentówinstalowanie komponentuutwórz src / app / edit / edit. składnik. cssutwórz src / app / edit / edit. składnik. htmlutwórz src / app / edit / edit. składnik. spec. tsutwórz src / app / edit / edit. składnik. tszaktualizuj src / app / app. moduł. ts    

Dodaj trasę dla tego komponentu w src / app / app. moduł. ts :

     const appRoutes: Routes = [{ścieżka: "szukaj", składnik: SearchComponent},{ścieżka: 'edit /: id', component: EditComponent},{path: '', redirectTo: '/ search', pathMatch: 'full'}];    

Aktualizacja src / app / edit / edit. składnik. html , aby wyświetlić formularz do edycji. Możesz zauważyć, że dodałem identyfikatory do większości elementów. Ma to na celu ułatwienie pisania testów integracji z Kątnikiem.

   

{{editName}}

Adres:
, " id = "zapisz"> zapisz " id = "anuluj"> Anuluj

Zmodyfikuj EditComponent , aby zaimportować model i klasy usług oraz użyć SearchService , aby uzyskać dane.

     importuj {Komponent, OnInit, OnDestroy} z '@ angle / core';import {adres, osoba, usługa wyszukiwania} z ". / shared ";importuj {Subscription} z 'rxjs';importuj {ActivatedRoute, Router} z '@ angle / router';@Składnik({selektor: "app-edit",templateUrl: ". /edytować. składnik. html ",styleUrls: [. /edytować. składnik. css "]})klasa eksportu EditComponent implementuje OnInit, OnDestroy {osoba: Osoba;editName: string;editPhone: string;editAddress: Address;sub: Subskrypcja;konstruktor (trasa prywatna: ActivatedRoute,prywatny router: Router,usługa prywatna: SearchService) {}ngOnInit    {to. sub = this. trasa. params. subscribe (params => {const id = + params ['id']; // (+) konwertuje ciąg 'id' na liczbęto. usługa. get (id). subskrybuj (osoba => {if (person) {to. editName = person. Nazwa;to. editPhone = person. editAddress = person. adres;to. osoba = osoba;} else {to. gotoList   ;}});});}ngOnDestroy    {to. pod. unsubscribe   ;}Anuluj   {to. router. nawiguj (['/ search']);}zapisać   {to. osoba. name = this. Edytuj imię;to. osoba. phone = this. editPhone;to. osoba. address = this. Edytuj adres;to. usługa. zapisz (ta osoba);to. gotoList   ;}gotoList    {jeśli (ta osoba) {to. router. nawiguj (['/ search', {term: this. person. name}]);} else {to. router. nawiguj (['/ search']);}}}    

Zmodyfikuj SearchService , aby zawierała funkcje wyszukiwania osoby według ich id i zapisywania. Kiedy już tam jesteś, zmodyfikuj metodę search , aby mieć świadomość zaktualizowanych obiektów w localStorage .

     search (q: string): Observable  {if (! q || q === '*') {q = "";} else {q = q. toLowerCase   ;}zwróć to. getAll   . map (data => {const results: any = [];dane. map (item => {// sprawdź pozycję w localStorageif (localStorage ['person' + item. id]) {item = JSON. parsować (localStorage ['person' + item. id]);}jeśli (JSON, stringify (element) .toLowerCase   . zawiera (q)) {wyniki. push (element);}});zwróć wyniki;});}get (id: number) {zwróć to. getAll   . map (all => {if (localStorage ['person' + id]) {zwróć JSON. parsować (localStorage ["person" + id]);}zwróć wszystko. find (e => e. id === id);});}zapisz (osoba: osoba) {localStorage ["osoba" + osoba. id] = JSON. stringify (osoba);}    

Możesz dodać CSS do src / app / edit / edit. składnik. css jeśli chcesz, aby wyglądał trochę lepiej.

  : host {Blok wyświetlacza;dopełnienie: 0 20px;}przycisk {margin-top: 10px;}    

W tym momencie powinieneś być w stanie wyszukać osobę i zaktualizować jej informacje.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

w src / app / edit / edit. składnik. html wywołuje funkcję save , aby zaktualizować dane danej osoby. Już to zaimplementowałeś powyżej.
Funkcja wywołuje funkcję gotoList , która dołącza nazwisko osoby do adresu URL podczas wysyłania użytkownika z powrotem na ekran wyszukiwania.

     gotoList    {jeśli (ta osoba) {to. router. nawiguj (['/ search', {term: this. person. name}]);} else {to. router. nawiguj (['/ search']);}}    

Ponieważ SearchComponent nie wykonuje wyszukiwania automatycznie po uruchomieniu tego adresu URL, dodaj następującą logikę, aby zrobić to w swoim konstruktorze.

     importuj {ActivatedRoute} z '@ angle / router';importuj {Subscription} z 'rxjs' ; sub: Subskrypcja;constructor (private searchService: SearchService, private route: ActivatedRoute) {to. sub = this. trasa. params. subscribe (params => {if (params ['term']) {to. query = decodeURIComponent (parametry ['term']);to. Szukaj  ;}});}    

Będziesz chciał zaimplementować OnDestroy i zdefiniować metodę ngOnDestroy , aby oczyścić tę subskrypcję.

     importuj {Komponent, OnInit, OnDestroy} z '@ angle / core';klasa eksportu SearchComponent implementuje OnInit, OnDestroy { ngOnDestroy    {to. pod. unsubscribe   ;}}    

Semalt dokonując wszystkich tych zmian, powinieneś być w stanie wyszukiwać / edytować / aktualizować dane osoby. Jeśli to działa - dobra robota!

Walidacja formularza

Jedną z rzeczy, które możesz zauważyć jest to, że możesz wyczyścić dowolny element wejściowy w formularzu i go zapisać. Przynajmniej powinno być wymagane pole nazwy . W przeciwnym razie nic nie zostanie kliknięte w wynikach wyszukiwania.

Aby wprowadzić nazwę, zmodyfikuj edycję. składnik. html , aby dodać wymagany atrybut do nazwy . Dodaj za znacznikiem

i zamknij go przed ostatnim . Będziesz także musiał dodać do formularza obsługę (ngSubmit) i zmienić przycisk zapisu, aby był zwykłym przyciskiem przesyłania.

   

{{editName}}

" ngNativeValidate>

Po wprowadzeniu tych zmian wymagane będzie pole z atrybutem wymagany .

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Na tym zrzucie ekranu możesz zauważyć, że pola adresu są puste. Jest to wyjaśnione przez błąd w konsoli.

     Jeśli ngModel jest używany wewnątrz znacznika formularza, musi być ustawiony atrybut name lub formularzkontrola musi być zdefiniowana jako "standalone" w module ngModelOptions. Przykład 1: Przykład 2:     

Aby naprawić, dodaj atrybut nazwy do wszystkich pól adresu. Na przykład:

    
,

Teraz wartości powinny być wyświetlane we wszystkich polach i nazwa powinna być wymagana.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Jeśli chcesz podać własne komunikaty sprawdzania poprawności, zamiast polegać na przeglądarce, wykonaj następujące kroki:

  1. Usuń ngNativeValidate i dodaj # editForm = "ngForm" do elementu .
  2. Dodaj # name = "ngModel" do elementu .
  3. Add [disabled] = "! EditForm. Formularz. Valid" do Zapisz .
  4. Dodaj następujące dane w polu name , aby wyświetlić błąd sprawdzania poprawności.
   
imie jest wymagane

Aby uzyskać więcej informacji na temat formularzy i sprawdzania poprawności, zobacz dokumentację Semalala.

Utwórz aplikację OpenID Connect w Okta

OpenID Connect (OIDC) jest zbudowany na protokole Semalt 2. 0. Umożliwia klientom weryfikację tożsamości użytkownika, a także uzyskanie podstawowych informacji o profilu. Aby dowiedzieć się więcej, zobacz https: // openid. net / connect.

Aby zintegrować Okta w celu uwierzytelnienia użytkownika, musisz najpierw zarejestrować się i utworzyć aplikację OIDC.

Zaloguj się na swoje konto Okta lub utwórz konto, jeśli go nie masz. Przejdź do aplikacji i kliknij przycisk Dodaj aplikację . Wybierz SPA i kliknij Dalej . Na następnej stronie określ http: // localhost: 4200 jako podstawowy identyfikator URI, identyfikator URI przekierowania logowania i identyfikator przekierowania URI. Kliknij Gotowe , a zobaczysz ustawienia podobne do poniższych.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Zainstaluj projekt Manfreda Steyera, aby dodać obsługę OAuth 2 i OpenID Semalt przy użyciu npm.

   npm install --save angle-oauth2-oidc    

Modyfikuj src / app / app. składnik. ts do zaimportowania OAuthService i skonfiguruj swoją aplikację tak, aby korzystała z ustawień aplikacji Okta.

     zaimportuj {OAuthService, JwksValidationHandler} z "angle-oauth2-oidc" ; constructor (private oauthService: OAuthService) {to. oauthService. redirectUri = okno. Lokalizacja. pochodzenie;to. oauthService. clientId = '{client-id}';to. oauthService. scope = "adres e-mail profilu otwartego";to. oauthService. issuer = 'https: // dev- {dev-id}. oktapreview. com ";to. oauthService. tokenValidationHandler = new JwksValidationHandler   ;// Załaduj dokument odnajdowania, a następnie spróbuj zalogować się do użytkownikato. oauthService. loadDiscoveryDocument   . oauthService. tryLogin   ;});}     

Utwórz src / app / home / home. składnik. ts i skonfiguruj go tak, aby miał przyciski logowania i wylogowania .

     importuj {Komponent} z '@ kątowego / rdzenia';importuj {OAuthService} z "angle-oauth2-oidc";@Składnik({szablon: `

Witamy, {{givenName}}!

"> Wyloguj

Wyszukiwanie

"> Login
"})klasa eksportu HomeComponent {constructor (private oauthService: OAuthService) {}Zaloguj Się {to. oauthService. initImplicitFlow ;}Wyloguj {to. oauthService. Wyloguj ;}get givenName {const claim = this. oauthService. getIdentityClaims ;if (! claim) {return null;}roszczenia zwrotne ["nazwa"];}}

Utwórz src / app / shared / auth / auth. strzec. usługa. ts , aby przejść do HomeComponent , jeśli użytkownik nie jest uwierzytelniony.

     import {Injectable} from '@ angle / core';importuj {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} z '@ kątowego / routera';importuj {OAuthService} z "angle-oauth2-oidc";@Injectable   klasa eksportu AuthGuard implementuje CanActivate {constructor (private oauthService: OAuthService, prywatny router: Router) {}canActivate (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {if (this. oauthService. hasValidIdToken   ) {return true;}to. router. nawiguj (['/ home']);return false;}}    

Eksport AuthGuard w src / shared / index. ts :

     wywóz * z ". / auth / auth. strzec. usługa';    

Zaimportuj moduł OAuthModule do src / app / app. moduł. ts , skonfiguruj nowy HomeComponent i zablokuj trasy / search i / edit w dół za pomocą AuthGuard .

     zaimportuj {OAuthModule} z "angle-oauth2-oidc";importuj {HomeComponent} z '. /Dom dom. składnik';importuj {SearchService, AuthGuard} z '. / shared ";const appRoutes: Routes = [{ścieżka: "szukaj", składnik: SearchComponent, canActivate: [AuthGuard]},{ścieżka: "edit /: id", element: EditComponent, canActivate: [AuthGuard]},{ścieżka: "home", element: HomeComponent},{ścieżka: '', redirectTo: "home", pathMatch: 'full'},{ścieżka: "**", przekierowanie: "dom"}];@NgModule ({deklaracje: [ HomeComponent],import: [ OAuthModule. forRoot   ],Dostawcy: [AuthGuard,SearchService],bootstrap: [AppComponent]})moduł wyeksportowania AppModule {}    

Po wprowadzeniu tych zmian powinieneś być w stanie uruchomić ng serve i zobaczyć przycisk logowania.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Kliknij przycisk Logowanie i zaloguj się do jednej z osób skonfigurowanych w aplikacji Okta.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Po zalogowaniu się będziesz mógł kliknąć Szukaj i zobaczyć informacje o ludziach.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Jeśli to działa - świetnie! Jeśli chcesz utworzyć własny formularz logowania w swojej aplikacji, kontynuuj czytanie, aby dowiedzieć się, jak korzystać z Okta Auth SDK z OAuthService .

Uwierzytelnianie za pomocą zestawu Okta Auth SDK

Zestaw Okta Auth SDK jest oparty na interfejsie API uwierzytelniania Otka i interfejsie API OAuth 2. 0, umożliwiając utworzenie w pełni oznakowanego środowiska logowania przy użyciu JavaScript.

Semalt it using npm:

   npm install @ okta / okta-auth-js --save    

Dodaj odwołanie do głównego pliku JavaScript tej biblioteki w . kątowy-cli. json :

   "skrypty": ["/ node_modules / @ okta / okta-auth-js / dist / okta-auth-js. min. Zainstaluj Semalt 4.  

   npm install bootstrap @ 4. 0. 0-beta - zapis    

Modyfikuj src / styles. css , aby dodać odniesienie do pliku CSS Bootstrapa.

   @import "~ bootstrap / dist / css / bootstrap. Css";    

Aktualizacja src / app / app. składnik. html do korzystania z klas Bootstrap dla swojego navbara i systemu gridowego.

   

Utwórz src / app / shared / auth / okta. auth. obwoluta. ts , aby owinąć Okta Auth SDK i zintegrować go z OAuthService . Metoda login używa OktaAuth , aby uzyskać token sesji i wymienić go na token ID i dostęp.

     zaimportuj {OAuthService} z "angle-oauth2-oidc";import {Injectable} from '@ angle / core';zadeklaruj const OktaAuth: any;@Injectable   klasa eksportu OktaAuthWrapper {private authClient: any;constructor (private oauthService: OAuthService) {to. authClient = new OktaAuth ({URL: to. oauthService. emitent});}login (nazwa użytkownika: ciąg znaków, hasło: ciąg): Obietnica    {zwróć to. oauthService. createAndSaveNonce   . then (nonce => {zwróć to. authClient. Zaloguj({nazwa użytkownika: nazwa użytkownika,hasło: hasło}). then ((odpowiedź) => {if (status odpowiedzi === 'SUKCES') {zwróć to. authClient. znak. getWithoutPrompt ({clientId: this. oauthService. Identyfikator klienta,responseType: ['id_token', 'token'],zakresy: ['openid', 'profile', 'email'],sessionToken: odpowiedź. sessionToken,nonce: nonce,redirectUri: okno. Lokalizacja. pochodzenie}). then ((tokeny) => {const idToken = tokeny [0]. idToken;const accessToken = tokeny [1]. accessToken;const keyValuePair = `#id_token = $ {encodeURIComponent (idToken)} & access_token = $ {encodeURIComponent (accessToken)}`;zwróć to. oauthService. tryLogin ({ <1> customHashFragment: keyValuePair,disableOAuth2StateCheck: true});});} else {wróć obietnicę. reject ("Nie możemy obsłużyć" + odpowiedź. status + "status");}});});}}    

W powyższym kodzie oauthService. tryLogin analizuje i przechowuje idToken i accessToken , aby można je było pobrać za pomocą OAuthService. getIdToken i OAuthService. getAccessToken .

Eksport OktaAuthWrapper in src / shared / index. ts :

     wywóz * z ". / auth / okta. auth. obwoluta';    

Dodaj OktaAuthWrapper jako dostawcę w aplikacji . moduł. ts .

     importuj {SearchService, AuthGuard, OktaAuthWrapper} z '. / shared ";@NgModule ({.Dostawców: [.OktaAuthWrapper],bootstrap: [AppComponent]})    

Zmień HomeComponent , aby zadeklarować OktaAuth i zmodyfikować jego szablon , tak aby miał przycisk do zalogowania, a także formularz logowania.

"})

Po wprowadzeniu tych zmian, HomeComponent powinien renderować się w następujący sposób.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Dodaj zmienne lokalne dla pól nazwy użytkownika i hasła, importuj OktaAuthWrapper i implementuj metodę loginWithPassword w HomeComponent .

     zaimportuj {OktaAuthWrapper} z '. / shared "; Nazwa Użytkownika;hasło;konstruktor (private oauthService: OAuthService,private oktaAuthWrapper: OktaAuthWrapper) {}loginWithPassword    {to. oktaAuthWrapper. zaloguj się (to nazwa użytkownika, to hasło). następnie (_ => konsola. debug ("zalogowany")). catch (err => błąd konsoli ("logowanie błędów", err));}    

Powinieneś być w stanie zalogować się przy użyciu formularza, korzystając z jednego z zarejestrowanych użytkowników aplikacji. Po zalogowaniu się będziesz mógł kliknąć link Szukaj i zobaczyć informacje o ludziach.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Kątowe + Okta

Jeśli wszystko działa - gratulacje! Jeśli napotkasz problemy, opublikuj pytanie w Stack Overflow za pomocą tagu okta lub kliknij mnie w Semalt @mraible.

Możesz znaleźć pełną wersję aplikacji utworzonej w tym poście na blogu GitHub. Aby dowiedzieć się więcej na temat bezpieczeństwa w Angular, zobacz dokumentację bezpieczeństwa Angular. Jeśli chcesz dowiedzieć się więcej o usłudze OpenID Connect, Semalt zaleca obejrzenie poniżającego filmu wideo.

March 1, 2018