Richten Sie die Winkelauthentifizierung mit OpenID Connect und Okta in Ihrer App ein

Dieser Artikel wurde ursprünglich im Okta Developer Blog veröffentlicht. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglichen.

Angular (früher als Angular 2.0 bezeichnet) wird schnell zu einer der stärksten Möglichkeiten, eine moderne einseitige App zu erstellen. Eine Kernstärke ist die Fokussierung von Angular auf den Aufbau wiederverwendbarer Komponenten, mit denen Sie die verschiedenen Bedenken in Ihrer Anwendung entkoppeln können. Nehmen Sie zum Beispiel Authentifizierung: Es kann schmerzhaft sein zu bauen, aber sobald Sie sie in eine Komponente einwickelt, kann die Authentifizierungslogik während Ihrer Anwendung wiederverwendet werden.

Die Winkel -CLI erleichtert es einfach, neue Komponenten und sogar ganze Projekte zu senken. Wenn Sie die Angular -CLI nicht verwendet haben, um schnell Winkelcode zu erzeugen, können Sie sich auf einen Leckerbissen befassen!

In diesem Beispiel erstellen Sie eine einfache Webanwendung mit Winkel -CLI, einem Werkzeug für Winkelentwicklung. Sie erstellen eine Anwendung mit Such- und Bearbeitungsfunktionen und fügen dann Authentifizierung hinzu.

Key Takeaways

• schnelles Gerüst und führen Sie eine neue Winkelanwendung mit Winkel -CLI aus, wodurch die Entwicklungseffizienz verbessert wird.
• Integrieren Sie die Authentifizierung nahtlos, indem Sie eine OpenID -Verbindungs ​​-App mit OKTA einrichten, um eine sichere Benutzerverwaltung zu gewährleisten.
• Verbessern Sie die Benutzererfahrung, indem Sie Such- und Bearbeitungsfunktionen hinzufügen und das leistungsstarke Komponentensystem von Angular verwenden.
• Verwenden Sie das Routing, um die Navigation innerhalb der Anwendung zu verwalten und einen reibungsloseren Benutzerfluss und eine bessere Statusverwaltung zu ermöglichen.
• Formularvalidierung implementieren, um die Datenintegrität zu gewährleisten und Feedback zu geben, wodurch die Gesamtnutzbarkeit verbessert wird.
• sichere Anwendungsrouten mit dem AuthGuard von Angular zum Schutz vertraulicher Informationen und der Durchsetzung der Authentifizierung.

Erstellen Sie eine Winkelanwendung

Tipp: Wenn Sie überspringen möchten, erstellen Sie die Angular-Anwendung und können Sie das Hinzufügen von Authentifizierung rechts einsetzen, können Sie mein NG-Demo-Projekt klonen, und überspringen Sie dann zum Abschnitt "OpenID-Verbindungsanschluss".

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

was Sie benötigen

• ca. 20 Minuten
• Ein bevorzugter Texteditor oder IDE. Ich empfehle Intellij idee
• node.js und npm installiert. Ich empfehle NVM
• Winkel -CLI installiert. Wenn Sie keine Angular -CLI installiert haben, installieren Sie es mit NPM Installation -g @Angular/cli

Erstellen Sie ein neues Projekt mit dem ng neuen Befehl:

ng new ng-demo

Dies erstellt ein NG-Demo-Projekt und führt darin NPM-Installation aus. Die Fertigstellung sollte ungefähr eine Minute dauern, aber das kann je nach Ihrer Verbindungsgeschwindigkeit variieren.

<span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>

Sie können die Version von Angular CLI sehen, die Sie mit ng -Verssion verwenden.

$ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64

Führen Sie Ihre Winkelanwendung aus

Das Projekt ist mit WebPack Dev Server konfiguriert. Stellen Sie zunächst sicher

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

Sie sollten einen Bildschirm wie den unten unter http: // localhost: 4200.

sehen

Sie können sicherstellen, dass die Tests Ihres neuen Projekts bestehen. Führen Sie NG -Test aus:

ng new ng-demo

