Schlüsselhighlights:
Dieser Artikel zeigt eine schnelle Integration des Anmelde-Widgets von Okta für die Benutzerauthentifizierung in einer grundlegenden Winkelanwendung. Für Anfänger an Anfänger wird ein ergänzendes Winkel -Tutorial empfohlen. Der Quellcode ist auf Github verfügbar.
Warum OKTA für die Benutzerauthentifizierung auswählen?
okta bietet eine umfassende API für die Verwaltung von Benutzerkonten, das sichere Speichern von Daten und eine Verbindung zu mehreren Anwendungen. Dies vereinfacht das Kontomanagement, verbessert die Sicherheit und beschleunigt die Bereitstellung. Das OKTA-Anmelde-Widget bietet eine leicht anpassbare, eingebettete JavaScript-Login-Lösung, die die Funktionalität der Standard-Anmeldeseite von Okta spiegelt, einschließlich Kennwortreset, vergessenen Kennwortfunktionen und starker Authentifizierung-alle über die Richtlinien von OKTA verwaltet und keinen benutzerdefinierten Code erfordern. Soziale Anmeldungen werden auch für Anwendungen für Verbraucher unterstützt.
Erstellen einer Winkelanwendung
mit Angular 4 und Winkel -CLI 1.0 ist es einfach:, eine neue Anwendung zu erstellen:
npm install -g @angular/cli
ng new angular-okta-example
Funktionalität mit ng e2e
.
Integrieren Sie Oktas Anmelde-Widget
npm install --save @okta/okta-signin-widget
src/styles.css
: @import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-sign-in.min.css'; @import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-theme.css';
src/app/shared/okta/okta.service.ts
, um das Widget zu verwalten: import { Injectable } from '@angular/core'; import * as OktaSignIn from '@okta/okta-signin-widget/dist/js/okta-sign-in.min.js'; @Injectable() export class Okta { widget; constructor() { this.widget = new OktaSignIn({ baseUrl: 'https://{yourOktaDomain}.com', clientId: '{clientId}', redirectUri: 'http://localhost:4200' }); } getWidget() { return this.widget; } }
add Okta
als Anbieter in app.module.ts
.
Erstellen Sie eine OpenID -Konnektionsanwendung in Ihrem Okta -Konto und ersetzen Sie Platzhalter in okta.service.ts
durch Ihr ClientId
und Okta Domain
.
Implementieren Sie die Anmeldung/Abmeldefunktionalität in app.component.ts
und passen Sie app.component.html
an, um das Widget und die Benutzerinformationen anzuzeigen.
Testen und Anpassung
Ausführen ng serve
, um die Anwendung zu testen. Adressieren Sie potenzielle Testausfälle durch Hinzufügen von Okta
als Anbieter in src/app/app.component.spec.ts
. Passen Sie das Erscheinungsbild des Widgets an, indem Sie benutzerdefinierte CSS erstellen. Die ausgefüllte Anwendung ist auf Github verfügbar.
häufig gestellte Fragen (FAQs) (Diese sind für die Kürze zusammengefasst; finden Sie im Original für vollständige Antworten.)
OktaAuthGuard
npm update
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Winkel-App mit dem Anmeldet-Widget von Okta in 15 Minuten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!