Back to Question Center
0

Začínáme s ověřením úhlu a uživatelem            Začínáme s ověřením úhlu a ověřením uživatelůSeznam o vztazích: ES6AngularJSNode.jsReactnpm Více ...

1 answers:
Začínáme s ověřením úhlu a uživatelem

Tento článek byl původně publikován na blogu OKTA Developer. Děkujeme, že jste podpořili partnery, kteří umožňují SitePoint.

AngularJS vládl několik let jako král MVC frameworků JavaScript. Nicméně, když Angular tým oznámil, že neposkytnou zpětnou kompatibilitu pro svou další verzi, došlo k trochu rozruchu ve své komunitě, což dávalo příležitostem pro rámce jako React a Vue - need app developer. aby se rozkvétala. Rychle dopředu několik let a byly uvolněny oba úhlové 2 a úhlové 4. Mnoho vývojářů se snaží své typové řady TypeScript a zjištění, že zážitek je příjemný. Podle JAXenteru to dělá docela dobrou práci a drží silný jako třetí nejpopulárnější rámec UI, za React a HTML5.

V tomto článku vám ukážeme rychlý způsob, jak začít s funkcí Angular a přidáte ověření uživatele pomocí Okta's Sign-In Widget. Pokud právě začínáte s Angulou, možná budete chtít přečíst můj Angulární výukový program. Pokud chcete získat zdrojový kód použitý v tomto článku, najdete jej v GitHubu.

Proč ověření uživatele pomocí Okta?

Společnost Okta poskytuje službu API, která umožňuje vývojářům vytvářet, upravovat a bezpečně ukládat uživatelské účty a údaje o uživatelských účtech a připojovat je k jedné nebo několika aplikacím. Zajišťujeme správu uživatelských účtů snadnější, bezpečnější a škálovatelnější, abyste se dostali k výrobě dříve.

Okta přihlašovací widget poskytuje implementaci implementace JavaScript, která se dá vložit, a lze ji jednoduše přizpůsobit. Přihlašovací widget nese stejnou funkci nastavenou na standardní přihlašovací stránce Okta každého nájemníka - s přidanou flexibilitou pro změnu vzhledu. Součástí widgetu je podpora obnovení hesla, zapomenutého hesla a silné autentizace - všechny jsou řízeny zásadami nakonfigurovanými v Okta. Semalt nemusíte psát jediný řádek kódu, který by tyto funkce spustil z widgetu. U webů orientovaných na spotřebitele jsou v widgetu také podporováni sociální poskytovatelé.

Vytvořte úhlovou aplikaci

Úhlová 4 byla nedávno uvolněna, stejně jako úhlová CLI 1. 0. Chcete-li zjistit, jak můžete použít Okta's Sign-In Widget v jednoduché úhlové aplikaci, vytvořte novou aplikaci s úhlovým CLI. Nejprve je třeba nainstalovat úhlovou CLI.

     npm install -g @ úhlové / cli    

Semalt tento příkaz dokončí, můžete vytvořit novou aplikaci.

     [mraible: ~] $ ng nový úhlová-okta-příkladvytvořit úhlový okta-příklad / README. md (1034 bajtů)vytvořit úhlový-okta-příklad /. úhlová-cli. json (1255 bajtů)vytvořit úhlový-okta-příklad /. editorconfig (245 bajtů)vytvořit úhlový-okta-příklad /. gitignore (516 bajtů)vytvořit úhlový okta-example / src / assets /. gitkeep (0 bajtů)vytvořte úhlově-okta-example / src / prostředí / prostředí. prod. ts (51 bajtů)vytvořte úhlově-okta-example / src / prostředí / prostředí. ts (387 bajtů)vytvořte úhlově-okta-example / src / favicon. ico (5430 bajtů)vytvořit úhlově-okta-example / src / index. html (305 bajtů)Vytvořte úhlově-okta-example / src / main. ts (370 bajtů)vytvořte úhlově-okta-example / src / polyfills. ts (2498 bytů)vytvořit úhlově-okta-example / src / styly. css (80 bajtů)Vytvořte úhlově-okta-example / src / test. ts (1085 bajtů)vytvořte úhlově-okta-example / src / tsconfig. aplikace. json (211 bajtů)vytvořte úhlově-okta-example / src / tsconfig. spec. json (304 bajtů)vytvářet úhlově-okta-example / src / typing. d. ts (104 bajtů)vytvořit úhlový okta-example / e2e / app. e2e-spec. ts (302 bajtů)vytvořit úhlový okta-example / e2e / app. po. ts (208 bajtů)vytvořte úhlově-okta-example / e2e / tsconfig. e2e. json (235 bajtů)vytvořit úhlově-okta-příklad / karma. conf. js (923 bytes)vytvořte úhlově-okta-příklad / balíček. json (1325 bajtů)vytvořit úhlový-okta-příklad / úhloměr. conf. json (363 bajtů)vytvořte úhlově-okta-příklad / tslint. json (2968 bajtů)vytvořit úhlový okta-example / src / app / app. modul. ts (314 bajtů)vytvořit úhlový okta-example / src / app / app. komponent. css (0 bajtů)vytvořit úhlový okta-example / src / app / app. komponent. html (1120 bajtů)vytvořit úhlový okta-example / src / app / app. komponent. spec. ts (986 bajtů)vytvořit úhlový okta-example / src / app / app. komponent. ts (207 bytů)Můžete nastavit --global packageManager = příze. Instalace balíčků pro nástroje přes npm. Instalované balíčky pro nářadí pomocí npm. Úspěšně inicializováno git. Projekt "úhlové-okta-příklad" úspěšně vytvořen. [mrazivý: ~] 2m6s $    

