So fügen Sie One-Click-Login mit Google in WordPress hinzu

Die Ein-Klick-Google-Anmeldung ermöglicht es Besuchern, sich mit einem Konto, das sie bereits haben, auf Ihrer Website anzumelden oder zu registrieren. Anstatt einen weiteren Benutzernamen und ein weiteres Passwort zu erstellen, können sie mit einem einzigen Klick auf Ihre Inhalte oder Ihren Online-Shop zugreifen.

Wir haben festgestellt, dass Benutzer diese Art von Einfachheit schätzen. Die Bereitstellung der Google-Anmeldung macht den Prozess nicht nur schneller und einfacher, sondern kann auch die Benutzererfahrung verbessern, Konversionen steigern und Warenkorbabbrüche reduzieren.

In dieser Schritt-für-Schritt-Anleitung zeigen wir Ihnen, wie Sie Ihrer WordPress-Website eine Ein-Klick-Google-Anmeldung hinzufügen, um den gesamten Benutzerweg zu optimieren. 🚀

Warum die Ein-Klick-Google-Anmeldung in WordPress hinzufügen?

Die Ein-Klick-Google-Anmeldung ermöglicht es Benutzern, sich sofort mit ihrem Google-Konto auf Ihrer WordPress-Website anzumelden. Das bedeutet, dass sie sich nicht jedes Mal ihren Benutzernamen und ihr Passwort merken oder eingeben müssen.

Diese Funktion kann die Anmeldung für Sie und Ihre Benutzer schneller und einfacher machen. Hier sind einige Situationen, in denen sie besonders hilfreich sein kann:

• Teams, die Google Workspace verwenden: Teammitglieder können sich mit ihren geschäftlichen Google-Konten anmelden, anstatt separate WordPress-Anmeldedaten zu erstellen.
• Websites mit mehreren Autoren: Autoren und Redakteure können schnell auf das Dashboard zugreifen, ohne zusätzliche Passwörter verwalten zu müssen.
• Mitgliederseiten: Mitglieder können sich schneller anmelden, was die allgemeine Benutzererfahrung verbessert.
• Online-Kurs Websites: Schüler können sich einfach anmelden und ohne Probleme auf ihre Lernmaterialien zugreifen.

Wenn Sie einen einfachen persönlichen Blog mit sehr wenigen Benutzern betreiben, benötigen Sie diese Funktion möglicherweise nicht. Aber für Websites, auf denen sich Personen regelmäßig anmelden, kann die Ein-Klick-Google-Anmeldung den Prozess wesentlich bequemer gestalten.

Nun wollen wir sehen, wie Sie die Ein-Klick-Google-Anmeldung einfach zu Ihrer WordPress-Website hinzufügen.

So fügen Sie die Google-Anmeldung mit einem Klick in WordPress hinzu

Zuerst müssen Sie das Plugin Nextend Social Login and Register installieren und aktivieren. Weitere Details finden Sie in unserem Leitfaden für Anfänger zur Installation eines WordPress-Plugins.

Für dieses Tutorial verwenden wir das kostenlose Plugin, das die Anmeldung über Google, Twitter und Facebook unterstützt. Es gibt auch eine kostenpflichtige Version von Nextend Social Login, die Social Login für viele verschiedene Websites hinzufügt, darunter PayPal, Slack und TikTok.

Nach der Aktivierung müssen Sie in den WordPress-Adminbereich unter Einstellungen » Nextend Social Login wechseln. Auf diesem Bildschirm sehen Sie die verschiedenen verfügbaren Social-Login-Optionen.

Um einen Google-Login zu Ihrer WordPress-Website hinzuzufügen, müssen Sie unter dem Google-Logo auf die Schaltfläche „Erste Schritte“ klicken.

Hier sehen Sie, dass Ihr erster Schritt darin besteht, eine Google-App zu erstellen.

Das Erstellen einer Google-App klingt technisch, aber keine Sorge. Sie müssen keinen Code kennen, und wir führen Sie durch alle Schritte.

Eine Google-App erstellen

Um diese App zu erstellen, müssen Sie zwischen Ihrem WordPress-Dashboard und der Google Cloud Console wechseln. Es ist ratsam, Ihr WordPress-Dashboard in der aktuellen Registerkarte geöffnet zu lassen und eine neue Browserregisterkarte zu öffnen.

Klicken Sie als Nächstes im oberen Menü auf  ‘Projekt auswählen’ . Es öffnet sich ein Popup, in dem Sie auf die Schaltfläche  ‘Neues Projekt’ klicken müssen, um fortzufahren.

Dies öffnet die Seite „Neues Projekt“. Sie müssen einen Projektnamen hinzufügen und den Standort auswählen. Der Projektname kann beliebig sein, z. B. „Google-Anmeldung“.

