Neben der Optimierung der UX Ihrer App bietet SSO auch andere Vorteile. Ein Passwort oder Konto für mehrere Anwendungen begrenzt die Anzahl der Schwachstellen im System, erhöht die Sicherheit und erleichtert registrierten Benutzern das Merken ihrer Anmeldeinformationen. Es ist erwiesen, dass Menschen schreckliche Fähigkeiten im Umgang mit Passwörtern haben und normalerweise dasselbe Passwort für mehrere Konten verwenden (eine sehr schlechte Idee).

In diesem Blog zeige ich Ihnen, wie Sie eine Anmeldung mit Google SSO zu jedem Mendix App in nur wenigen Minuten mit dem OIDC-Marktplatzmodul(Einmaliges Anmelden mit OpenID Connect)

Was brauchen wir?

Bevor wir beginnen, prüfen Sie kurz, ob Sie alles haben, was Sie brauchen. Stellen Sie sicher, dass Sie ein Google Cloud Platform-Konto erstellt haben.

Sie benötigen außerdem einige Marketplace-Module für Ihre Mendix App:

• Gemeinschafts-Commons
• Verschlüsselung
• Nanoflow Commons
• OIDC-Modul

Erste Schritte

Auf dem Google Cloud-Konsole, gehen Sie zu Ihrer Projektübersicht, die so aussieht.

Klicken Sie hier, um ein zu erstellen neues Projekt, geben Sie ihm einen Namen (das kann beliebig sein) und klicken Sie dann auf Erschaffung

Öffnen Sie Ihr Projekt und suchen Sie im Dashboard in der Suchleiste oben auf der Seite nach „OAUTH Consent Screen“.

Wählen Sie bei Benutzertyp „Extern“ (dadurch kann jeder Benutzer mit einem Google-Konto ein Konto erstellen und auf Ihre App zugreifen. Klicken Sie auf „Erstellen“, um fortzufahren. Füllen Sie auf der nächsten Seite alle erforderlichen Angaben mit Ihren eigenen Informationen aus, wie unten gezeigt).

Auf dem nächsten Bildschirm „Bereiche“ müssen Sie nichts ausfüllen. Klicken Sie einfach unten auf dem Bildschirm auf Speichern und fortfahren.

Auf dem letzten Bildschirm mit dem Titel „Testbenutzer“ können Sie eine Liste von Benutzern angeben, denen der Zugriff auf die App gestattet ist, während sie sich noch im Test befindet. Während Ihre App noch in der Entwicklung ist, ist dies im Allgemeinen nicht erforderlich, es sei denn, Sie benötigen mehr als 100 Testbenutzer (da dies die Grenze ist). Entscheiden Sie, ob Sie Benutzer angeben müssen oder nicht, und klicken Sie auf Speichern und fortfahrene am unteren Bildschirmrand, um fortzufahren.

Nun können wir zur Seite mit den Anmeldeinformationen navigieren (im linken Menü) und auf Anmeldeinformationen erstellen klicken. Wählen Sie aus der angezeigten Dropdown-Liste OAuth ClientID aus.

Wählen Sie auf der nächsten Seite Ihren Anwendungstyp aus. In meinem Fall habe ich „Webanwendung“ ausgewählt.

Geben Sie Ihrem Client einen Namen und fügen Sie 2 „Autorisierte Umleitungs-URIs“ hinzu. Die erste ist die Cloud-URL Ihrer App (kostenlose App-URL oder eine beliebige Cloud-URL) und die zweite ist Ihr lokaler Host. Wir fügen die Option „Lokaler Host“ hinzu, damit wir dies lokal testen können. Denken Sie daran, „/oauth/v2/callback“ am Ende jeder App-Umleitungs-URL hinzuzufügen. Klicken Sie auf Erschaffung wenn du fertig bist.

Fertig! Denken Sie daran, Ihre Client-ID und Ihr Client-Geheimnis an einem sicheren Ort zu speichern, damit Sie später darauf zurückgreifen können.

In Studio Pro

Jetzt für die Mendix Abschnitt dieses Builds! Um sicherzustellen, dass anonyme Benutzer auf die erforderlichen Seiten zugreifen können, müssen wir sicherstellen, dass unsere App so konfiguriert ist, dass die Sicherheit aktiviert ist und auch anonymen Benutzern der Zugriff gestattet wird. Dafür benötigen wir eine Gastbenutzerrolle, die wir als anonymen Benutzer auswählen können.