Fügen Sie eine Suchfunktion hinzu

Öffnen Sie das Projekt in einer IDE oder Ihrem bevorzugten Texteditor, um eine Suchfunktion hinzuzufügen. Verwenden Sie für die Intellij-Idee Datei> neues Projekt> statisches Web und verweisen Sie auf das NG-Demo-Verzeichnis.

In einem Terminalfenster CD in das Verzeichnis Ihres Projekts und führen Sie den folgenden Befehl aus. Dadurch wird eine Suchkomponente erstellt.

<span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>

Öffnen Sie SRC/App/Search/Search.component.html und ersetzen Sie die Standard -HTML durch Folgendes:

$ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64

Die Router -Dokumentation für Angular enthält die Informationen, die Sie benötigen, um eine Route zum gerade generierten SearchComponent einzurichten. Hier ist eine kurze Zusammenfassung:

In SRC/App/App.module.ts fügen Sie eine Genehmigungskonstante hinzu und importieren Sie sie in @ngmodule:

ng serve

In SRC/App/App.comPonent.html passen Sie den Platzhalterinhalt an und fügen Sie ein Tag hinzu, um Routen anzuzeigen.

$ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>

Jetzt, da Sie Routing -Setup haben, können Sie die Suchfunktion weiter schreiben.

Wenn Sie immer noch den NG -Servieren laufen lassen, sollte Ihr Browser automatisch aktualisiert werden. Wenn nicht, navigieren Sie zu http: // localhost: 4200. Sie werden wahrscheinlich einen leeren Bildschirm sehen. Öffnen Sie Ihre JavaScript -Konsole und Sie werden das Problem sehen.

Öffnen Sie src/app/app.module.ts und fügen Sie FormsModule als Import in @ngmodule hinzu:

$ ng g component search
installing component
  create src/app/search/search.component.css
  create src/app/search/search.component.html
  create src/app/search/search.component.spec.ts
  create src/app/search/search.component.ts
  update src/app/app.module.ts

Jetzt sollten Sie das Suchformular sehen.

Wenn Sie CSS für diese Komponenten hinzufügen möchten, öffnen Sie SRC/App/search/such.component.css und fügen Sie einige CSS hinzu. Zum Beispiel:

<span><span><span><h2</span>></span>Search<span><span></h2</span>></span>
</span><span><span><span><form</span>></span>
</span>  <span><span><span><input</span> type<span>="search"</span> name<span>="query"</span> [(ngModel)]<span>="query"</span> (keyup.enter)<span>="search()"</span>></span>
</span>  <span><span><span><button</span> type<span>="button"</span> (click)<span>="search()"</span>></span>Search<span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span><span><span><span><pre</span>></span>{{searchResults | json}}<span><span></pre</span>></span>
</span>

Dieser Abschnitt hat Ihnen gezeigt, wie Sie eine neue Komponente für eine grundlegende Winkelanwendung mit Winkel -CLI generieren. Im nächsten Abschnitt wird angezeigt, wie Sie eine JSON -Datei und Lokalstorage erstellen und verwenden, um eine gefälschte API zu erstellen.

Um Suchergebnisse zu erhalten, erstellen Sie einen Suchservice, der HTTP -Anforderungen an eine JSON -Datei stellt. Beginnen Sie mit dem Generieren eines neuen Dienstes.

<span>import { Routes, RouterModule } from '@angular/router';
</span>
<span>const appRoutes: Routes = [
</span>  <span>{path: 'search', component: SearchComponent},
</span>  <span>{path: '', redirectTo: '/search', pathMatch: 'full'}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  <span>...
</span>  imports<span>: [
</span>    <span>...
</span>    RouterModule<span>.forRoot(appRoutes)
</span>  <span>]
</span>  <span>...
</span><span>})
</span><span>export class AppModule { }
</span>

Verschieben Sie die generierte Suche.service.ts und ihren Test in App/Shared/Search. Sie müssen dieses Verzeichnis erstellen.

<span><span><span><h1</span>></span>Welcome to {{title}}!<span><span></h1</span>></span>
</span><span><!-- Routed views go here -->
</span><span><span><span><router-outlet</span>></span><span><span></router-outlet</span>></span>
</span>