Tím vytvoříme nový adresář úhlové okta a nainstalujeme všechny potřebné závislosti. Chcete-li ověřit, že vše funguje, spusťte ng e2e v okně terminálu. Všechny testy by měly projít a měli byste vidět výsledky, jako je následující.

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

Integrace Okta je přihlašovací widget v úhlové

Nyní budeme využívat Okta Signal In Semalt pro snadno přizpůsobitelný přihlašovací pohled. Chcete-li začít, nainstalujte Okta přihlašovací sematál pomocí npm.

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

Přidejte CSS widgetu src / styly. css :

     @import '~ https: // ok1static. oktacdn. com / aktiva / js / sdk / okta-signin-widget / 2. 1. 0 / css / okta-přihlášení. min. css ';@import '~ https: // ok1static. oktacdn. com / aktiva / js / sdk / okta-signin-widget / 2. 1. 0 / css / okta-téma. css ';    

Vytvořit src / app / shared / okta / okta. servis. ts a použijte ji k zabalení konfigurace widgetu a zhotovení injekční služby.

     import {Injectable} z '@ angular / core';import * jako OktaSignIn z '@ okta / okta-signin-widget / dist / js / okta-přihlašování. min. js ';@Injectable   exportní třída Okta {widget;konstruktor    {tento. widget = nový OktaSignIn ({baseUrl: 'https: // {yourOktaDomain}. com ',clientId: '{clientId}',přesměrování: "http: // localhost: 4200"});}}getWidget    {vrátit to. widget;}}}}    

Chcete-li zpřístupnit tuto službu všem komponentám v aplikaci, upravte app. modul. ts a seznam Okta jako poskytovatele.

     import {Okta} z '. / shared / okta / okta. servis';@NgModule ({.poskytovatelé: [Okta],bootstrap: [AppComponent]})    

Než to bude fungovat, budete muset v Okta vytvořit aplikaci OIDC (OIDC), abyste mohli při inicializaci nahradit {yourOktaDomain} a {clientId} widget.

Vytvořte aplikaci OpenID Connect v Okta

OpenID Connect je umístěn na vrcholu protokolu Semalt 2. 0. Umožňuje klientům ověřit totožnost uživatele a získat základní informace o profilu. Další informace naleznete na adrese http: // openid. net / připojit.

Přihlaste se k účtu Okta nebo si ho vytvořte, pokud ho nemáte. Přejděte na Aplikace a klikněte na tlačítko Přidat aplikaci . Vyberte SPA a klikněte na Další . Na další stránce zadejte http: // localhost: 4200 jako URI základny, URI přesměrování přihlášení a URI přesměrování odhlášení. Klikněte na Hotovo a měli byste se podívat na následující nastavení.

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

Zobrazit widget přihlášení

Po provedení těchto změn zkopírujte ID klienta a ID platformy do okta. servis. ts . Potom upravte app. komponent. ts pro použití služby Okta a widget pro přihlášení / odhlášení.

     import {Component, OnInit} z '@ angular / core';import {Okta} z '. / shared / okta / okta. servis';@Komponent({volič: 'app-root',templateUrl: '. /aplikace. komponent. html ',styleUrls: ['. /aplikace. komponent. css ']})exportní třída AppComponent implementuje OnInit {title = 'Aplikace funguje!';uživatel;oktaSignIn;konstruktor (soukromá okta: Okta) {tento. oktaSignIn = okta. getWidget   ;}}showLogin    {tento. renderEl ({el: '# okta-login-container'}, (odpověď) => {pokud (stav odpovědi === 'SUCCESS') {tento. user = odpověď. nároky. e-mailem;}}});}}ngOnInit    {tento. oktaSignIn. zasedání. get ((odpověď) => {pokud (stav odpovědi! == 'INACTIVE') {tento. user = odpověď. přihlásit se} else {tento. showLogin   ;}}});}}odhlásit se   {tento. oktaSignIn. signOut (   => {tento. showLogin   ;tento. user = undefined;});}}}}    

