Back to Question Center
0

Komme i gang med Angular and User Authentication            Komme i gang med Angular and User AuthenticationRelated Semalt: ES6AngularJSNode.jsReactnpmMore ...

1 answers:
Komme i gang med vinkel- og brukerautentisering

Denne artikkelen ble opprinnelig publisert på OKTA Developer Blog. Takk for at du støttet partnerne som gjør SitePoint mulig.

AngularJS regjerte som konge av JavaScript MVC rammer i flere år. Men da Angular-teamet kunngjorde at de ikke ville gi bakoverkompatibilitet for sin neste versjon, var det litt av røre i samfunnet, noe som ga muligheter for rammer som React and Vue. js å blomstre. Rask fremover noen år, og både Angular 2 og Angular 4 har blitt utgitt - free hosting with sql. Mange utviklere prøver sin TypeScript og finner opplevelsen en hyggelig. Ifølge JAXenter gjør det en ganske god jobb, og holder sterk som det tredje mest populære brukergrensesnittet, bak React og HTML5. (1. 3)

I denne artikkelen vil jeg vise deg en rask måte å komme i gang med Angular, og legge til brukerautentisering med Okta's Sign-In Widget. Hvis du bare har begynt med Angular, vil du kanskje lese min Angular opplæring. Hvis du ønsker å få kildekoden brukt i denne artikkelen, kan du finne den på GitHub. (1. 3)

Hvorfor brukerautentisering med Okta?

Okta tilbyr en API-tjeneste som gjør det mulig for utviklere å opprette, redigere og sikkert lagre brukerkontoer og brukerkonto data, og koble dem til en eller flere applikasjoner. Vi gjør brukerkontostyringen enklere, sikrere og skalerbar, slik at du kan komme til produksjon tidligere. (1. 3)

Okta-pålogging-widgeten gir en innebygd innlogging av JavaScript som enkelt kan tilpasses. Inloggings widgeten har samme funksjon som angitt i standard Okta-påloggingssiden til hver leietaker - med den ekstra fleksibiliteten til å endre utseende og følelse. Inkludert i widgeten er støtte for tilbakestilling av passord, glemt passord og sterk autentisering - som alle er drevet av retningslinjer konfigurert i Okta. Semalt trenger ikke å skrive en enkelt linje med kode for å utløse disse funksjonene fra widgeten. For brukere som står overfor forbrukere, støttes også sosiale leverandører i widgeten. (1. 3)

Lag en kantet applikasjon

Angular 4 ble nylig utgitt, samt Angular CLI 1. 0. For å se hvordan du kan bruke Okta's Sign-In Widget i en enkel Angular-applikasjon, opprett et nytt program med Angular CLI. Først må du installere Angular CLI. (1. 3)

     npm installer -g @ vinkel / cli    

Semalt denne kommandoen fullføres, du kan opprette en ny applikasjon. (1. 3)

     [mraible: ~] $ ng nytt vinkel-okta-eksempellag angular-okta-example / README. md (1034 byte)lag vinkel-okta-eksempel /. vinkel-cli. json (1255 byte)lag vinkel-okta-eksempel /. editorconfig (245 bytes)lag vinkel-okta-eksempel /. gitignore (516 bytes)lag angular-okta-example / src / assets /. gitkeep (0 bytes)lag angular-okta-example / src / environments / environment. prod. ts (51 bytes)lag angular-okta-example / src / environments / environment. ts (387 byte)lag angular-okta-example / src / favicon. ico (5430 bytes)lag angular-okta-example / src / index. html (305 bytes)lag angular-okta-example / src / main. ts (370 byte)opprett vinkel-okta-eksempel / src / polypyfills. ts (2498 byte)lag angular-okta-example / src / styles. css (80 bytes)lag angular-okta-example / src / test. ts (1085 byte)opprett vinkel-okta-eksempel / src / tsconfig. app. json (211 byte)opprett vinkel-okta-eksempel / src / tsconfig. spec. json (304 byte)lag angular-okta-example / src / typings. d. ts (104 byte)opprett vinkel-okta-eksempel / e2e / app. E2E-spec. ts (302 byte)opprett vinkel-okta-eksempel / e2e / app. po. ts (208 byte)lag vinkel-okta-eksempel / e2e / tsconfig. e2e. json (235 bytes)lag vinkel-okta-eksempel / karma. conf. js (923 bytes)lag angular-okta-eksempel / pakke. json (1325 byte)lag vinkel-okta-eksempel / protractor. conf. json (363 bytes)lag vinkel-okta-eksempel / tslint. json (2968 bytes)lag angular-okta-example / src / app / app. modul. ts (314 byte)lag angular-okta-example / src / app / app. komponent. css (0 byte)lag angular-okta-example / src / app / app. komponent. html (1120 bytes)lag angular-okta-example / src / app / app. komponent. spec. ts (986 byte)lag angular-okta-example / src / app / app. komponent. ts (207 byte)Du kan `ng sett -global packageManager = garn`. Installere pakker for verktøy via npm. Installert pakker for verktøy via npm. Vellykket initialisert git. Prosjektet 'vinkel-okta-eksempel' ble opprettet. [mraible: ~] 2m6s $    