Erstellen Sie SRC/Assets/Data/people.json, um Ihre Daten zu halten.

<span>import { FormsModule } from '@angular/forms';
</span>
<span><span>@NgModule</span>({
</span>  <span>...
</span>  imports<span>: [
</span>    <span>...
</span>    FormsModule
  <span>]
</span>  <span>...
</span><span>})
</span><span>export class AppModule { }
</span>

src/app/freigegeben/such/service.ts ändern und http als Abhängigkeit in seinem Konstruktor angeben. Erstellen Sie in dieser Datei eine GetAll () -Methode, um alle Personen zu sammeln. Definieren Sie außerdem die Adress- und Personenklassen, an die JSON zusammengefasst wird.

<span><span>:host</span> {
</span>  <span>display: block;
</span>  <span>padding: 0 20px;
</span><span>}
</span>

Um diese Klassen für den Verbrauch durch Ihre Komponenten verfügbar zu machen, bearbeiten Sie SRC/App/Shared/Index.ts und fügen Sie Folgendes hinzu:

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

Der Grund für das Erstellen dieser Datei ist, dass Sie mehrere Klassen in einer einzelnen Zeile importieren können, anstatt jede einzelne Klasse in separaten Zeilen importieren zu müssen.

In SRC/App/Search/search.component.ts, fügen Sie Importe für diese Klassen hinzu.

ng new ng-demo

Sie können jetzt Abfragen und SearchResults Variablen hinzufügen. Ändern Sie den Konstruktor, um den Suchservice zu injizieren.

<span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>

implementieren

$ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64

Zu diesem Zeitpunkt sehen Sie wahrscheinlich die folgende Nachricht in der Konsole Ihres Browsers.

ng serve

Um den Fehler "No Provider" von oben zu beheben, aktualisieren Sie app.module.ts, um den Suchservice zu importieren und den Dienst der Liste der Anbieter hinzuzufügen. Da SearchService von HTTP abhängt, müssen Sie auch HTTPModule importieren.

$ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>

Klicken Sie nun auf die Schaltfläche Such sollten funktionieren. Um die Ergebnisse besser aussehen zu lassen, entfernen Sie das

 -Tag und ersetzen Sie es durch eine <tabelle> in src/app/such/such.component.html. <p>
</p>
<pre class="brush:php;toolbar:false">$ ng g component search
installing component
  create src/app/search/search.component.css
  create src/app/search/search.component.html
  create src/app/search/search.component.spec.ts
  create src/app/search/search.component.ts
  update src/app/app.module.ts

Fügen Sie dann einige zusätzliche CSS in SRC/App/Search/Search.comPonent.css hinzu, um das Tabellenlayout zu verbessern.

<span><span><span><h2</span>></span>Search<span><span></h2</span>></span>
</span><span><span><span><form</span>></span>
</span>  <span><span><span><input</span> type<span>="search"</span> name<span>="query"</span> [(ngModel)]<span>="query"</span> (keyup.enter)<span>="search()"</span>></span>
</span>  <span><span><span><button</span> type<span>="button"</span> (click)<span>="search()"</span>></span>Search<span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span><span><span><span><pre</span>></span>{{searchResults | json}}<span><span></pre</span>></span>
</span>

Jetzt sehen die Suchergebnisse besser aus.

Aber warte, du hast immer noch keine Suchfunktionen! Um eine Suchfunktion hinzuzufügen, fügen Sie eine Suche () -Methode hinzu, um zu suchen.

<span>import { Routes, RouterModule } from '@angular/router';
</span>
<span>const appRoutes: Routes = [
</span>  <span>{path: 'search', component: SearchComponent},
</span>  <span>{path: '', redirectTo: '/search', pathMatch: 'full'}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  <span>...
</span>  imports<span>: [
</span>    <span>...
</span>    RouterModule<span>.forRoot(appRoutes)
</span>  <span>]
</span>  <span>...
</span><span>})
</span><span>export class AppModule { }
</span>