a upravovat app. komponent. html mít

s id = "okta-login-container" a místo pro zobrazení e-mailu přihlášeného uživatele.

   
Dobrý den, {{user}} "> Odhlášení

Run ng serve a otevřete prohlížeč http: // localhost: 4200. Měli byste vidět přihlašovací widget. Zadejte jeden z
přihlašovací údaje uživatele. Měli byste vidět zprávu "Hello {email}" s tlačítkem odhlášení.

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

Poznámka: Může dojít k problému, kdy se zdá, že přihlašovací proces visí. Klepnutím kdekoliv v okně prohlížeče se zdá, že tento problém vyřešíte. Nejsem si jistý, proč se to stane. Zde můžete sledovat tento problém.

Pokud to funguje - gratulujeme! Pokud tomu tak není, zadejte prosím otázku Stack Overflow pomocí značky okta, nebo se na Twitteru dotkněte.

Přizpůsobte si Widget CSS

Pokud chcete přizpůsobit CSS widgetu, nejjednodušší je, abyste napsali vlastní CSS. Odstraňte příkazy CSS @import , které jste přidali do src / styly. css . Přidejte @import pro Bootstrap 4 a několik stylových pravidel pro umístění prvků. Zkopírujte následující kód do src / styly. css .

     @import url (https: // maxcdn. Bootstrapcdn. Com / bootstrap / 4. 0. 0-beta / css / bootstrap.mins css);# okta-login-kontejner {margin: 0 auto;max-šířka: 400px;hranice: 1px stříbrná;polstrování: 20px;box-stín: 5px 5px 5px 0 stříbrný;}}# okta-login-container vstup {margin-bottom: 5px;šířka: 100%;polstrování: 5px;}}# okta-login-container vstup [typ = zaškrtávací políčko] {šířka: 25px;}}    

Semalt, který provede tyto změny, widget přihlášení bude vypadat jako následující snímek obrazovky.

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

Opravte své testy

Pokud se pokusíte spustit npm test nebo ng test , testy selže:

     Chrome 61. 0. 3163 (Mac OS X 10. 12. 6): Spuštěno 3 z 3 (3 FAILED) (0 secs / 0 157 secs)Chrome 61. 0. 3163 (Mac OS X 10. 12. 6) AppComponent by měl vykreslovat titul v tagu h1 FAILEDSelhalo: Žádný poskytovatel pro Okta!    

Chcete-li to opravit, zadejte Okta jako poskytovatele v src / app / app. komponent. spec. ts .

     import {Okta} z '. / shared / okta / okta. servis';popište ('AppComponent',    => {předtím (async (   => {TestBed. configureTestingModule ({prohlášení: [AppComponent],poskytovatelé: [Okta]}). compileComponents   ;}});    

Semalt, který dělá toto změny, byste měli vidět sladkou vůni úspěchu.

     Chrome 61. 0. 3163 (Mac OS X 10. 12. 6): Spuštěno 3 z 3 ÚSPĚCH (0. 77 sec / 0. 759 s)    

Měření úderů by mělo i nadále fungovat. Můžete to dokázat spuštěním ng e2e v terminálovém okně.

Úhlová + Okta

Kompletní verzi aplikace vytvořené v tomto příspěvku na blogu naleznete v GitHubu. V budoucím příspěvku vám ukážeme, jak vytvořit více Semaltův zážitek, kde ovládáte HTML pro přihlašovací formulář.

Autentifikace objektu v aplikaci je těžká. Semaltu je ještě méně zábavné, kdybyste jej znovu a znovu sestavovali v každé aplikaci, kterou vytvoříte. Okta dělá těžkou část pro vás a dělá to mnohem zábavnější být vývojář! Zaregistrujte se na bezplatný účet pro vývojáře a zkuste to dnes Okta!. Máte-li dotazy týkající se funkcí společnosti Okta nebo co budujeme, prosím, zvedněte mě na Twitter, pošlete otázku na Stack Overflow pomocí značky "okta" nebo otevřete nový problém v GitHubu.

March 1, 2018