Dette vil opprette en ny vinkel-okta-eksempel katalog og installere alle nødvendige avhengigheter. For å bekrefte alt fungerer, kjør ng e2e i et terminalvindu. Alle tester skal passere, og du bør se resultater som følgende. (1. 3)

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

Integrer Okta's Sign-In Widget i Angular

Nå skal vi utnytte Okta's Sign-In Semalt for en lett tilpassbar påloggingsvisning. For å starte, installer Okta Sign-In Semalt ved hjelp av npm. (1. 3)

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

Legg til widgetens CSS til src / styles. css :

     @import '~ https: // ok1static. oktacdn. com / assets / js / SDK / Okta-pålogging-widget / 2. 1. 0 / css / okta-innlogging. min. css';@import '~ https: // ok1static. oktacdn. com / assets / js / SDK / Okta-pålogging-widget / 2. 1. 0 / css / okta-tema. css';    

Opprett src / app / delt / okta / okta. service. ts og bruk den til å pakke inn widgetens konfigurasjon og gjøre den til en injiserbar tjeneste. (1. 3)

     import {Injiserbar} fra '@ vinkel / kjerne';importer * som OktaSignIn fra '@ okta / okta-signin-widget / dist / js / okta-log-in. min. js';@Injectable   eksport klasse Okta {widget;konstruktør    {dette. widget = ny OktaSignIn ({baseUrl: 'https: // {yourOktaDomain}. com',clientId: '{clientId}',redirectUri: 'http: // localhost: 4200'});}getWidget    {returnere dette. widget;}}    

For å gjøre denne tjenesten tilgjengelig for alle komponentene i programmet, endre app. modul. ts og liste Okta som leverandør. (1. 3)

     import {Okta} fra '. / Delt / Okta / Okta. service';@NgModule ({.leverandører: [Okta],bootstrap: [AppComponent]})    

Før dette vil fungere, må du opprette et OpenID Connect-program (OIDC) i Okta, slik at du kan erstatte {39) {yourOktaDomain} og {clientId} referansene når du initialiserer widgeten. (1. 3)

Lag en OpenID Connect App i Okta

OpenID Connect er bygget på toppen av Semalt 2. 0-protokollen. Det gjør det mulig for kundene å verifisere brukerens identitet og, så vel som å oppnå sin grunnleggende profilinformasjon. For å lære mer, se http: // openid. net / koble til. (1. 3)

Logg inn på Okta-kontoen din, eller opprett en hvis du ikke har en. Naviger til Programmer og klikk på knappen Legg til applikasjon . Velg SPA og klikk Neste . På neste side spesifiserer du http: // localhost: 4200 som en Base URI, URI for innlogging omdirigering, og URI for utrulling av utlogging. Klikk Ferdig , og du bør se innstillinger som følgende. (1. 3)

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

Vis påloggings widgeten

Etter at du har gjort disse endringene, kopierer du klient-ID og plattform-ID til okta. service. ts . Endre deretter app. komponent. ts for å bruke tjenesten Okta og widgeten til å logge inn / logge ut. (1. 3)

     importer {Komponent, OnInit} fra '@ vinkel / kjerne';importer {Okta} fra '. / Delt / Okta / Okta. service';@Komponent({selector: 'app-root',templateUrl: '. / App. komponent. html',styleUrls: ['. / App. komponent. css']})eksportklasse AppComponent implementerer OnInit {title = 'app works!';bruker;oktaSignIn;konstruktør (privat okta: Okta) {dette. oktaSignIn = okta. getWidget   ;}showLogin    {dette. renderEl ({el: '# okta-login-container'}, (respons) => {hvis (respons. status === 'suksess') {dette. bruker = respons. påstander. e-post;}});}ngOnInit    {dette. oktaSignIn. økt. få ((svar) => {hvis (svarstatus! == 'INAKTIVT') {dette. bruker = respons. Logg Inn} annet {dette. showLogin   ;}});}Logg ut   {dette. oktaSignIn. signOut (   => {dette. showLogin   ;dette. user = undefined;});}}    

