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 Aktivierung der Ein-Klick-Google-Anmeldung auf Ihrem WordPress-Login-Formular ermöglicht es Ihren Benutzern, Zeit zu sparen, indem sie sich schnell mit ihrem Google-Konto anmelden. Dies verhindert, dass sie jedes Mal ihre Anmeldedaten eingeben müssen.

Wenn Sie einen einfachen Blog betreiben, ist diese Funktion möglicherweise nicht nützlich.

Aber wenn Ihre Organisation Google Workspace für professionelle Geschäftsemail-Adressen nutzt, können Ihre Teammitglieder die Google Apps-Konten Ihrer Organisation für die Anmeldung verwenden.

Eine Single-Sign-On-Funktion, wie die Google-Anmeldung mit einem Klick, ist auch für jede Website, auf der sich Benutzer anmelden müssen, sehr hilfreich, wie z. B. bei Multi-Author-Websites, Mitgliedschafts-Websites und Websites, die Online-Kurse verkaufen.

Erstellen Sie Ihr perfektes Benutzerregistrierungsformular

WPForms ist der beste Drag-and-Drop-Formularersteller für WordPress. Während Social Logins großartig sind, ermöglicht Ihnen WPForms, vollständig benutzerdefinierte Benutzerregistrierungsformulare zu erstellen, um genau die Informationen zu sammeln, die Sie von Ihren Benutzern benötigen.

Sie können auch Kontaktformulare, Zahlungsformulare, Umfragen und mehr in nur wenigen Minuten erstellen.

Starten Sie noch heute mit WPForms

Schauen wir uns nun an, wie Sie die Ein-Klick-Anmeldung mit Google ganz einfach zu Ihrer WordPress-Website hinzufügen können.

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

Zuerst müssen Sie das Nextend Social Login und Register -Plugin 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 Google-, Twitter- und Facebook-Login 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 Developers Console wechseln. Es ist ratsam, Ihr WordPress-Dashboard in der aktuellen Registerkarte geöffnet zu lassen und eine neue Browserregisterkarte zu öffnen.

Besuchen Sie jetzt die Website der Google Developers Console. Wenn Sie noch nicht angemeldet sind, werden Sie aufgefordert, sich mit Ihrem Google-Konto anzumelden.

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. Dies ermöglicht es Ihren Benutzern, Fragen zum Google-Anmeldebildschirm zu stellen.

Sobald Sie das getan haben, scrollen Sie nach unten zum Abschnitt „App-Domain“. Hier müssen Sie Links zur Homepage Ihrer Website, zur Seite mit der Datenschutzerklärung und zur Seite mit den 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 für diesen Schritt 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 nun „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-Login-Button an einer anderen Stelle 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 Nextend Social Login Plugin unterstützt auch Facebook und Twitter. Wenn Sie auf deren 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 hervorragend mit gängigen E-Commerce- und Mitgliedschafts-Plugins. Die Vereinfachung des Checkout- und Registrierungsprozesses kann dazu beitragen, Warenkorbabbrüche für WooCommerce-Shops zu reduzieren und 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.