dann Refactor SearchComponent, um diese Methode mit seiner Abfragevariablen aufzurufen.

<span><span><span><h1</span>></span>Welcome to {{title}}!<span><span></h1</span>></span>
</span><span><!-- Routed views go here -->
</span><span><span><span><router-outlet</span>></span><span><span></router-outlet</span>></span>
</span>

Jetzt werden die Suchergebnisse durch den Abfragwert, den Sie eingeben, filtriert.

In diesem Abschnitt wurde gezeigt, wie Sie Suchergebnisse abrufen und anzeigen. Der nächste Abschnitt erstellt dies und zeigt, wie Sie einen Datensatz bearbeiten und speichern.

Fügen Sie eine Bearbeitungsfunktion hinzu

Ändern Sie SRC/App/Search/Search.component.html, um einen Link zum Bearbeiten einer Person hinzuzufügen.

<span>import { FormsModule } from '@angular/forms';
</span>
<span><span>@NgModule</span>({
</span>  <span>...
</span>  imports<span>: [
</span>    <span>...
</span>    FormsModule
  <span>]
</span>  <span>...
</span><span>})
</span><span>export class AppModule { }
</span>

Führen Sie den folgenden Befehl aus, um ein editComponent zu generieren.

<span><span>:host</span> {
</span>  <span>display: block;
</span>  <span>padding: 0 20px;
</span><span>}
</span>

Fügen Sie eine Route für diese Komponente in src/app/app.module hinzu:

$ ng g <span>service search
</span>installing <span>service
</span>  create src/app/search.service.spec.ts
  create src/app/search.service.ts
  WARNING Service is generated but not provided, it must be provided to be used

Aktualisieren Sie SRC/App/edit/edit.component.html, um ein bearbeitbares Formular anzuzeigen. Sie können feststellen, dass ich den meisten Elementen ID -Attribute hinzugefügt habe. Dies soll die Dinge beim Schreiben von Integrationstests mit dem Prognaktor erleichtern.

<span>mkdir -p src/app/shared/search
</span><span>mv src/app/search.service.* src/app/shared/search/.
</span>

EditComponent ändern, um Modell- und Serviceklassen zu importieren und den Suchservice zu verwenden, um Daten zu erhalten.

<span>[
</span>  <span>{
</span>    <span>"id": 1,
</span>    <span>"name": "Peyton Manning",
</span>    <span>"phone": "(303) 567-8910",
</span>    <span>"address": {
</span>      <span>"street": "1234 Main Street",
</span>      <span>"city": "Greenwood Village",
</span>      <span>"state": "CO",
</span>      <span>"zip": "80111"
</span>    <span>}
</span>  <span>},
</span>  <span>{
</span>    <span>"id": 2,
</span>    <span>"name": "Demaryius Thomas",
</span>    <span>"phone": "(720) 213-9876",
</span>    <span>"address": {
</span>      <span>"street": "5555 Marion Street",
</span>      <span>"city": "Denver",
</span>      <span>"state": "CO",
</span>      <span>"zip": "80202"
</span>    <span>}
</span>  <span>},
</span>  <span>{
</span>    <span>"id": 3,
</span>    <span>"name": "Von Miller",
</span>    <span>"phone": "(917) 323-2333",
</span>    <span>"address": {
</span>      <span>"street": "14 Mountain Way",
</span>      <span>"city": "Vail",
</span>      <span>"state": "CO",
</span>      <span>"zip": "81657"
</span>    <span>}
</span>  <span>}
</span><span>]
</span>

suchservice ändern, um Funktionen für die Suche nach einer Person nach ihrer ID zu enthalten und zu speichern. Ändern Sie während der gesamten Methode von Search (), um aktualisierte Objekte in LocalStorage zu beachten.

