So aktivieren Sie die Ein-Klick-Google-Anmeldung in WordPress

Wenn sich Ihre Benutzer mit ihrem Google-Konto anmelden können, müssen sie keinen anderen Benutzernamen und kein anderes Passwort festlegen, sich merken oder überwachen, um auf Ihre Website zuzugreifen. Ihre Zeit wird gespart und Ihre Konversionsraten steigen. In diesem Tutorial zeigen wir Ihnen, wie Sie ein One-Click-Google-Login in WordPress integrieren.

Warum Google Login in WordPress einbinden?

Viele Online-Nutzer verwenden weiterhin ihre Google-Konten. Dadurch können sie schnell auf Google-Produkte wie Gmail, Drive und Dokumente zugreifen, ohne sich für jedes einzeln anmelden zu müssen.

Wenn Sie die Ein-Klick-Google-Anmeldung auf Ihrer WordPress-Anmeldeseite aktivieren, können Ihre Benutzer dasselbe auf Ihrer Website tun. Benutzer können Zeit sparen, indem sie sich schnell mit ihrem Google-Konto anmelden. Dadurch entfällt für die Benutzer die Notwendigkeit, jedes Mal ihre Anmeldedaten einzugeben.

Wenn Sie nur einen einfachen WordPress-Blog haben, finden Sie diese Funktion möglicherweise nicht nützlich. Wenn Ihr Unternehmen jedoch Google Workspace für geschäftliche E-Mail-Adressen verwendet, können sich Ihre Teammitglieder mit den Google-Anwendungskonten Ihres Unternehmens anmelden.

Eine Single-Sign-On-Option, wie z. B. die Google-Anmeldung mit einem Klick, ist auch äußerst nützlich für alle Websites, bei denen sich Benutzer anmelden müssen, z. B. Websites mit mehreren Autoren, Mitglieder-Websites und Websites, die Online-Kurse verkaufen. Lassen Sie uns einen Blick darauf werfen, wie Sie Googles One-Click-Login einfach in Ihre WordPress-Website integrieren können.

Wie aktiviere ich die Ein-Klick-Google-Anmeldung in WordPress?

Laden Sie zunächst das Nextend Social Login and Registration Plugin herunter und installieren Sie es. Weitere Informationen finden Sie in unserem Leitfaden für Anfänger zur Installation eines WordPress-Plugins.

Für diese Lektion verwenden wir das kostenlose Plugin, das die Anmeldung bei Google, Twitter und Facebook ermöglicht. Nextend Social Login hat auch eine kommerzielle Version, die Social Login zu einer Vielzahl von Websites hinzufügt, darunter PayPal, Slack und TikTok.

Gehen Sie nach der Aktivierung im WordPress-Adminbereich zu Einstellungen » Nextend Social Login. Dieser Bildschirm zeigt die vielen verfügbaren Social-Login-Optionen an.

Klicken Sie unter dem Google-Logo auf die Schaltfläche „Erste Schritte“, um ein Google-Login zu Ihrer WordPress-Website hinzuzufügen. Wie Sie sehen können, besteht Ihr erster Schritt darin, eine Google-App zu entwickeln. Lassen Sie sich nicht von der Aussicht einschüchtern, eine Google-App zu erstellen.

Sie müssen keinen Code kennen, und wir führen Sie durch den gesamten Prozess.

Entwicklung einer Google-App

Sie müssen zwischen Ihrem WordPress-Dashboard und der Google Developers Console wechseln, um diese App zu erstellen. Es ist eine gute Idee, Ihr WordPress-Dashboard im aktuellen Browser-Tab geöffnet zu lassen, während Sie einen neuen öffnen.

Sie können jetzt auf die Seite der Google Developers Console zugreifen. Wenn Sie noch nicht eingeloggt sind, werden Sie dazu aufgefordert, Ihr Google-Konto zu verwenden.

Der nächste Schritt ist die Auswahl eines Projekts aus dem oberen Menü. Um fortzufahren, erscheint ein Popup und Sie müssen auf die Schaltfläche „Projekt erstellen“ klicken.

Dadurch gelangen Sie auf die Seite für neue Projekte. Sie müssen einen Projektnamen eingeben und einen Ort auswählen. Der Projektname kann beliebig sein, beispielsweise "Google Login".

Wenn Sie sich mit einem Google Workspace-Konto angemeldet haben, wird der Standort automatisch mit dem Namen Ihrer Organisation ausgefüllt. Wenn nicht, belassen Sie es einfach auf „Keine Organisation“.

Klicken Sie zum Fortfahren auf die Schaltfläche „Erstellen“. Sie werden jetzt zum Dashboard „APIs & Services“ weitergeleitet. Wählen Sie auf dieser Seite in der linken Option „OAuth-Zustimmungsbildschirm“ aus.

Hier wählen Sie den Personentyp aus, dem Sie die Anmeldung ermöglichen möchten.

