Authentifizierung von Benutzern bei vorhandenen Anwendungen mit OpenID Connect und NGINX Plus

Verwenden der JWT-Unterstützung zum Bereitstellen von SSO für vorhandene Anwendungen

[ Herausgeber – Dieser Beitrag beschreibt, wie NGINX Plus mit OpenID Connect-Anbietern verwendet wird, die den Implicit Flow zur Authentifizierung unterstützen. Die Informationen sind technisch korrekt, aber einige Aktionen (wie die Verwendung von Cron zum Abrufen öffentlicher Schlüssel) sind aufgrund von Aktualisierungen unserer Referenzimplementierung nicht mehr erforderlich. Die aktuelle Implementierung finden Sie in unserem GitHub-Repo .

In NGINX Plus R15 und höher können Sie NGINX Plus auch als vertrauende Partei im OpenID Connect- Autorisierungscode-Flow verwenden.]

OAuth 2.0 hat viel dazu beigetragen, die Flexibilität und das Benutzererlebnis bei der Authentifizierung gegenüber Websites und Anwendungen zu verändern. Doch trotz des Namens sagt die OAuth 2.0-Spezifikation sehr wenig über die Überprüfung der Endbenutzeridentität und nichts über Single Sign-On (SSO) aus. Hier kommt OpenID Connect ins Spiel – es ist im Wesentlichen das fehlende Stück, das Identitätsinformationen in OAuth 2.0-Zugriffstoken überträgt.

OpenID Connect-Identitätstoken entsprechen der JSON Web Token (JWT)-Spezifikation . JWT-Token (ausgesprochen „jot“) sind kompakt, leicht weiterzugeben und bieten ein gemeinsames Kernschema zur Beschreibung von Identitätsinformationen. Das Tolle an JWTs ist, dass sie auf nahezu jeden Identitätsanwendungsfall angewendet werden können, von der Authentifizierung von API-Clients bis zur Bereitstellung von SSO für Unternehmensanwendungen. Tatsächlich können viele Organisationen, die Google Apps verwenden , Google als Identitätsanbieter nutzen, um SSO für ihre Unternehmensanwendungen bereitzustellen . Allerdings schließt die Verwendung von OpenID Connect und JWTs deren Verwendung zur Authentifizierung bei vorhandenen Webanwendungen oder zur Bereitstellung von SSO für diese nicht aus.

NGINX Plus R10 und höher umfasst native JWT-Unterstützung, wodurch NGINX Plus Token validieren und Upstream-Anfragen mit der Identität des authentifizierten Benutzers auf eine Weise versehen kann, die die Anwendung problemlos nutzen kann. In diesem Blogbeitrag zeigen wir, wie Sie die native JWT-Unterstützung in NGINX Plus nutzen, um SSO für bestehende Anwendungen zu aktivieren, ohne dass an den Anwendungen selbst Änderungen erforderlich sind. Wir verwenden Google als Identitätsanbieter und eine einfache Website zur Darstellung der Anwendung. Der End-to-End-Flow sieht folgendermaßen aus:

Aktivieren von OpenID Connect für Ihre Webanwendung

Unser Beispiel besteht aus zwei Komponenten: der NGINX Plus-Konfiguration und der HTML-Anmeldeseite.

NGINX Plus-Konfiguration

Die NGINX Plus-Konfiguration zum Validieren von JWTs ist sehr einfach.

Server { listen 80;
root /var/www/public_html;

Standort /privat/ {
auth_jwt "Google-Konto" token=$cookie_auth_token;
auth_jwt_key_file /etc/nginx/google_certs.jwk;
}
}

Der Standortblock gibt an, dass alle Anforderungen an URLs, die mit /private/ beginnen, authentifiziert werden müssen. Die Direktive auth_jwt definiert den Authentifizierungsbereich, der zurückgegeben wird (zusammen mit einem401 ), wenn die Authentifizierung nicht erfolgreich ist, und wo in der Anfrage NGINX Plus das JWT finden kann. In diesem Fall wird erwartet, das Token in einem Cookie mit dem Namen auth_token zu finden. Standardmäßig erwartet NGINX Plus, dass Clients das JWT als Bearer Token präsentieren und dabei den Authorization- Header verwenden, wie es bei AJAX-Anwendungen und API-Clients üblich ist. Es kann das JWT aber auch aus anderen HTTP-Headern, Abfragezeichenfolgenargumenten oder einem Cookie abrufen, wie in diesem Beispiel.