<span>import { Injectable } from '@angular/core';
</span><span>import { Http, Response } from '@angular/http';
</span><span>import 'rxjs/add/operator/map';
</span>
<span><span>@Injectable</span>()
</span><span>export class SearchService {
</span>  <span>constructor(private http: Http) {}
</span>
  <span>getAll() {
</span>    <span>return this.http.get('assets/data/people.json')
</span>        <span>.map((res: Response) => res.json());
</span>  <span>}
</span><span>}
</span>
<span>export class Address {
</span>  street<span>: string;
</span>  city<span>: string;
</span>  state<span>: string;
</span>  zip<span>: string;
</span>
  <span>constructor(obj?: any) {
</span>    <span>this.street = obj && obj.street || null;
</span>    <span>this.city = obj && obj.city || null;
</span>    <span>this.state = obj && obj.state || null;
</span>    <span>this.zip = obj && obj.zip || null;
</span>  <span>}
</span><span>}
</span>
<span>export class Person {
</span>  id<span>: number;
</span>  name<span>: string;
</span>  phone<span>: string;
</span>  address<span>: Address;
</span>
  <span>constructor(obj?: any) {
</span>    <span>this.id = obj && Number(obj.id) || null;
</span>    <span>this.name = obj && obj.name || null;
</span>    <span>this.phone = obj && obj.phone || null;
</span>    <span>this.address = obj && obj.address || null;
</span>  <span>}
</span><span>}
</span>

Sie können SRC/App/edit/edit.component.css CSS hinzufügen, wenn Sie das Formular etwas besser aussehen möchten.

<span>export * from './search/search.service';
</span>

Zu diesem Zeitpunkt sollten Sie in der Lage sein, nach einer Person zu suchen und ihre Informationen zu aktualisieren.

Das

in SRC/App/edit/edit.component.html ruft eine Funktion Save () auf, um die Daten einer Person zu aktualisieren. Sie haben dies bereits oben implementiert. Die Funktion ruft eine GOTOLIST () -Funktion auf, die den Namen der Person an die URL angibt, wenn der Benutzer an den Suchbildschirm zurücksendet wird.

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

Da das SearchComponent bei der Ausführung dieser URL eine Suche nicht automatisch ausführt, fügen Sie die folgende Logik hinzu, um dies in seinem Konstruktor zu tun.

ng new ng-demo

Sie möchten OnDestroy implementieren und die NgondErdroy -Methode definieren, um dieses Abonnement zu säubern.

<span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>

Nachdem Sie all diese Änderungen vorgenommen haben, sollten Sie in der Lage sein, die Informationen einer Person zu suchen/zu bearbeiten/zu aktualisieren. Wenn es funktioniert - gute Arbeit!

Formularvalidierung

Eine Sache, die Sie möglicherweise bemerken, ist, dass Sie jedes Eingabeelement im Formular löschen und speichern können. Zumindest sollte das Feld Namen erforderlich sein. Ansonsten gibt es in den Suchergebnissen nichts zu klicken.

Um den Namen erforderlich zu machen, ändern Sie edit.comPonent.html, um dem Namen .

ein erforderliches Attribut hinzuzufügen.

$ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64

Sie müssen auch alles in ein

Element einwickeln. Fügen Sie

nach dem

-Tag hinzu und schließen Sie es vor dem letzten . Sie müssen dem Formular auch einen (NGSubmit) -Handler hinzufügen und die Schaltfläche Speichern ändern, um eine normale Sendel -Taste zu sein.

ng serve

Nach diesen Änderungen ist jedes Feld mit einem erforderlichen Attribut erforderlich.

In diesem Screenshot stellen Sie möglicherweise fest, dass die Adressfelder leer sind. Dies wird durch den Fehler in Ihrer Konsole erklärt.

$ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>

Um zu beheben, fügen Sie allen Adressfeldern ein Namensattribut hinzu. Zum Beispiel:

$ ng g component search
installing component
  create src/app/search/search.component.css
  create src/app/search/search.component.html
  create src/app/search/search.component.spec.ts
  create src/app/search/search.component.ts
  update src/app/app.module.ts

Jetzt sollten Werte in allen Feldern angezeigt werden und der Name sollte erforderlich sein.

Wenn Sie Ihre eigenen Validierungsnachrichten angeben möchten, anstatt sich auf den Browser zu verlassen, führen Sie die folgenden Schritte aus:

ngnativvalidat entfernen und add #editForm = "ngform" zum

Element hinzufügen.

add #name = "ngmodel" zum Element hinzufügen.

hinzufügen [deaktiviert] = "! Editform.form.valid" zur speichern

.

Fügen Sie das Folgende im Feld Name hinzu, um einen Validierungsfehler anzuzeigen.

<span><span><span><h2</span>></span>Search<span><span></h2</span>></span>
</span><span><span><span><form</span>></span>
</span>  <span><span><span><input</span> type<span>="search"</span> name<span>="query"</span> [(ngModel)]<span>="query"</span> (keyup.enter)<span>="search()"</span>></span>
</span>  <span><span><span><button</span> type<span>="button"</span> (click)<span>="search()"</span>></span>Search<span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span><span><span><span><pre</span>></span>{{searchResults | json}}<span><span></pre</span>></span>
</span>

Um mehr über Formulare und Validierung zu erfahren, siehe Angular Forms Dokumentation.

Erstellen Sie eine OpenID Connect -App in Okta

OpenID Connect (OIDC) ist auf dem OAuth 2.0 -Protokoll gebaut. Es ermöglicht Clients, die Identität des Benutzers zu überprüfen und ihre grundlegenden Profilinformationen zu erhalten. Weitere Informationen finden Sie unter https://openid.net/connect.

Um Okta für die Benutzerauthentifizierung zu integrieren, müssen Sie sich zunächst registrieren und eine OIDC -Anwendung erstellen.

Melden Sie sich in Ihrem Okta -Konto an oder erstellen Sie einen, wenn Sie keine haben. 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 -Umleitungs -URI und Abmelden URI an. Klicken Sie auf Fertig und Sie sollten Einstellungen wie folgt sehen.

Installieren Sie das Projekt von Manfred Steyer, um die Unterstützung von OAuth 2 und OpenID Connect mit NPM hinzuzufügen.

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

Ändern Sie SRC/App/App.comPonent.ts, um oAuthService zu importieren und Ihre App so zu konfigurieren, dass die Einstellungen Ihrer OKTA -Anwendung verwendet werden.

ng new ng-demo

Erstellen Sie src/app/home/home.component.ts und konfigurieren Sie es so, dass sie Anmeldungs- und Abmeldetasten haben.

<span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>

Erstellen Sie SRC/App/Shared/auth.guard.service.ts, um zum Heimkomponenten zu navigieren, wenn der Benutzer nicht authentifiziert ist.

$ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64

exportieren authGuard in SRC/Shared/Index.ts:

ng serve

importieren Sie das OAuthModule in SRC /App /app.module.ts, konfigurieren

Nachdem Sie diese Änderungen vorgenommen haben, sollten Sie in der Lage sein, NG Serve auszuführen und eine Anmeldetaste zu sehen.

$ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>

Klicken Sie auf die Schaltfläche Anmeldung und melden Sie sich mit einem der Personen an, die in Ihrer OKTA-Anwendung konfiguriert sind.

Nach dem Anmeldung können Sie auf suchen und die Informationen der Personen anzeigen.

Wenn es funktioniert - großartig! Wenn Sie Ihr eigenes Anmeldeformular in Ihrer App erstellen möchten, lesen Sie weiter, um zu erfahren

Authentifizierung mit dem Okta auth SDK

Der Okta-AuthS-SDK baut auf OTKAs Authentifizierungs-API und OAuth 2.0-API auf, damit Sie mit JavaScript ein vollständig gebrandetes Anmeldeerlebnis erstellen können.

installieren Sie es mit NPM:

Fügen Sie einen Verweis auf die Hauptdatei der JavaScript-Datei dieser Bibliothek in .angular-cli.json hinzu:

$ ng g component search
installing component
  create src/app/search/search.component.css
  create src/app/search/search.component.html
  create src/app/search/search.component.spec.ts
  create src/app/search/search.component.ts
  update src/app/app.module.ts

Die Komponenten in diesem Abschnitt verwenden Bootstrap -CSS -Klassen. Startstrap 4.

installieren