Wenn Sie sich mit einem Google Workspace-Konto angemeldet haben, wird der Standort automatisch mit dem Namen Ihrer Organisation gefüllt. Wenn nicht, sollten Sie ihn als „Keine Organisation“ belassen.

Klicken Sie dann auf die Schaltfläche „Erstellen“, um fortzufahren.

Sie werden nun zum Dashboard „APIs & Dienste“ weitergeleitet. Auf dieser Seite müssen Sie im linken Menü auf „OAuth-Zustimmungsbildschirm“ klicken.

Hier müssen Sie den Typ des Benutzers auswählen, dem Sie die Anmeldung erlauben möchten.

Wählen Sie 'Intern', wenn sich nur Benutzer mit dem Google-Konto Ihrer Organisation anmelden. Alternativ sollten Sie 'Extern' wählen, wenn Ihre Benutzer E-Mail-Adressen außerhalb Ihrer Organisation haben.

Zum Beispiel jeder mit einem @gmail.com-Konto im Gegensatz zu einer @ihrefirmenemail.com-Adresse.

Wenn Sie bereit sind fortzufahren, klicken Sie auf die Schaltfläche „Erstellen“. Jetzt können Sie mit der Eingabe von Informationen zu Ihrer App beginnen.

Zuerst sollten Sie Ihren Geschäftsnamen in das Feld „App-Name“ eingeben. Dies wird dem Benutzer beim Anmelden angezeigt, z. B. „Smith Training Services möchte Zugriff auf Ihr Google-Konto.“

Sie müssen auch die E-Mail-Adresse hinzufügen, mit der Sie sich bei Google angemeldet haben. Diese E-Mail wird auf dem Zustimmungsbildschirm angezeigt und ermöglicht es Ihren Benutzern, Fragen zum Google-Anmeldebildschirm zu stellen.

Wenn Sie dies getan haben, scrollen Sie nach unten zum Abschnitt „App-Domain“. Hier müssen Sie Links zur Homepage Ihrer Website, zur Seite Datenschutzrichtlinie und zur Seite Nutzungsbedingungen hinzufügen.

Klicken Sie dann auf die Schaltfläche „Domain hinzufügen“, um den Domainnamen Ihrer Website hinzuzufügen, z. B. „example.com“.

Wenn Sie die Ein-Klick-Google-Anmeldung für mehr als eine Website hinzufügen möchten, können Sie auf die Schaltfläche '+ Domäne hinzufügen' klicken, um eine weitere Domäne hinzuzufügen.

Schließlich müssen Sie eine oder mehrere E-Mail-Adressen hinzufügen, damit Google Sie über Änderungen an Ihrem Projekt informieren kann.

Wenn Sie fertig sind, stellen Sie sicher, dass Sie auf die Schaltfläche ‘Speichern und fortfahren’ klicken.

Als Nächstes gelangen Sie zu den Seiten „Bereiche“ und „Testbenutzer“. Scrollen Sie auf beiden Seiten einfach nach unten und klicken Sie auf die Schaltfläche „Speichern und fortfahren“.

Die letzte Seite dieses Schritts zeigt Ihnen eine Zusammenfassung Ihrer Einstellungen für den OAuth-Zustimmungsbildschirm.

Der nächste Schritt ist die Erstellung der Schlüssel, die Ihr Anmelde-Plugin benötigt, um eine Verbindung mit Google Cloud herzustellen.

Sie sollten im linken Menü auf ‘Anmeldeinformationen’ klicken und dann oben auf dem Bildschirm auf die Schaltfläche ‘+ Anmeldeinformationen erstellen’ klicken. Sie müssen die Option ‘OAuth-Client-ID’ auswählen.

Dies führt Sie zur Seite „OAuth-Client-ID erstellen“.

Sie sollten unter „Anwendungstyp“ die Option „Webanwendung“ auswählen.

Einige Einstellungen werden zur Seite hinzugefügt. Sie müssen nach unten zum Abschnitt „Autorisierte Weiterleitungs-URIs“ scrollen und auf die Schaltfläche „+ URI hinzufügen“ klicken.

Geben Sie nun die folgende URL in das Feld ein.

Es ist sehr wichtig, dass diese URL mit „https://“ beginnt, da Google eine sichere Verbindung benötigt, damit diese Funktion korrekt funktioniert.

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

Stellen Sie einfach sicher, dass Sie „example.com“ durch den Domainnamen Ihrer eigenen Website ersetzen.

Sobald Sie dies getan haben, sollten Sie auf die Schaltfläche „Erstellen“ klicken, um die Einstellungen zu speichern. Es kann 5 Minuten bis einige Stunden dauern, bis die Einstellungen wirksam werden.

Ihr OAuth-Client wurde nun erstellt!

