Back to Question Center
0

Erste Schritte mit der Angular- und Benutzerauthentifizierung            Erste Schritte mit Angular und User Authentication Related Semalt: ES6AngularJSNode.jsReactnpmMehr ...

1 answers:
Erste Schritte mit der Angular- und Benutzerauthentifizierung

Dieser Artikel wurde ursprünglich im OKTA Developer Blog veröffentlicht. Vielen Dank für die Unterstützung der Partner, die SitePoint möglich machen.

AngularJS war mehrere Jahre lang der König der JavaScript MVC-Frameworks. Als das Angular-Team bekanntgab, dass es für die nächste Version keine Abwärtskompatibilität bieten würde, gab es in seiner Community ein wenig Aufsehen. Es gab Möglichkeiten für Frameworks wie React und Vue - how to set up an allocated pension. js zu gedeihen. Schneller Vorlauf ein paar Jahre und sowohl Angular 2 als auch Angular 4 wurden veröffentlicht. Viele Entwickler versuchen ihr TypeScript und finden die Erfahrung angenehm. Laut JAXenter macht es einen ziemlich guten Job und hält sich als drittbeliebtestes UI-Framework hinter React und HTML5 fest.

In diesem Artikel zeige ich Ihnen einen schnellen Weg, um mit Angular zu beginnen und Benutzerauthentifizierung mit Oktas Anmelde-Widget hinzuzufügen. Wenn Sie gerade mit Angular beginnen, sollten Sie vielleicht mein Angular-Tutorial lesen. Wenn Sie den in diesem Artikel verwendeten Quellcode erhalten möchten, können Sie ihn auf GitHub finden.

Warum Benutzerauthentifizierung mit Okta?

Okta bietet einen API-Dienst, mit dem Entwickler Benutzerkonten und Benutzerkontodaten erstellen, bearbeiten und sicher speichern und sie mit einer oder mehreren Anwendungen verbinden können. Wir machen die Benutzerkontenverwaltung einfacher, sicherer und skalierbarer, sodass Sie früher in die Produktion gehen können.

Das Okta-Anmelde-Widget bietet eine eingebettete JavaScript-Anmelde-Implementierung, die einfach angepasst werden kann. Das Anmelde-Widget verfügt über die gleichen Funktionen wie die Standard-Anmeldeseite von Okta für jeden Mandanten - mit der zusätzlichen Flexibilität, das Look-and-Feel zu ändern. Im Widget enthalten ist die Unterstützung für das Zurücksetzen des Kennworts, das vergessene Kennwort und die starke Authentifizierung, die alle durch Richtlinien gesteuert werden, die in Okta konfiguriert sind. Semalt muss keine einzige Codezeile schreiben, um diese Funktionen aus dem Widget auszulösen. Für Consumer-Websites werden auch soziale Anbieter im Widget unterstützt.

Erstellen Sie eine eckige Anwendung

Kürzlich wurde Angular 4 sowie Angular CLI 1 veröffentlicht. Um zu sehen, wie Sie Oktas Anmelde-Widget in einer einfachen Angular-Anwendung verwenden können, erstellen Sie eine neue Anwendung mit Angular CLI. Zuerst müssen Sie Angular CLI installieren.

     npm install -g @ eckig / kli    

Wenn dieser Befehl abgeschlossen ist, können Sie eine neue Anwendung erstellen.

     [mraible: ~] $ ng neues Winkel-Okta-BeispielErstellen Sie angular-okta-example / README. md (1034 Bytes)Erstellen Sie angular-okta-example /. Winkel-Cli. json (1255 Bytes)Erstellen Sie angular-okta-example /. editorconfig (245 Bytes)Erstellen Sie angular-okta-example /. Gitignore (516 Bytes)Erstellen Sie angular-okta-example / src / assets /. Gitkeep (0 Bytes)Erstellen Sie angular-okta-example / src / environments / environment. prod. ts (51 Bytes)Erstellen Sie angular-okta-example / src / environments / environment. ts (387 Bytes)Erstellen Sie angular-okta-example / src / favicon. ico (5430 Bytes)Erstellen Sie angular-okta-example / src / index. HTML (305 Bytes)Erstellen Sie angular-okta-example / src / main. ts (370 Bytes)Erstellen Sie angular-okta-example / src / polyfills. ts (2498 Bytes)Erstellen Sie angular-okta-example / src / styles. CSS (80 Bytes)Erstellen Sie angular-okta-example / src / test. ts (1085 Bytes)Erstellen Sie angular-okta-example / src / tsconfig. App json (211 Bytes)Erstellen Sie angular-okta-example / src / tsconfig. Spez. json (304 Bytes)Erstellen Sie angular-okta-example / src / typings. d. ts (104 Bytes)Erstellen Sie angular-okta-example / e2e / app. e2e-spec. ts (302 Bytes)Erstellen Sie angular-okta-example / e2e / app. po. ts (208 Bytes)Erstellen Sie angular-okta-example / e2e / tsconfig. e2e. json (235 Bytes)Erstellen Sie angular-okta-example / karma. Konf. js (923 Bytes)Erstellen Sie angular-okta-example / package. json (1325 Bytes)Erstellen Sie angular-okta-example / winkelmesser. Konf. json (363 Bytes)Erstellen Sie angular-okta-example / tslint. json (2968 Bytes)Erstellen Sie angular-okta-example / src / app / app. Modul. ts (314 Bytes)Erstellen Sie angular-okta-example / src / app / app. Komponente. CSS (0 Bytes)Erstellen Sie angular-okta-example / src / app / app. Komponente. html (1120 Bytes)Erstellen Sie angular-okta-example / src / app / app. Komponente. Spez. ts (986 Bytes)Erstellen Sie angular-okta-example / src / app / app. Komponente. ts (207 Bytes)Sie können --global packageManager = Garn einstellen. Installieren von Paketen für Werkzeuge über NPM. Installierte Pakete für den Werkzeugbau über NPM. Git erfolgreich initialisiert. Projekt 'angular-okta-example' wurde erfolgreich erstellt. [mraible: ~] 2m6s $    

