Back to Question Center
0

Skapa en vinkelapp med autentisering på 20 minuter            Skapa en vinkelapp med autentisering på 20 minuterRelaterad Semalt: APIsnpmAjaxES6jQueryMore ...

1 answers:
Skapa en vinkelapp med autentisering på 20 minuter

Denna artikel publicerades ursprungligen på OKTA Developer Blog. Tack för att du stödjer de partner som gör SitePoint möjligt.

Angular (tidigare kallad Angular 2. 0) blir snabbt ett av de mest kraftfulla sätten att bygga en modern enkelsidig app. En kärnstyrka är Semalt fokus på att bygga återanvändbara komponenter, vilket hjälper dig att koppla bort de olika problemen i din ansökan. Ta autentisering, till exempel: Det kan vara smärtsamt att bygga, men när du först har det i en komponent kan autentiseringslogiken återanvändas i hela din ansökan - tappeto da esterno di qualitã .

Semalt CLI gör det enkelt att bygga nya komponenter och till och med hela projekt. Om du inte har använt Semalt CLI för att snabbt generera Semalt-kod, är du ute efter en behandling!

I det här exemplet ska du bygga en enkel webbapplikation med Angular CLI, ett verktyg för Angular Development. Semalt skapa en applikation med sök och redigera funktioner och lägg sedan till autentisering.

Skapa en vinkelapplikation

TIPS: Om du skulle vilja hoppa över att bygga Angular-applikationen och få rätt att lägga till autentisering kan du klona mitt projekt ng-demo och hoppa sedan till Skapa en OpenID Connect App i Okta sektionen.

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

Vad du behöver

  • Ca 20 minuter
  • En favorit textredigerare eller IDE. Jag rekommenderar IntelliJ IDEA
  • Nod. js och npm installerade. Jag rekommenderar att du använder nvm
  • Vinkel CLI installerad. Om du inte har Angular CLI installerad, installera den med npm install -g @ vinkel / cli

Skapa ett nytt projekt med kommandot ng nytt :

   ng ny ng-demo    

Detta kommer att skapa ett ng-demo projekt och köra npm installera i det. Det tar ungefär en minut att slutföra, men det kan variera beroende på din anslutningshastighet.

   [mraible: ~ / dev] $ ng ny ng-demoinstallera ngskapa. editorconfigskapa README. mdskapa src / app / app. komponent. cssskapa src / app / app. komponent. htmlskapa src / app / app. komponent. spec. tsskapa src / app / app. komponent. tsskapa src / app / app. modul. tsskapa src / tillgångar /. gitkeepskapa src / miljöer / miljö. prod. tsskapa src / miljöer / miljö. tsskapa src / favicon. icoskapa src / index. htmlskapa src / main. tsskapa src / polypyfills. tsskapa src / stilar. cssskapa src / test. tsskapa src / tsconfig. app. jsonskapa src / tsconfig. spec. jsonskapa src / typings. d. tsskapa. vinkel-cli. jsonskapa e2e / app. E2E-spec. tsskapa e2e / app. po. tsskapa e2e / tsconfig. E2E. jsonskapa. gitignoreskapa karma. conf. jsskapa paket. jsonskapa protractor. conf. jsskapa tsconfig. jsonskapa tslint. jsonFramgångsrikt initierad git. Installera paket för verktyg via npm. Installerade paket för verktyg via npm. Du kan `ng sätta - global packageManager = garn`. Projekt 'ng-demo' med framgång. [mraible: ~] 46s $    