Stellen Sie außerdem sicher, dass Ihre Gastbenutzerrolle dem OIDC-Modul als anonyme Modulrolle zugewiesen ist und dass dem Administrator die Administratorbenutzerrolle für dasselbe OIDC-Modul zugewiesen sein muss.

Nachdem wir nun Sicherheit und Benutzerrollen eingerichtet haben, müssen wir dem Benutzer auch erlauben, die Anmeldeseite zu erreichen. Gehen Sie zur Navigation Ihres Projekts und fügen Sie eine rollenbasierte Homepage für Gäste hinzu. Dazu können Sie die vom OIDC-Modul bereitgestellte Seite „OIDC.Login_Web_Button“ auswählen. Stellen Sie auch eine rollenbasierte Homepage für den Benutzer bereit.

Schließlich müssen wir dem Administrator den Zugriff auf die SSO-Client-Anmeldeinformationen und deren Konfiguration ermöglichen. Auch hier gibt es im ODIC-Modul bereits eine Seite mit dem Namen „OIDC_Client_Overview“. Fügen Sie diese zu Ihrer Navigation hinzu und stellen Sie sicher, dass sie für den Administrator Ihrer App erreichbar ist.

Führen Sie Ihre App lokal aus und melden Sie sich als Administrator an. Ich habe das Demo-Umschalt-Widget verwendet, um mich hier einfach anzumelden. Navigieren Sie als Nächstes zur OIDC-Client-Übersichtsseite. Klicken Sie auf „Neu“, um eine neue Konfiguration zu erstellen.

Geben Sie als Alias ​​den Namen Ihrer Wahl ein. Ich habe es einfach Google genannt.

Geben Sie Ihre Client-ID ein und setzen Sie den Status auf Aktiv. Am wichtigsten ist, dass Sie die automatische Konfigurations-URL für Google hinzufügen (https://accounts.google.com/.well-known/openid-configuration) und klicken Sie auf „Konfiguration importieren“. Dadurch werden die restlichen erforderlichen Felder automatisch ausgefüllt. Diese URL ist spezifisch für Google, andere Anbieter haben ihre eigene Version. Stellen Sie daher sicher, dass Sie die richtige Import-URL für den von Ihnen verwendeten Anbieter haben.

Der letzte Schritt besteht darin, Ihre Bereiche auszuwählen. Dabei handelt es sich um die Eigenschaften, die der Client über Ihren Benutzer bereitstellt. Achten Sie darauf, OpenID, E-Mail und Profil auszuwählen (im Profil werden die meisten Informationen Ihres Benutzers gespeichert).

Testen des Logins

Wenn ein Gastbenutzer auf Ihre Website gelangt, wird ihm nun die folgende Seite angezeigt. Der Benutzer sollte auf „Über SSO anmelden“ klicken.

Als Nächstes wird dieser Bildschirm angezeigt, auf dem der Benutzer aufgefordert wird, das Google-Konto auszuwählen, mit dem er sich anmelden möchte.

Wenn Ihre Konfiguration erfolgreich ist, sollte der Benutzer als authentifizierter Benutzer auf der Startseite landen. Um sicherzustellen, dass dieses Setup funktioniert, habe ich der Startseite eine Datenansicht hinzugefügt, die das Konto des angemeldeten Benutzers zurückgibt, und ich habe das Attribut $Account/FullName mithilfe einer Beschriftung angezeigt.

Eine letzte Sache

Obwohl ich mich in diesem Blog auf die Verwendung von Google als SSO-Client konzentriert habe, ist es wichtig, daran zu denken, dass dieses Modul auch andere Plattformen wie Salesforce und Microsoft unterstützen kann, dieses Setup aber für jeden OIDC-kompatiblen Client funktionieren sollte. Schließlich funktioniert dieses Modul auch in Native Mobile, also viel Spaß beim Experimentieren und Ausprobieren neuer Implementierungen!

Besonderer Dank geht an Eric Tieniber, dem Ersteller dieses Marketplace-Moduls, und für seine Hilfe beim Verfassen dieses Artikels!