Die Direktive „auth_jwt_key_file“ teilt NGINX mit, wie das Signaturelement des JWT validiert wird. Durch die Signaturvalidierung wird sichergestellt, dass das JWT von Google ausgestellt und seitdem nicht geändert wurde. Google veröffentlicht seine öffentlichen Schlüssel und aktualisiert sie regelmäßig. Um einen aktuellen Schlüsselsatz beizubehalten, verwenden Sie cron(8), um sie stündlich abzurufen, wie in diesem Beispiel eines Crontab- Eintrags.

0 * * * * wget https://www.googleapis.com/oauth2/v3/certs -O /etc/nginx/google_certs.jwk

HTML-basierte Anmeldeseite

Um dieses Beispiel einfach und unkompliziert zu halten, erstellen wir keine vollständige Anwendung. Stattdessen verwenden wir das folgende grundlegende HTML, um eine Anmeldeseite zu erstellen. Die HTML-Datei heißt /var/www/public_html/index.html (dies entspricht dem Stammpfad , den wir in der NGINX Plus-Konfiguration definiert haben).

<html>
<head>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>NGINX OpenID Connect-Demo</title>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" 
Inhalt="Kunden-ID.apps.googleusercontent.com">
<script src="/js.cookie.js"></script>
</head>
<body>
<h2>NGINX OpenID Connect-Demo</h2>
<hr/>
<h3>Melden Sie sich mit einem Google-Konto an und besuchen Sie dann den <a href="/private/">privaten Bereich</a>.</h3>
<table><tr><td>
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div></td>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
Cookies.set('auth_token', googleUser.getAuthResponse().id_token);
document.getElementById('google_signout').innerHTML = '<a href="#" onclick="signOut();"><img src="' + profile.getImageUrl() + '" width=32 height=32>Abmelden</a>';
};
Funktion signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(Funktion () {
Cookies.remove('auth_token');
document.getElementById('google_signout').innerHTML = '';
});
}
</script>
<td><div id="google_signout"></div></td>
</tr></table>
<hr/>
</body>
</html>

Wir haben zwei wichtige Abhängigkeiten im -Block hervorgehoben.

• <meta name="google-signin-client_id"> tag – Wir verwenden OAuth 2.0 JavaScript API von Google um den OAuth 2.0-Endbenutzerzustimmungs- und Authentifizierungsprozess durchzuführen. Dadurch erhalten wir den Anmelde-Button und können erkennen, ob wir angemeldet sind oder nicht. Damit unsere Website von Google authentifiziert werden kann, müssen wir eine OAuth 2.0-Client-ID erstellen und diese als Inhaltsattribut für diesen Tag bereitstellen, wobei wir den Platzhalter „Client-ID“ ersetzen. Anweisungen zum Erstellen einer neuen OAuth 2.0-Client-ID finden Sie im Anhang unten dieses Artikels.
• <script src="/js.cookie.js"> Tag – Wir benötigen einen Cookie-Parser, der das Identitätstoken aus dem OAuth 2.0-Zugriffstoken extrahieren und ein Cookie erstellen kann, das an die Website gesendet wird. Die Zeile Cookies.set erreicht dies mithilfe der JavaScript-Cookie -Bibliothek, die in diesem Tag enthalten ist.

Mit diesen Teilen verfügen wir nun über eine öffentliche Homepage mit dem Anmeldemechanismus von Google und einen privaten Bereich, der durch NGINX Plus geschützt ist. Beachten Sie, dass wir keinen Inhalt für unseren privaten Bereich erstellt haben, also404 Beim Versuch, darauf zuzugreifen, ist mit einem Fehler zu rechnen.

Weitere Informationen

Einzelheiten zu erweiterten JWT-Funktionen finden Sie unter Authentifizieren von API-Clients mit JWT und NGINX Plus . Es wird erläutert, wie authentifizierte Anforderungen mit aus dem JWT erhaltenen Benutzeridentitätsinformationen proxyiert werden, JWT-Ansprüche protokolliert werden und mehrere Identitätsanbieter unterstützt werden.

Um die native JWT-Unterstützung in NGINX Plus zu erkunden, starten Sie noch heute Ihre kostenlose 30-Tage-Testversion oder kontaktieren Sie uns .