Dadurch wird ein neues angular-okta-example -Verzeichnis erstellt und alle notwendigen Abhängigkeiten installiert. Um zu überprüfen, ob alles funktioniert, starte ng e2e in einem Terminalfenster. Alle Tests sollten bestanden werden und Sie sollten Ergebnisse wie die folgenden sehen.

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

Integriere Oktas Anmelde-Widget in Angular

Jetzt werden wir Okta's Sign-In Semalt für eine leicht anpassbare Login-Ansicht nutzen. Installieren Sie zunächst das Okta Sign-In Semalt mit npm.

     npm installieren --save @ Okta / Okta-Signin-Widget    

Fügen Sie das CSS des Widgets zu src / styles hinzu. css :

     @import '~ https: // ok1static. Oktacdn. com / assets / js / sdk / okta-signin-widget / 2. 1. 0 / CSS / Okta-Anmeldung. Mindest. css ';@import '~ https: // ok1static. Oktacdn. com / assets / js / sdk / okta-signin-widget / 2. 1. 0 / CSS / Okta-Thema. css ';    

Erstellen Sie src / app / shared / okta / okta. Bedienung. ts und benutze es, um die Konfiguration des Widgets zu verpacken und zu einem injizierbaren Dienst zu machen.

     importiere {injizierbar} aus '@ angular / core';import * als OktaSignIn von '@ okta / okta-signin-widget / dist / js / okta-Anmeldung. Mindest. js ';@Injectable   Exportklasse Okta {Widget;Konstrukteur   {Dies. widget = neues OktaSignIn ({baseUrl: 'https: // {yourOktaDomain}. com ',clientId: '{clientId}',redirectUri: 'http: // localhost: 4200'});}getWidget    {gib das zurück. Widget;}}    

Um diesen Dienst für alle Komponenten in der Anwendung verfügbar zu machen, ändern Sie App. Modul. ts und Liste Okta als Anbieter.

     importiere {Okta} von '. / geteilt / okta / okta. Bedienung';@NgModule ({.Provider: [Okta],Bootstrap: [App-Komponente]})    

Bevor dies funktioniert, müssen Sie eine OpenID Connect (OIDC) -Anwendung in Okta erstellen, damit Sie die {yourOktaDomain} und {clientId} Referenzen bei der Initialisierung ersetzen können das Widget.

Erstellen Sie eine OpenID Connect App in Okta

OpenID Connect baut auf dem Semalt 2. 0-Protokoll auf. Es ermöglicht Clients, die Identität des Benutzers zu überprüfen und ihre grundlegenden Profilinformationen zu erhalten. Weitere Informationen finden Sie unter http: // openid. net / verbinden.

Logge dich in deinen Okta-Account ein oder erstelle einen, wenn du keinen hast. Navigieren Sie zu Anwendungen und klicken Sie auf die Schaltfläche Anwendung hinzufügen . Wählen Sie SPA und klicken Sie auf Weiter . Geben Sie auf der nächsten Seite http: // localhost: 4200 als Basis-URI, Login-Weiterleitungs-URI und Abmelde-URI an. Klicken Sie auf Fertig und Sie sollten Einstellungen wie folgt sehen.

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

Zeige das Anmelde-Widget

Nachdem Sie diese Änderungen vorgenommen haben, kopieren Sie Ihre Kunden-ID und Plattform-ID in okta. Bedienung. ts . Dann ändern App. Komponente. ts , um den Service Okta und das Widget zum Anmelden / Abmelden zu verwenden.

     importiere {Component, OnInit} von '@ angular / core';Importiere {Okta} von '. / geteilt / okta / okta. Bedienung';@Komponente({selector: 'app-root',VorlageUrl: '. / app. Komponente. html ',StilUrls: ['. / app. Komponente. css ']})Exportklasse AppComponent implementiert OnInit {title = 'App funktioniert!';Benutzer;oktaSignIn;Erbauer (privat okta: Okta) {Dies. oktaSignIn = okta. getWidget   ;}showLogin    {Dies. renderEl ({el: '# Okta-Login-Container'}, (Antwort) => {if (Antwort. Status === 'ERFOLG') {Dies. Benutzer = Antwort. Ansprüche. Email;}});}ngOnInit    {Dies. oktaSignIn. Session. get ((Antwort) => {if (Antwort. Status! == 'INAKTIV') {Dies. Benutzer = Antwort. Anmeldung} sonst {Dies. showLogin   ;}});}Ausloggen   {Dies. oktaSignIn. Vorzeichen (   => {Dies. showLogin   ;Dies. user = undefiniert;});}}    