Sie sehen ein Popup mit „Ihre Client-ID“ und „Ihr Client-Geheimnis“. Sie müssen diese Schlüssel auf der Einstellungsseite des Plugins in Ihrem WordPress-Adminbereich einfügen.

Sie können einfach auf das 'Kopieren'-Symbol rechts klicken, um die Schlüssel einzeln zu kopieren.

Hinzufügen Ihrer Google-Schlüssel zu Ihrem Plugin

Wechseln Sie nun einfach zurück zum Browser-Tab Ihrer Website und klicken Sie unter Einstellungen » Nextend Social Login auf den Tab „Einstellungen“. Hier sehen Sie 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 Felder einfügen.

Wenn Sie dies getan haben, stellen Sie sicher, dass Sie auf die Schaltfläche „Änderungen speichern“ klicken, um Ihre Einstellungen zu speichern.

Nun müssen Sie testen, ob die Einstellungen korrekt funktionieren. Dies ist wichtig, da Sie nicht möchten, dass echte Benutzer Fehler auftreten, wenn sie sich auf Ihrer Website anmelden.

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

Wenn Sie die Schritte korrekt befolgt haben, sollten Sie eine Benachrichtigung sehen, die besagt: ‘Funktioniert einwandfrei – Deaktiviert.’

Diese Meldung mag verwirrend erscheinen, ist aber eigentlich eine gute Nachricht. ‘Funktioniert einwandfrei’ bestätigt, dass Ihre Einstellungen korrekt sind und die Verbindung zu Google erfolgreich ist.

‘Deaktiviert’ bedeutet einfach, dass der Login-Button auf Ihrer Website noch nicht aktiv ist.

Sie können nun auf die Schaltfläche „Aktivieren“ klicken, um die Google-Anmeldung für Ihre Benutzer live zu schalten.

Sobald Sie dies tun, erscheint eine Meldung, die bestätigt, dass der Google-Login jetzt aktiviert ist.

Auswahl Ihres Button-Stils und Ihrer Beschriftungen

Der Standard-Button-Stil und das Standard-Label von Nextend sind ziemlich Standard und funktionieren für die meisten Websites. Sie können sie jedoch anpassen, indem Sie oben auf dem Bildschirm auf die Registerkarte „Buttons“ klicken.

Sie sehen nun alle verschiedenen Stile, die für die Schaltfläche zur sozialen Anmeldung verfügbar sind. Um einen anderen Stil zu verwenden, klicken Sie einfach auf das Optionsfeld, um ihn auszuwählen.

Sobald Sie dies getan haben, können Sie auch den Text der Schaltfläche ändern, indem Sie den Text im Feld 'Anmeldebezeichnung' bearbeiten.

Wenn Sie möchten, können Sie die Anmeldebezeichnung mit HTML grundlegend formatieren. Zum Beispiel können Sie Text mit <b> und </b> Tags fett formatieren.

Sie können auch die Felder 'Link-Beschriftung' und 'Entfernungsbeschriftung' bearbeiten, die es Benutzern ermöglichen, Ihre Website mit ihren Google-Konten zu verknüpfen und zu entknüpfen.

Wenn Sie den Login-Button in anderen Bereichen Ihrer Website platzieren möchten, z. B. in einem Sidebar-Widget oder auf einer bestimmten Seite, können Sie dies ganz einfach mit den Shortcodes des Plugins tun.

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

Ihre Google-App aus dem Testmodus nehmen

Nun gibt es noch eine letzte Sache, die Sie im Google Cloud-Browser-Tab tun müssen. Sie sollten immer noch das Popup mit Ihrer Client-ID und Ihrem Client-Geheimnis sehen. Sie können das Popup schließen, indem Sie unten auf „OK“ klicken.

Als Nächstes müssen Sie im linken Menü auf ‘OAuth-Zustimmungsbildschirm’ klicken.

Sie sehen, dass Ihre Google-App im Modus „Testen“ ist. Dies ermöglicht es Ihnen, Ihre App mit einer begrenzten Anzahl von Benutzern zu testen. Nachdem Sie bei der Überprüfung der Einstellungen mit dem Plugin eine Benachrichtigung „Funktioniert gut“ erhalten haben, können Sie sie in den Modus „Produktion“ versetzen.

Dies tun Sie, indem Sie auf die Schaltfläche „App veröffentlichen“ klicken. Als Nächstes sehen Sie ein Popup mit dem Titel „In Produktion verschieben?“

Klicken Sie einfach auf „Bestätigen“, um jedem die Nutzung eines einstufigen Google-Logins auf Ihrer Website zu ermöglichen.

Wenn Sie dieser Anleitung sorgfältig gefolgt sind, sollte der Verifizierungsstatus für die meisten grundlegenden Setups jetzt „Verifizierung nicht erforderlich“ lauten.