Wählen Sie „Intern“, wenn sich nur Personen mit dem Google-Konto Ihres Unternehmens anmelden können. Wenn Ihre Benutzer E-Mail-Adressen außerhalb Ihrer Organisation haben, sollten Sie „Extern“ auswählen. Jemand hat beispielsweise ein @gmail.com-Konto im Gegensatz zu einer @yourcompanyemail.com-Adresse.

Wenn Sie fortfahren möchten, klicken Sie auf die Schaltfläche „Erstellen“. Sie können jetzt damit beginnen, Informationen zu Ihrer App hinzuzufügen.

Geben Sie zunächst Ihren Firmennamen in den App-Namensbereich ein. Beim Anmelden sieht der Benutzer so etwas wie „Smith Training Services fordert Zugriff auf Ihr Google-Konto an“.

Außerdem müssen Sie die E-Mail-Adresse angeben, mit der Sie sich bei Google angemeldet haben. Auf diese Weise können Ihre Benutzer den Google-Anmeldebildschirm abfragen.

Scrollen Sie danach nach unten zum Bereich „App-Domain“. Fügen Sie hier Links zur Homepage, zur Seite mit den Datenschutzrichtlinien und zur Seite mit den Nutzungsbedingungen Ihrer Website hinzu.

Klicken Sie dann auf die Option „Domain hinzufügen“, um den Domainnamen für Ihre Website einzugeben, z. B. „example.com“. Wenn Sie die Ein-Klick-Google-Anmeldung zu mehr als einer Website hinzufügen möchten, können Sie dies tun, indem Sie auf die Option „+ Domain hinzufügen“ klicken.

Schließlich müssen Sie eine oder mehrere E-Mail-Adressen eingeben, damit Google Sie über alle Änderungen an Ihrem Projekt auf dem Laufenden halten kann. Wenn Sie fertig sind, klicken Sie auf die Option „Speichern und fortfahren“.

Sie werden dann zu den Seiten Scopes und Test Users weitergeleitet. Scrollen Sie einfach zum Ende dieser beiden Seiten und klicken Sie auf die Option „Speichern und fortfahren“.

Die letzte Seite dieses Schritts bietet Ihnen eine Zusammenfassung Ihrer Einstellungen für den OAuth-Zustimmungsbildschirm. Der nächste Schritt besteht darin, die Schlüssel zu generieren, die Ihr Plug-in benötigt, um eine Verbindung zu Google Cloud herzustellen. Wählen Sie im linken Menü „Anmeldeinformationen“ und klicken Sie dann oben auf dem Bildschirm auf die Option „+ Anmeldeinformationen generieren“. Sie müssen die Option „OAuth-Client-ID“ auswählen.

Dadurch werden Sie auf die Seite „OAuth-Client-ID erstellen“ weitergeleitet. Wählen Sie „Webanwendung“ aus dem Dropdown-Menü „Anwendungstyp“.

Die Website wird mit einigen Einstellungen aktualisiert. Gehen Sie zum Bereich mit dem Titel „Autorisierte Weiterleitungs-URIs“ und klicken Sie auf die Schaltfläche „+ URI hinzufügen“.

Geben Sie nun die folgende URL ein:

http://example.com/wp-login.php?loginSocial=google

Achten Sie darauf, example.com durch die Adresse Ihrer eigenen Website zu ersetzen.

Danach sollten Sie auf die Schaltfläche „Erstellen“ klicken, um die Option zu speichern. Es kann zwischen fünf Minuten und vielen Stunden dauern, bis die Anpassung wirksam wird.

Ihr OAuth-Client wurde erfolgreich generiert!

Es erscheint ein Fenster mit „Ihre Kunden-ID“ und „Ihr Kundengeheimnis“. Diese Schlüssel müssen kopiert und in die Einstellungsseite des Plugins in Ihrem WordPress-Adminbereich eingefügt werden.

Klicken Sie einfach rechts auf das „Kopieren“-Symbol, um jeden Schlüssel einzeln zu kopieren.

Einschließen von Google Keys in Ihr Plugin

Kehren Sie nun zum Browser-Tab Ihrer Website zurück und wählen Sie im Menü Einstellungen » Nextend Social Login den Tab „Einstellungen“ aus. Hier gibt es Felder für die Client-ID und das Client-Geheimnis.

Sie müssen Ihre Schlüssel aus der Google Cloud Console kopieren und in diese Bereiche einfügen.

Stellen Sie danach sicher, dass Sie auf die Schaltfläche „Änderungen speichern“ klicken, um Ihre Einstellungen zu speichern.

Sie müssen jetzt überprüfen, ob die Einstellungen richtig sind. Dies ist wichtig, da Sie nicht möchten, dass echte Benutzer Schwierigkeiten bekommen, sich bei Ihrer Website anzumelden.

Klicken Sie einfach auf die Schaltfläche „Einstellungen überprüfen“, und das Plug-in stellt sicher, dass die von Ihnen eingerichtete Google-App funktioniert.