<span><span><span><h2</span>></span>Search<span><span></h2</span>></span>
</span><span><span><span><form</span>></span>
</span>  <span><span><span><input</span> type<span>="search"</span> name<span>="query"</span> [(ngModel)]<span>="query"</span> (keyup.enter)<span>="search()"</span>></span>
</span>  <span><span><span><button</span> type<span>="button"</span> (click)<span>="search()"</span>></span>Search<span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span><span><span><span><pre</span>></span>{{searchResults | json}}<span><span></pre</span>></span>
</span>

src/styles.css ändern, um eine Verweise auf die CSS -Datei von Bootstrap hinzuzufügen.

<span>import { Routes, RouterModule } from '@angular/router';
</span>
<span>const appRoutes: Routes = [
</span>  <span>{path: 'search', component: SearchComponent},
</span>  <span>{path: '', redirectTo: '/search', pathMatch: 'full'}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  <span>...
</span>  imports<span>: [
</span>    <span>...
</span>    RouterModule<span>.forRoot(appRoutes)
</span>  <span>]
</span>  <span>...
</span><span>})
</span><span>export class AppModule { }
</span>

Aktualisieren Sie SRC/App/App.comPonent.html, um Bootstrap -Klassen für das Navigations- und Gittersystem zu verwenden.

<span><span><span><h1</span>></span>Welcome to {{title}}!<span><span></h1</span>></span>
</span><span><!-- Routed views go here -->
</span><span><span><span><router-outlet</span>></span><span><span></router-outlet</span>></span>
</span>

Erstellen Sie SRC/App/Shared/auth/okta.auth.wrapper.ts, um das Okta auth SDK zu wickeln und in OAuthService zu integrieren. Seine Login () -Methode verwendet OktaAuth, um ein Sitzungs -Token zu erhalten und es gegen ID- und Zugriffs -Token auszutauschen.

<span>import { FormsModule } from '@angular/forms';
</span>
<span><span>@NgModule</span>({
</span>  <span>...
</span>  imports<span>: [
</span>    <span>...
</span>    FormsModule
  <span>]
</span>  <span>...
</span><span>})
</span><span>export class AppModule { }
</span>

im obigen Code, OAuthService.trylogin (), pariert und speichert das idtoken und accessToken, damit sie mit OauthService.getIdToken () und oAuthService.getAccessToken ().

abgerufen werden können.

.

<span><span>:host</span> {
</span>  <span>display: block;
</span>  <span>padding: 0 20px;
</span><span>}
</span>

.

exportieren oktaAuthwrapper in SRC/Shared/Index.ts:

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

oktaAuthwrapper als Anbieter in app.module.ts.

hinzufügen

ng new ng-demo

Homecomponent ändern, um OktaAuth zu deklarieren und seine Vorlage so zu ändern

<span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>

Nach diesen Änderungen sollte die Heimkomponente wie folgt rendern.

Fügen Sie lokale Variablen für die Felder für Benutzername und Kennwort hinzu, importieren Sie OktaAuthwrapper und implementieren

Sie sollten in der Lage sein, das Formular mit einem der registrierten Benutzer Ihrer App zu verwenden. Nach dem Anmelden können Sie auf den Suchlink klicken und die Informationen der Personen anzeigen.

$ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64

Angular okta

Wenn alles funktioniert - Herzlichen Glückwunsch! Wenn Sie auf Probleme gestoßen sind, stellen Sie bitte eine Frage, um Überlauf mit einem Okta -Tag zu stapeln, oder drücken Sie mich auf Twitter @mraible.

Sie finden eine abgeschlossene Version der in diesem Blogbeitrag erstellten Anwendung auf GitHub. Weitere Informationen zu Sicherheit in Angular finden Sie in der Sicherheitsdokumentation von Angular. Wenn Sie mehr über OpenID Connect erfahren möchten, empfehlen ich, das beruhigende Video unten anzusehen.