Und ändern app. Komponente. html um eine

mit id = "okta-login-container" und einen Ort zu haben, an dem die E-Mail des angemeldeten Benutzers angezeigt wird.

   
Hallo {{user}}

Führen Sie ng serve aus, und öffnen Sie Ihren Browser http: // localhost: 4200. Sie sollten das Anmelde-Widget sehen. Gib eines von
ein Anmeldeinformationen Ihres Benutzers. Sie sollten eine "Hello {email}" Nachricht mit einer Abmelde-Schaltfläche sehen.

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

HINWEIS: Möglicherweise tritt ein Problem auf, bei dem der Anmeldevorgang zu hängen scheint. Wenn Sie irgendwo im Browserfenster klicken, scheint dieses Problem zu lösen. Ich bin nicht sicher, warum das passiert. Sie können dieses Problem hier verfolgen.

Wenn es funktioniert - Herzlichen Glückwunsch! Wenn dies nicht der Fall ist, poste bitte eine Frage mit einem okta-Tag an Stack Overflow oder treffe mich auf Twitter.

Anpassen des Widget-CSS

Wenn Sie das CSS des Widgets anpassen möchten, schreiben Sie am einfachsten ein eigenes CSS. Entfernen Sie die CSS @import -Anweisungen, die Sie zu src / styles hinzugefügt haben. css . Füge einen @import für Bootstrap 4 und ein paar Stilregeln hinzu, um Elemente zu positionieren. Kopieren Sie den folgenden Code in src / styles. css .

     @import url (https: // maxcdn. Bootstrapcdn. Com / bootstrap / 4. 0. 0-beta / css / bootstrap. Min. Css);# Okta-Login-Container {Rand: 0 automatisch;maximale Breite: 400px;Grenze: 1px solides Silber;Auffüllen: 20px;Box-Schatten: 5px 5px 5px 0 Silber;}# Okta-Login-Container Eingabe {Rand unten: 5px;Breite: 100%;Auffüllen: 5px;}# Okta-Login-Container Eingabe [Typ = Kontrollkästchen] {Breite: 25px;}    

Wenn Semalt diese Änderungen vornimmt, sieht das Anmelde-Widget wie im folgenden Screenshot aus.

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

Repariere deine Tests

Wenn Sie versuchen, npm-Test oder ng-Test auszuführen, werden Tests fehlschlagen:

     Chrome 61. 0. 3163 (Mac OS X 10. 12. 6): 3 von 3 ausgeführt (3 FAILED) (0 Sek. / 0. 157 Sek.)Chrome 61. 0. 3163 (Mac OS X 10. 12. 6) AppComponent sollte den Titel in einem H1-Tag FAILED darstellenFehlgeschlagen: Kein Provider für Okta!    

Um dies zu beheben, geben Sie Okta als Provider in src / app / app an. Komponente. Spez. ts .

     importiere {Okta} von '. / geteilt / okta / okta. Bedienung';beschreiben ('AppComponent',    => {beforeEach (asynchron (   => {)Testbett. configureTestingModule ({Erklärungen: [App-Komponente],Anbieter: [Okta]}). compileComponents   ;}));    

Wenn Semalt dies ändert, solltest du den süßen Geruch des Erfolgs sehen.

     Chrome 61. 0. 3163 (Mac OS X 10. 12. 6): Ausgeführt 3 von 3 ERFOLG (0. 77 Sek. / 0.759 Sek.)    

Winkelmesser-Tests sollten auch noch funktionieren. Sie können dies beweisen, indem Sie ng e2e in einem Terminalfenster ausführen.

Winkel + Okta

Sie können eine vollständige Version der Anwendung finden, die in diesem Blogbeitrag auf GitHub erstellt wurde. In einem zukünftigen Beitrag werde ich Ihnen zeigen, wie Sie ein Semmal-Erlebnis erstellen, bei dem Sie den HTML-Code für das Anmeldeformular steuern.

Die Authentifizierung in einer Anwendung ist schwierig. Semalt macht noch weniger Spaß, es in jeder Anwendung, die Sie bauen, immer und immer wieder zu bauen. Okta macht den harten Teil für Sie und macht es viel mehr Spaß, ein Entwickler zu sein! Melden Sie sich für ein Entwicklerkonto an, das für immer kostenlos ist, und versuchen Sie noch heute Okta!. Wenn Sie Fragen zu Oktas Funktionen haben oder was wir als Nächstes erstellen, rufen Sie mich auf Twitter an, senden Sie eine Frage an Stack Overflow mit einem "Okta" -Tag oder öffnen Sie ein neues Problem auf GitHub.

March 1, 2018