Ihre App funktioniert jetzt mit allen Google-Nutzern.

Wenn sich Benutzer jetzt auf Ihrer Website anmelden, haben sie die Option, sich mit Google anzumelden.

Sie können sich jedoch, wenn sie es bevorzugen, weiterhin mit ihrem Standard-WordPress-Benutzernamen und -Passwort anmelden.

Hier ist, wie der Google-Login für Ihre Besucher funktioniert.

Neue Besucher können den Button verwenden, um sich sofort für ein Konto auf Ihrer Website zu registrieren. Bestehende Benutzer können den Button verwenden, um sich anzumelden, solange ihre Konto-E-Mail-Adresse mit ihrer Google-E-Mail-Adresse übereinstimmt.

Wenn Sie den Google-Anmeldebutton irgendwo anders auf Ihrer Website hinzufügen möchten, können Sie dies mit einem Shortcode tun. Weitere Informationen finden Sie im Tab „Verwendung“ von Nextend.

Häufig gestellte Fragen zum Google-Login

Hier ist eine Liste einiger Fragen, die unsere Leser häufig zum Hinzufügen der Google-Anmeldung zu ihrer Website stellen.

Ist das Hinzufügen des Google-Logins zu meiner WordPress-Website sicher?

Ja, es ist sehr sicher. Der Prozess verwendet das Standardprotokoll OAuth 2.0 von Google. Das bedeutet, dass Ihre Website niemals das Google-Passwort des Benutzers verarbeitet oder speichert, wodurch sichergestellt wird, dass seine Anmeldedaten sicher bleiben.

Ihre Website erhält nur ein sicheres Token von Google, um die Identität des Benutzers zu überprüfen.

Kann ich Anmeldeoptionen für andere Social-Media-Plattformen hinzufügen?

Absolut. Das kostenlose Plugin Nextend Social Login unterstützt auch Facebook und Twitter. Wenn Sie auf die kostenpflichtige Version upgraden, können Sie viele weitere Plattformen wie LinkedIn, PayPal, Slack und TikTok hinzufügen.

Was ist, wenn ein Besucher kein Google-Konto hat?

Das Standard-WordPress-Login-Formular bleibt voll funktionsfähig. Das Hinzufügen eines Google-Login-Buttons bietet eine zusätzliche, bequeme Option, entfernt aber nicht die Standardfelder für Benutzername und Passwort.

Wird diese Funktion meine Website verlangsamen?

Nein, sollte es nicht. Das Nextend Social Login Plugin ist leichtgewichtig und für die Leistung optimiert. Der Authentifizierungsprozess findet auf den schnellen Servern von Google statt, sodass er keine spürbaren Auswirkungen auf die Geschwindigkeit Ihrer Website hat.

Funktioniert der Google-Login mit WooCommerce oder Mitgliedschaftsseiten?

Ja, es funktioniert gut mit beliebten E-Commerce- und Mitglieder-Plugins. Die Vereinfachung des Checkout- und Registrierungsprozesses kann dazu beitragen, den Warenkorbabbruch für WooCommerce-Shops zu reduzieren und die Anmeldungen auf Websites zu erhöhen, die Plugins wie MemberPress verwenden.

Zusätzliche Ressourcen zum Anpassen Ihrer Anmeldeseite

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie die Ein-Klick-Anmeldung mit Google in WordPress hinzufügen.

Möglicherweise möchten Sie auch andere Anleitungen zum Anpassen des Login-Erlebnisses auf Ihrer Website ansehen:

• So fügen Sie 'Anmelden mit Facebook' in WordPress hinzu
• So fügen Sie die soziale Anmeldung zu WordPress hinzu (Der einfache Weg)
• Beste WordPress-Login-Seiten-Plugins (sicher & anpassbar)
• So fügen Sie die passwortlose Anmeldung in WordPress mit Magic Links hinzu
• So fügen Sie die Anmeldung mit Telefonnummer über OTP in WordPress hinzu
• So erstellen Sie eine benutzerdefinierte WordPress-Anmeldeseite (ultimativer Leitfaden)
• Warum und wie Sie Anmeldeversuche in WordPress einschränken sollten
• So fügen Sie eine benutzerdefinierte Anmelde-URL in WordPress hinzu (Schritt für Schritt)
• CAPTCHA zum WordPress-Anmelde- und Registrierungsformular hinzufügen
• So erzwingen Sie die Anmeldung zum Anzeigen einer Seite in WordPress
• Anfängerleitfaden zum Hinzufügen der Zwei-Faktor-Authentifizierung in WordPress (kostenlose Methode)
• So beschränken Sie die Benutzeranmeldung auf ein Gerät in WordPress

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.