Anhang – Erstellen einer Google OAuth 2.0-Client-ID

[ Herausgeber – Wir haben alle Anstrengungen unternommen, um die GUI der Google APIs zum Zeitpunkt der Veröffentlichung genau darzustellen, die GUI ist jedoch hochdynamisch und Menüoptionen und -positionen können sich ändern. Verwenden Sie diese Anweisungen als Referenz und passen Sie sie bei Bedarf an die aktuelle GUI an.]

1. Greifen Sie unter https://console.developers.google.com/apis/dashboard auf das Google APIs-Dashboard zu.

   Die geöffnete Seite hängt von Ihrem Verlauf mit Google APIs ab. Möglicherweise müssen Sie ein Konto erstellen, Nutzungsbedingungen akzeptieren und andere Schritte ausführen, die in dieser Anleitung nicht gezeigt werden.

   Der folgende Screenshot zeigt die obere linke Ecke des Dashboards. Klicken Sie auf das Wort rechts neben dem Google APIs -Logo (wenn Sie zuvor ein Projekt erstellt haben, wird möglicherweise dessen Name anstelle des Wortes „Projekt“ angezeigt). Wählen Sie Projekt erstellen aus.

   

    

2. Erstellen Sie ein neues Projekt. Hier heißt unser neues Projekt NGINX OpenID . Nachdem Sie auf die Schaltfläche „Erstellen“ geklickt haben, kann es einige Sekunden dauern, bis eine Benachrichtigung angezeigt wird, die angibt, dass Ihr Projekt erstellt wurde.

   

    

3. Aktivieren Sie die Google+ API für Ihr Projekt. Es bietet OAuth 2.0-Authentifizierungs- und Identitätsdienste.

   (Wenn das API Manager-Dashboard nicht bereits im Hauptteil des Fensters angezeigt wird, klicken Sie im Navigationsbereich links auf dem Bildschirm auf Dashboard .)

   Der erste Schritt zum Aktivieren der Google+ API besteht darin, auf die Schaltfläche „API AKTIVIEREN“ zu klicken.

   

    

4. Klicken Sie auf Google+ API (im Abschnitt „Social APIs“ ).

   

    

5. Klicken Sie auf die Schaltfläche AKTIVIEREN .

   

    

6. Um Anmeldeinformationen für Ihr Projekt zu erstellen, klicken Sie im Navigationsbereich links auf dem Bildschirm auf „Anmeldeinformationen“ und dann auf die Schaltfläche „Anmeldeinformationen erstellen“ .

   Wählen Sie im Dropdownmenü die OAuth-Client-ID aus.

   

    

7. Wählen Sie das Optionsfeld „Webanwendung“ aus. Geben Sie im Feld „ Autorisierte JavaScript-Ursprünge“ die URL für den Host an, auf dem NGINX Plus installiert ist, und die Portnummer, die Sie als Parameter für die Listen- Direktive unter „Aktivieren von OpenID Connect für Ihre Webanwendung“ angegeben haben (z. B. mydomain.example.com:80 ). Dieses Beispiel verwendet localhost, aber Ihr Eintrag muss der Hostname und der Port der tatsächlichen NGINX Plus-Instanz sein.

   Klicken Sie auf die Schaltfläche „Erstellen“ (möglicherweise müssen Sie mehr als einmal darauf klicken, um den Erstellungsprozess zu starten).

   

    

8. Das OAuth-Clientfenster wird angezeigt, um Ihre Client-ID und Ihr Client-Geheimnis zu melden. Kopieren Sie die Client-ID in die Inhalt Attribut des <meta name="google-signin-client_id"> Tag in Ihrer App (ersetzen Sie das hervorgehobene Kunden-ID Platzhalter, der oben angezeigt wird). Sie benötigen das Client-Geheimnis nicht.

   

    

9. Klicken Sie auf dem Hauptbildschirm „Anmeldeinformationen“ auf „OAuth-Zustimmungsbildschirm“ . Geben Sie Ihre E-Mail-Adresse und einen Produktnamen an (alle anderen Felder sind optional).

   

    

Kehren Sie zum Abschnitt über das Erstellen einer Beispielanwendung zurück, die die Anmeldeinformationen verwendet

Um die native JWT-Unterstützung in NGINX Plus zu erkunden, starten Sie noch heute Ihre kostenlose 30-Tage-Testversion oder kontaktieren Sie uns .