Du kan se vilken version av Angular CLI du använder med ng --version .

   $ ng --version_ _ ____ _ ___/ \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ |/ △ \ | '_ \ / _` | | | | | / _` | '__ | | | | | | |/ ___ \ | | | | (_ | | _ _ | | (_ | | | | | _ | | ___ |./ _ / \ _ \ _ | | _ | \ __, | \ __, _ | _ | \ __, _ | _ | \ ____ | _____ | ___ || ___ /@ vinkel / cli: 1. 3 2nod: 8. 4. 0os: darwin x64    

Kör din vinkelapplikation

Projektet är konfigurerat med webpack dev-server.

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

Du kan se till att ditt nya projekt test passerar, kör ng test :

   $ ng test Chrome 60. 0. 3112 (Mac OS X 10. 12. 6): Executed 3 of 3 SUCCESS (0. 239 sek / 0. 213 sek)    

Lägg till en sökfunktion

För att lägga till en sökfunktion, öppna projektet i en IDE eller din favorit textredigerare. För IntelliJ IDEA, använd Arkiv> Nytt projekt> Statisk webb och peka på katalogen ng-demo .

I ett terminalfönster, cd in i projektets katalog och kör följande kommando. Detta skapar en sökkomponent.

   $ ng g komponentsökninginstallerar komponentskapa src / app / search / search. komponent. cssskapa src / app / search / search. komponent. htmlskapa src / app / search / search. komponent. spec. tsskapa src / app / search / search. komponent. tsuppdatera src / app / app. modul. ts    

Öppna src / app / search / search. komponent. html och ersätt dess standard HTML med följande:

   

Sök

">

Ruterdokumentationen för Angular tillhandahåller den information du behöver för att konfigurera en rutt till SearchComponent som du just skapat. Här är en snabb sammanfattning:

I src / app / app. modul. ts , lägg till en appRoutes konstant och importera den i @NgModule :

     importera {Rutter, RouterModule} från '@ vinkel / router';const appRoutes: Rutter = [{sökväg: "sök", komponent: SearchComponent},{path: '', omdirigeringTo: '/ sök', pathMatch: 'full'}];@NgModule ({.import: [.RouterModule. ForRoot (appRoutes)] })exportklass AppModule {}    

I src / app / app. komponent. html , justera platshållarens innehåll och lägg till en tagg för att visa rutter.

   

Välkommen till {{title}}!

Nu när du har routing setup kan du fortsätta skriva sökfunktionen.

Om du fortfarande har ng tjäna körs, bör din webbläsare uppdateras automatiskt. Om inte, navigera till http: // localhost: 4200. Du kommer sannolikt att se en tom skärm. Öppna JavaScript-konsolen och du får se problemet.

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

För att lösa detta, öppna src / app / app. modul. ts och lägg till FormsModule som en import i @NgModule :

     Importera {FormsModule} från '@ vinkel / former';@NgModule ({.import: [.FormsModule] })exportklass AppModule {}    

Nu ska du se sökformuläret.

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

Om du vill lägga till CSS för dessa komponenter, öppna src / app / search / search. komponent. css och lägg till lite CSS. Till exempel:

  : värd {display: block;vaddering: 0 20px;}    

I det här avsnittet har du visat hur du genererar en ny komponent till en grundläggande vinkelapplikation med Angular CLI. I nästa avsnitt visas hur du skapar och använder en JSON-fil och localStorage för att skapa en falsk API.

För att få sökresultat, skapa en SearchService som gör HTTP-förfrågningar till en JSON-fil. Börja med att generera en ny tjänst.

   $ ng g service sökninginstallera serviceskapa src / app / search. service. spec. tsskapa src / app / search. service. tsVARNING Service genereras men inte tillhandahållen, den måste tillhandahållas för att användas    

Flytta den genererade sökningen . service. ts och dess test till app / shared / search . Du måste skapa den här katalogen.

   mkdir -p src / app / shared / searchmv src / app / search. service. * src / app / shared / search /.     

Skapa src / tillgångar / data / personer. json för att hålla dina data. service. ts och tillhandahålla Http som ett beroende i sin konstruktör. I samma fil skapar du en getAll metod för att samla alla människor. Definiera också Adress och Person klasser som JSON kommer att marshalleras till.

     import {Injectable} från '@ vinkel / kärna';importera {Http, Response} från '@ vinkel / http';importera 'rxjs / add / operator / map';@Injectable   exportklass SearchService {konstruktör (privat http: Http) {}få alla   {returnera detta. http. få ("tillgångar / data / personer. json"). karta ((res: Response) => res. json   );}}exportklass Adress {gata: sträng;stad: sträng;tillstånd: sträng;zip: string;konstruktör (obj ?: någon) {detta. gata = obj && obj. gata || null;detta. city ​​= obj && obj. stad || null;detta. state = obj && obj. state || null;detta. zip = obj && obj. zip || null;}}exportklass Person {id nummer;namn: sträng;telefon: sträng;adress: Adresskonstruktör (obj ?: någon) {detta. id = obj && Nummer (obj. id) || null;detta. namn = obj && obj. namn || null;detta. telefon = obj && obj. telefon || null;detta. adress = obj && obj. adress || null;}}    

För att göra dessa klasser tillgängliga för konsumtion av dina komponenter, redigera src / app / shared / index. ts och lägg till följande:

     export * från ". / Sök / sökning. service';    

Anledningen till att du skapar den här filen är att du kan importera flera klasser på en enda rad istället för att behöva importera varje enskild klass på separata rader.

I src / app / search / search. komponent. ts , lägg till import för dessa klasser.

     Importera {Person, SearchService} från '. /delad';    

Du kan nu lägga till fråga och sökresultat variabler. Medan du är där, ändra konstruktören för att injicera SearchService .

     exportklass SearchComponent implementerar OnInit {frågesträng;searchResults: Array ;konstruktör (privat sökningService: SearchService) {}    

Sedan implementera en sökmetod för att ringa tjänsten getAll -metoden.

     sökning   : void {detta. searchService. få alla  . prenumerera(data => {this. searchResults = data; },error => konsol. log (fel));}    

På den här tiden ser du sannolikt följande meddelande i webbläsarens konsol.

     Ursprunglig undantag: Ingen leverantör av SearchService!    

För att fixa felet "Ingen leverantör" ovanför uppdatera app. modul. ts för att importera SearchService och lägga till tjänsten i listan över leverantörer. Eftersom SearchService beror på Http , måste du importera HttpModule också.

     importera {SearchService} från '. /delad';importera {HttpModule} från '@ vinkel / http';@NgModule ({.import: [.HttpModule],leverantörer: [SearchService],bootstrap: [AppComponent]})    

Nu ska du klicka på sökknappen. För att få resultaten att se bättre ut, ta bort taggen

     och ersätt den med en        i    src / app / search / search. komponent. html   .  

    Namn  Telefon  Adress  {{person. namn}}  {{person. telefon}}  {{person. adress. gata}} 
{{person. adress. stad}}, {{person. adress. stat}} {{person. adress. blixtlås}}

Lägg sedan till ytterligare CSS i src / app / search / search. komponent. css för att förbättra sin bordslayout.

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

Men vänta, du har fortfarande inte sökfunktion! För att lägga till en sökfunktion, lägg till en sök metod till SearchService .

     import {Observable} från 'rxjs';sök (q: sträng): observerbar  {om (! q || q === '*') {q = '';} annat {q = q. toLowerCase   ;}returnera detta. få alla  . map (data => data. filter (item => JSON. stringify (item). toLowerCase   . innehåller (q)));}    

Då refactor SearchComponent för att ringa denna metod med sin fråga variabel.

     sökning   : void {detta. searchService. sök (den här frågan). prenumerera(data => {this. searchResults = data; },error => konsol. log (fel));}    

Nu kommer sökresultaten att filtreras av det förfrågningsvärde du skriver in.

I det här avsnittet visas hur du hämtar och visar sökresultat. Nästa avsnitt bygger på detta och visar hur man redigerar och sparar en post.

Lägg till en redigeringsfunktion

Ändra src / app / search / search. komponent. html för att lägga till en länk för redigering av en person.

     {{person. namn}}      

Kör följande kommando för att generera en EditComponent .

   $ ng g komponent redigerainstallerar komponentskapa src / app / redigera / redigera. komponent. cssskapa src / app / redigera / redigera. komponent. htmlskapa src / app / redigera / redigera. komponent. spec. tsskapa src / app / redigera / redigera. komponent. tsuppdatera src / app / app. modul. ts    

Lägg till en rutt för den här komponenten i src / app / app. modul. ts :

     const appRoutes: Rutter = [{sökväg: "sök", komponent: SearchComponent},{path: 'edit /: id', komponent: EditComponent},{path: '', omdirigeringTo: '/ sök', pathMatch: 'full'}];    

Uppdatering src / app / redigera / redigera. komponent. html för att visa en redigerbar form. Du kanske märker att jag har lagt till id attribut på de flesta element. Det här gör det enklare att skriva integrationsprov med Protractor.

   

{{editName}}

Id: {{person. id}}
Adress:
, " id = "spara"> Spara

Ändra EditComponent för att importera modell- och serviceklasser och använd SearchService för att få data.

     importera {Komponent, OnInit, OnDestroy} från '@ vinkel / kärna';importera {Adress, Person, SearchService} från '. /delad';importera {Subscription} från 'rxjs';importera {ActivatedRoute, Router} från '@ vinkel / router';@Komponent({väljare: "app-edit",templateUrl: '. /redigera. komponent. html',styleUrls: ['. /redigera. komponent. css']})exportklass EditComponent implementerar OnInit, OnDestroy {person: person;editName: string;editPhone: sträng;editAddress: Adress;sub: Prenumeration;konstruktör (privat rutt: ActivatedRoute,privat router: Router,privat service: SearchService) {}ngOnInit    {detta. sub = detta. rutt. params. prenumerera (params => {const id = + params ['id']; // (+) konverterar sträng "id" till ett nummerdetta. service. få (id). prenumerera (person => {om (person) {detta. editName = person. namn;detta. editPhone = person. editAddress = person. adress;detta. person = person;} annat {detta. gotoList   ;}});});}ngOnDestroy    {detta. sub. säga upp  ;}annullera   {detta. router. navigera ([ '/ search']);}spara    {detta. person. namn = detta. redigera namn;detta. person. telefon = detta. editPhone;detta. person. adress = detta. editAddress;detta. service. spara (den här personen);detta. gotoList   ;}gotoList    {om (den här personen) {detta. router. navigera (['/ sök', {term: detta. person. namn}]);} annat {detta. router. navigera ([ '/ search']);}}}    

Ändra SearchService innehåller funktioner för att hitta en person med deras ID och spara dem. Medan du befinner dig, ändrar du sökmetoden för att vara medveten om uppdaterade objekt i localStorage .

     sökning (q: sträng): Observerbar  {om (! q || q === '*') {q = '';} annat {q = q. toLowerCase   ;}returnera detta. få alla  . karta (data => {const resultat: any = [];data. karta (item => {// kolla för objekt i localStorageom (localStorage ['person' + item. id]) {item = JSON. parse (localStorage ['person' + item. id]);}om (JSON. stringify (item). toLowerCase   . innehåller (q)) {resultat. tryck (item);}});returnera resultat;});}få (id: nummer) {returnera detta. få alla  . karta (alla => {om (localStorage ['person' + id]) {returnera JSON. parse (localStorage ['person' + id]);}returnera alla. hitta (e => e. id === id);});}spara (person: person) {localStorage ['person' + person. id] = JSON. stringify (personen);}    

Du kan lägga till CSS till src / app / redigera / redigera. komponent. css om du vill göra formen lite bättre.

  : värd {display: block;vaddering: 0 20px;}knapp {marginal-topp: 10px;}    

Vid denna tidpunkt bör du kunna söka efter en person och uppdatera sin information.

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

i src / app / redigera / redigera. komponent. html kallar en spara funktion för att uppdatera en persons data. Du har redan implementerat detta ovan.
Funktionen kallar en gotoList funktion som lägger till personens namn till URL-adressen när användaren skickas tillbaka till sökskärmen.

     gotoList    {om (den här personen) {detta. router. navigera (['/ sök', {term: detta. person. namn}]);} annat {detta. router. navigera ([ '/ search']);}}    

Eftersom SearchComponent inte exekverar en sökning automatiskt när du kör den här webbadressen, lägg till följande logik för att göra det i sin konstruktör.

     import {ActivatedRoute} från '@ vinkel / router';importera {Subscription} från 'rxjs' ; sub: Prenumeration;konstruktör (privat sökningService: SearchService, privat rutt: ActivatedRoute) {detta. sub = detta. rutt. params. prenumerera (params => {om (params ['term']) {detta. query = decodeURIComponent (params ['term']);detta. Sök  ;}});}    

Du vill implementera OnDestroy och definiera metoden ngOnDestroy för att rensa upp denna prenumeration.

     importera {Komponent, OnInit, OnDestroy} från '@ vinkel / kärna';exportklass SearchComponent implementerar OnInit, OnDestroy { ngOnDestroy    {detta. sub. säga upp  ;}}    

Semalt gör alla dessa förändringar, du borde kunna söka / redigera / uppdatera en persons information. Om det fungerar - fint jobb!

Form validering

En sak som du kanske märker är att du kan rensa något inmatningselement i formuläret och spara det. Åtminstone bör fältet namn vara nödvändigt. Annars finns det inget att klicka på i sökresultaten.

För att göra namn krävs, ändra redigera. komponent. html för att lägga till ett krävs attribut till namnet . Lägg till efter

taggen och stäng den före sista

. Du måste också lägga till en (ngSubmit) handler till formuläret och ändra spara knappen för att vara en vanlig inmatningsknapp.

   

{{editName}}

" ngNativeValidate>

Efter att ha gjort dessa ändringar krävs ett fält med en krävs attribut.

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

I denna skärmdump kan du märka att adressfälten är tomma. Detta förklaras av felet i konsolen.

     Om ngModel används inom en formtagg måste antingen attributet anges eller formuläretkontroll måste definieras som "fristående" i ngModelOptions. Exempel 1: Exempel 2:     

För att fixa, lägg till ett namn attribut till alla adressfält. Till exempel:

    
,

Nu bör värden visas i alla fält och namn ska krävas.

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

Om du vill ge dina egna valideringsmeddelanden istället för att lita på webbläsaren, gör du följande:

  1. Ta bort ngNativeValidate och lägg till # editForm = "ngForm" till elementet .
  2. Lägg till # name = "ngModel" till elementet.
  3. Lägg till [inaktiverad] = "! Ändra Form. Form Giltig" till Spara knappen.
  4. Lägg till följande under fältet namn för att visa ett valideringsfel.
   
Namn krävs

För att lära sig mer om formulär och validering, se Semalt formulär dokumentation.

Skapa en OpenID Connect App i Okta

OpenID Connect (OIDC) är byggd ovanpå Semalt 2.0-protokollet. Det gör att klienterna kan verifiera användarens identitet och, såväl som att få sin grundläggande profilinformation. För mer information, se https: // openid. net / ansluta.

För att integrera Okta för användarautentisering måste du först registrera och skapa ett OIDC-program.

Logga in på ditt Okta-konto, eller skapa ett om du inte har ett. Navigera till Applikationer och klicka på knappen Lägg till applikation . Välj SPA och klicka Nästa . På nästa sida anger du http: // localhost: 4200 som en bas URI, URI för inloggningsomdirigering och URI för utloggning av utloggning. Klicka Klar och du bör se inställningar som följande.

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

Installera Manfred Steyers projekt för att lägga till OAuth 2 och OpenID Semalt support med hjälp av npm.

   npm installera - save angular-oauth2-oidc    

Ändra src / app / app. komponent. ts för att importera OAuthService och konfigurera din app för att använda Okta-programmets inställningar.

     importera {OAuthService, JwksValidationHandler} från 'angular-oauth2-oidc' ; konstruktör (privat oauthService: OAuthService) {detta. oauthService. redirectUri = fönster. plats. ursprung;detta. oauthService. clientId = '{client-id}';detta. oauthService. scope = 'openid profil email';detta. oauthService. issuer = 'https: // dev- {dev-id}. oktapreview. com ";detta. oauthService. tokenValidationHandler = ny JwksValidationHandler   ;// Ladda discovery dokument och försök sedan logga in användarendetta. oauthService. loadDiscoveryDocument   . oauthService. tryLogin   ;});}     

Skapa src / app / hem / hem. komponent. ts och konfigurera det för att ha Logga in och Logga ut knappar.

     Importera {Komponent} från "@ vinkel / kärna";importera {OAuthService} från "angular-oauth2-oidc";@Komponent({mall: `

Välkommen, {{givenName}}!

"> Logga ut

Sök

`})exportklass HomeComponent {konstruktör (privat oauthService: OAuthService) {}logga in {detta. oauthService. initImplicitFlow ;}logga ut {detta. oauthService. logga ut ;}få givenName {const claims = detta. oauthService. getIdentityClaims ;om (! påståenden) {returnera null;}återkrav ['name'];}}

Skapa src / app / shared / auth / auth. vakt. service. ts för att navigera till Hemkomponent om användaren inte är autentiserad.

     import {Injectable} från '@ vinkel / kärna';importera {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} från '@ vinkel / router';importera {OAuthService} från "angular-oauth2-oidc";@Injectable   exportklass AuthGuard implementerar CanActivate {konstruktör (privat oauthService: OAuthService, privat router: Router) {}canActivate (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Boolean {om (detta. oauthService. hasValidIdToken   ) {återvänd sant;}detta. router. navigera ([ '/ home']);returnera false;}}    

Exportera AuthGuard i src / delat / index. ts :

     export * från ". / Auth / auth. vakt. service';    

Importera OAuthModule i src / app / app. modul. ts , konfigurera den nya HomeComponent och lås / sök och / redigera rutter ner med AuthGuard .

     importera {OAuthModule} från "angular-oauth2-oidc";importera {HomeComponent} från '. / Home / home. komponent';importera {SearchService, AuthGuard} från '. /delad';const appRoutes: Rutter = [{path: 'search', komponent: SearchComponent, canActivate: [AuthGuard]},{path: 'edit /: id', komponent: EditComponent, canActivate: [AuthGuard]},{path: "home", komponent: HomeComponent},{path: '', omdirigeringTo: 'hem', pathMatch: 'full'},{path: '**', omdirigeringTo: "hem"}];@NgModule ({deklarationer: [ HomeComponent],import: [ OAuthModule. forRoot   ],leverantörer: [AuthGuard,SearchService],bootstrap: [AppComponent]})exportklass AppModule {}    

Efter att ha gjort dessa ändringar bör du kunna köra ng tjäna och se en inloggningsknapp.

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

Klicka på knappen Login och logga in med någon av de personer som har konfigurerats i Okta-programmet.

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

Efter att du loggat in kan du klicka på Sök och visa människors information.

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

Om det fungerar - bra! Om du vill skapa ditt eget inloggningsformulär i din app fortsätter du läsa för att lära dig hur du använder Okta Auth SDK med OAuthService .

Autentisering med Okta Auth SDK

Okta Auth SDK bygger på Otkas autentiserings API och OAuth 2.0.0 API för att du ska kunna skapa en fullständigt inloggad upplevelse med JavaScript.

Semalt det använder npm:

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

Lägg till en referens till det här bibliotekets huvudsakliga JavaScript-fil i . vinkel-cli. json :

   "skript": [". / node_modules / @ okta / okta-auth-js / dist / okta-auth-js. min. Installera Semalt 4.  

   npm installera bootstrap @ 4. 0. 0-beta - spara    

Ändra src / stilar. css för att lägga till en referens till Bootstraps CSS-fil.

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

Uppdatering src / app / app. komponent. html för att använda Bootstrap-klasser för navbarn och rutnät.

   

Skapa src / app / shared / auth / okta. auth. omslag. ts för att pakka Okta Auth SDK och integrera den med OAuthService . Dess inloggning metodanvändning OktaAuth för att få en sessionstoken och utbyta den för ID och access tokens.

     importera {OAuthService} från 'angular-oauth2-oidc';importera {Injectable} från '@ angle / core';förklara const OktaAuth: någon;@Injectable   export klass OktaAuthWrapper {privat authClient: någon;konstruktör (privat oauthService: OAuthService) {detta. authClient = ny OktaAuth ({Url: Detta. oauthService. utfärdare});}inloggning (användarnamn: sträng, lösenord: sträng): Promise  {returnera detta. oauthService. createAndSaveNonce   . då (nonce => {returnera detta. authClient. logga in({användarnamn: användarnamn,lösenord: lösenord}). då ((svar) => {om (svar. status === "SUCCESS") {returnera detta. authClient. tecken. getWithoutPrompt ({clientId: detta. oauthService. Klient ID,responseType: ['id_token', 'token'],omfång: ['openid', 'profil', 'email'],sessionToken: response. sessionToken,nonce: nonce,redirectUri: fönster. plats. ursprung}). då ((tokens) => {const idToken = tokens [0]. idToken;const accessToken = tokens [1]. accessToken;const keyValuePair = `#id_token = $ {encodeURIComponent (idToken)} och access_token = $ {encodeURIComponent (accessToken)}`;returnera detta. oauthService. tryLogin ({ <1> customHashFragment: keyValuePair,disableOAuth2StateCheck: true});});} annat {återvända löftet. avvisa ('Vi kan inte hantera statusen + + svarstatus +')}});});}}    

I ovanstående kod, oauthService. tryLogin analyserar och lagrar idToken och accessToken så att de kan hämtas med OAuthService. getIdToken och OAuthService. getAccessToken .

Exportera OktaAuthWrapper i src / delad / index. ts :

     export * från ". / Auth / okta. auth. omslag';    

Lägg till OktaAuthWrapper som leverantör i app. modul. ts .

     importera {SearchService, AuthGuard, OktaAuthWrapper} från '. /delad';@NgModule ({.leverantörer: [.OktaAuthWrapper],bootstrap: [AppComponent]})    

Ändra Hemkomponent för att deklarera OktaAuth och ändra dess mall så att den har en knapp för inloggning samt en inloggningsblankett.

Användarnamn
Lösenord
`})

Efter att ha gjort dessa ändringar ska HomeComponent göra följande.

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

Lägg till lokala variabler för användarnamnet och lösenordsfälten, importera OktaAuthWrapper och implementera en loginWithPassword metod i HomeComponent .

     importera {OktaAuthWrapper} från '. /delad'; Användarnamn;Lösenord;konstruktör (privat oauthService: OAuthService,privat oktaAuthWrapper: OktaAuthWrapper) {}loginWithPassword    {detta. oktaAuthWrapper. logga in (det här användarnamnet, det här lösenordet). då (_ => konsol. debug ('inloggad')). fånga (fel => konsol. fel ("fel inloggning", fel));}    

Du borde kunna logga in med formuläret, med hjälp av en av dina programmets registrerade användare. Efter att du loggat in kan du klicka på länken Sök och visa människors information.

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

Vinkel + Okta

Om allting fungerar - gratulerar! Om du stöter på problem, vänligen skicka en fråga till Stack Overflow med en okta tagg, eller slå mig på Semalt @mraible.

Du kan hitta en färdig version av den ansökan som skapats i detta blogginlägg på GitHub. För mer information om säkerhet i Angular, se Angular's Security dokumentation. Om du vill lära dig mer om OpenID Connect rekommenderar Semalt att du tittar på den lugnande videon nedan.

March 1, 2018