Welche Rolle spielt OIDC bei der Winkelauthentifizierung? Es ermöglicht Clients, die Identität des Endbenutzers anhand der Authentifizierung eines Autorisierungsservers zu überprüfen. In Angular wird OIDC verwendet, um die Benutzerauthentifizierung zu verarbeiten. Es bietet ein sicheres und skalierbares Framework, mit dem mehrere Benutzeridentitäten verarbeitet werden können. Dadurch wird die Verwaltung von Benutzersitzungen und die Zugriffskontrolle einfacher mehrere Schritte. Zunächst müssen Sie die erforderlichen Pakete wie Angular-Auth-oidc-Client installieren. Anschließend konfigurieren Sie das OIDC -Modul in Ihrem App -Modul und geben die erforderlichen Parameter wie die Autorität, die Client -ID und den Antworttyp an. Danach können Sie den OIDC -Dienst verwenden, um Benutzeranmeldungen, Anmeldungen und Token -Validierung zu behandeln. Übertragen Sie Informationen zwischen Parteien als JSON -Objekt sicher. Wenn sich ein Benutzer anmeldet, generiert der Server eine JWT, die die Identität des Benutzers enthält und an den Client sendet. Der Client speichert dieses Token und findet es in jede Anfrage an den Server auf. Der Server überprüft dann das Token, um sicherzustellen, dass der Benutzer authentifiziert ist.

Was ist der Unterschied zwischen OAuth2 und OIDC? Es wird zur Autorisierung verwendet. Andererseits ist OIDC eine Identitätsschicht, die oben von OAuth2 gebaut wurde. Es erweitert OAuth2, um eine Authentifizierung bereitzustellen, sodass Anwendungen die Identität von Benutzern überprüfen können.

Wie kann ich meine Winkelanwendung sichern? Zunächst sollten Sie HTTPS verwenden, um Daten auf dem Transport zu verschlüsseln. Zweitens verwenden Sie JWT für die Benutzerauthentifizierung und Sitzungsverwaltung. Drittens implementieren Sie die Zugriffskontrolle, um einzuschränken, auf welche Ressourcen auf ein Benutzer zugreifen können. Abschließend sanitisieren Sie die Benutzereingabe, um Angriffe zwischen Skriptscripts (XSS) zu verhindern. Wenn sich ein Benutzer anmeldet, generiert der Server eine JWT, die die Identität des Benutzers enthält und an den Client sendet. Der Client speichert dieses Token und findet es in jede Anfrage an den Server auf. Der Server überprüft dann den Token, um sicherzustellen, dass der Benutzer authentifiziert ist. Eine Bibliothek für Angular, mit der Sie Ihre Anwendung mit Identitätsanbietern mithilfe von OpenID Connect und OAuth2 verbinden können. Es übernimmt die Benutzerauthentifizierung, Sitzungsverwaltung und Token -Validierung.

Wie kann ich die Zugriffskontrolle in Angular implementieren? Route Guards sind Schnittstellen, die dem Router mitteilen können, ob die Navigation zu einer angeforderten Route zulassen sollte oder nicht. Sie können verwendet werden, um den Zugriff auf bestimmte Routen basierend auf der Rolle oder dem Authentifizierungsstatus des Benutzers einzuschränken.

Wie kann ich Fehler in der Winkelauthentifizierung umgehen? . Ein Fehlerhandler ist eine Funktion, die einen Fehler als Parameter aufweist und ihn behandelt. Sie können es verwenden, um dem Benutzer eine Fehlermeldung anzuzeigen, den Fehler zu protokollieren oder den Benutzer sogar auf eine andere Seite umzuleiten.

Wie kann ich die Winkelauthentifizierung testen? Erstellen Sie Unit-Tests für Ihren Authentifizierungsdienst und End-to-End-Tests für Ihre Anwendung. Sie können Tools wie Jasmine und Karma für Unit-Tests und den Prospraktor für End-to-End-Tests verwenden. Diese Tests sollten überprüfen, ob der Authentifizierungsprozess wie erwartet funktioniert und Fehler korrekt behandelt.

Das obige ist der detaillierte Inhalt vonRichten Sie die Winkelauthentifizierung mit OpenID Connect und Okta in Ihrer App ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!