Wenn Sie die vorangegangenen Anweisungen korrekt ausgeführt haben, sollten Sie eine Meldung mit der Aufschrift „Funktioniert OK – Deaktiviert“ sehen.

Sie können jetzt beruhigt auf die Schaltfläche „Aktivieren“ klicken, damit Personen mit ihrer Google-ID einchecken können.

Es wird eine Benachrichtigung angezeigt, die bestätigt, dass die Google-Anmeldung jetzt aktiviert ist.

Auswählen eines Schaltflächenstils und einer Beschriftung

Der standardmäßige Schaltflächenstil und die Beschriftung in Nextend sind ziemlich konventionell und funktionieren für die meisten Websites. Sie können sie jedoch ändern, indem Sie oben auf dem Bildschirm auf die Option „Schaltflächen“ gehen.

Sie sehen nun alle verfügbaren Stile für die Social-Login-Schaltfläche. Um einen anderen Stil zu verwenden, wählen Sie nur sein Optionsfeld aus.

Danach können Sie die Schaltflächenbezeichnung ändern, indem Sie den Inhalt im Feld „Anmeldebezeichnung“ ändern.

Wenn Sie möchten, können Sie HTML verwenden, um dem Login-Label einige grundlegende Formatierungen hinzuzufügen. Beispielsweise können die Tags <b> und </b> verwendet werden, um Text fett darzustellen.

Sie können auch die Optionen „Label verbinden“ und „Label aufheben“ ändern, die es Nutzern ermöglichen, ihre Google-Konten mit Ihrer Website zu verbinden und zu trennen. Technische Benutzer können ihre eigene Google-Anmeldeschaltfläche erstellen, indem sie HTML-Code für Schaltflächen verwenden.

Um Ihre Einstellungen zu speichern, stellen Sie sicher, dass Sie auf die Option „Änderungen speichern“ klicken.

Entfernen Ihrer Google-App aus dem Testmodus

Zurück auf der Registerkarte des Google Cloud-Browsers müssen Sie noch etwas tun. Das Popup mit Ihrer Client-ID und Ihrem Client-Geheimnis sollte weiterhin sichtbar sein. Sie können das Popup schließen, indem Sie unten auf die Schaltfläche „OK“ klicken.

Sie müssen nun im linken Menü den „OAuth-Zustimmungsbildschirm“ auswählen.

Wie Sie sehen, befindet sich Ihre Google-App im Testmodus. Auf diese Weise können Sie Ihre App mit einer kleinen Gruppe von Personen testen. Sie können es jetzt in den Produktionsmodus verschieben, nachdem Sie ein „Works OK“-Signal erhalten haben, nachdem Sie die Einstellungen mit dem Plugin validiert haben.

Klicken Sie dazu auf die Schaltfläche „App veröffentlichen“. Anschließend erhalten Sie ein Popup mit dem Titel „Push to production?“.

Klicken Sie einfach auf "Bestätigen", um jedem zu erlauben, sich auf Ihrer Website mit einem Google-Login in einem Schritt anzumelden.

Wenn Sie diese Anweisung sorgfältig befolgt haben, sollte der Verifizierungsstatus jetzt „Verifizierung nicht erforderlich“ lauten.

Ihre App ist jetzt für alle Google-Nutzer zugänglich.

Wenn Benutzer Ihrer Website beitreten, haben sie jetzt die Möglichkeit, Google zu verwenden.

Sie können sich jedoch weiterhin mit ihrem üblichen WordPress-Benutzernamen und Passwort anmelden, wenn sie dies wünschen.

Denken Sie daran, dass sich Personen nur mit der Google-Kontoadresse anmelden können, die sie auf Ihrer Website verwendet haben. Wenn Sie die Benutzerregistrierung auf Ihrer WordPress-Site aktiviert haben, können sich Benutzer außerdem sofort mit einem Klick bei Google anmelden.

Wenn Sie den Google-Login-Button an anderer Stelle auf Ihrer Website platzieren möchten, können Sie dies mit einem Shortcode tun. Weitere Informationen finden Sie auf der Registerkarte „Nutzung“ von Nextend.

Einpacken

Die Integration eines One-Click-Google-Logins in Ihre WordPress-Website kann Ihren Benutzern Zeit sparen und die Konversionsraten verbessern. Dies ist besonders nützlich für Websites, bei denen sich Benutzer anmelden müssen, z. B. Websites mit mehreren Autoren, Mitgliedschaftswebsites und Websites, die Online-Kurse verkaufen. Um diese Funktion zu aktivieren, müssen Sie das Plug-in „Nextend Social Login and Registration“ herunterladen und installieren und eine Google-App erstellen, indem Sie die in diesem Tutorial beschriebenen Schritte ausführen. Mit der Ein-Klick-Google-Anmeldefunktion können sich Benutzer schnell mit ihrem Google-Konto anmelden, ohne jedes Mal ihre Anmeldedaten eingeben zu müssen.