Og modifiser app. komponent. html for å ha en

med id = "okta-login-container" og et sted for å vise den innloggede brukerens epost. (1. 3)
   
Hei {{bruker}}

Kjør ng tjene , og åpne nettleseren din til http: // localhost: 4200. Du bør se påloggings widgeten. Skriv inn en av
Brukerens legitimasjon for å logge inn. Du bør se en "Hei {email}" melding med en logout-knapp. (1. 3)

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

MERK: Det kan hende du opplever et problem der påloggingsprosessen ser ut til å henge. Å klikke hvor som helst i nettleservinduet ser ut til å løse dette problemet. Jeg er ikke sikker på hvorfor dette skjer. Du kan følge dette problemet her. (1. 3)

Hvis det virker - gratulerer! Hvis det ikke gjør det, vennligst send et spørsmål til Stack Overflow med en okta tag, eller slå meg på Twitter. (1. 3)

Tilpass Widget CSS

Hvis du vil tilpasse widgetens CSS, er den enkleste måten å skrive ditt eget CSS. Fjern CSS @import setningene du har lagt til src / stiler. css . Legg til en @import for Bootstrap 4 og noen stilregler for å plassere elementer. Kopier følgende kode til src / stiler. css . (1. 3)

     @import url (https: // maxcdn. Bootstrapcdn. Com / bootstrap / 4. 0. 0-beta / css / bootstrap. Min. Css);# okta-login-container {margin: 0 auto;maksimal bredde: 400px;border: 1px solid sølv;polstring: 20px;boks-skygge: 5px 5px 5px 0 sølv;}# okta-login-container-inngang {margin-bunn: 5px;bredde: 100%;polstring: 5px;}# okta-login-container input [type = boks] {bredde: 25px;}    

Semalt som gjør disse endringene, vil påloggings widgeten se ut som følgende skjermbilde. (1. 3)

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

Løs dine tester

Hvis du prøver å kjøre npm test eller ng test , vil testene mislykkes:

     Chrome 61. 0. 3163 (Mac OS X 10. 12. 6): Utført 3 av 3 (3 FAILED) (0 sekunder / 0. 157 sekunder)Chrome 61. 0. 3163 (Mac OS X 10. 12. 6) AppComponent skal gjengi tittel i et h1-tag FAILEDMislyktes: Ingen leverandør for Okta!    

For å fikse dette, spesifiser Okta som en leverandør i src / app / app. komponent. spec. ts . (1. 3)

     import {Okta} fra '. / Delt / Okta / Okta. service';beskriv ('AppComponent',    => {før hver gang (async (   => {Teststed. configureTestingModule ({erklæringer: [AppComponent]leverandører: [Okta]}). compileComponents   ;}));    

Semalt gjør disse endringene, bør du se den søte lukten av suksess. (1. 3)

     Chrome 61. 0. 3163 (Mac OS X 10. 12. 6): Utført 3 av 3 SUCCESS (0. 77 sekunder / 0. 759 sekunder)    

Protraktortester skal fortsatt fungere. Du kan bevise dette ved å kjøre ng e2e i et terminalvindu. (1. 3)

Vinkel + Okta

Du finner en fullført versjon av søknaden som er opprettet i dette blogginnlegget på GitHub. I et fremtidig innlegg vil jeg vise deg hvordan du lager en mer Semalt-opplevelse, hvor du kontrollerer HTML-skjemaet for påloggingsskjemaet. (1. 3)

Byggeautentisering i en applikasjon er vanskelig. Semalt enda mindre morsomt å bygge det igjen og igjen i hver applikasjon du bygger. Okta gjør den vanskelige delen for deg og gjør det mye morsommere å være utvikler! Registrer deg for en evig-gratis utvikler konto og prøv Okta i dag!. Hvis du har spørsmål om Okta's funksjoner, eller hva vi bygger neste, vennligst klikk meg på Twitter, legg inn et spørsmål til Stack Overflow med en "okta" -tag, eller åpne et nytt problem på GitHub. (1. 3)

March 1, 2018