Anmeldung mit Google-Konto auf eigener Website (Google Login)

Wenn Sie eine benutzerfreundliche Möglichkeit zur Anmeldung mit dem Google-Konto auf Ihrer Website bieten möchten, ist die JavaScript-Client-Bibliothek die beste Option. Sie können das Google-Login ohne Seitenaktualisierung mit Hilfe der JavaScript OAuth-Bibliothek integrieren. Der Google JavaScript API-Client hilft dem Benutzer, sich mit seinem Google-Konto auf der Website anzumelden.

In diesem Tutorial zeige Ich Ihnen, wie Sie die Anmeldung mit Hilfe der JavaScript API in Ihr Google-Konto integrieren und die Profildaten mit jQuery, Ajax, PHP und MySQL in der Datenbank speichern.

Neues Google API Projekt erstellen

Bevor Sie mit der Integration der Google-Anmeldung in der Website beginnen, erstellen Sie ein Google API-Projekt zur Generierung der Client-ID. Die Client-ID ist erforderlich, um die Google Sign-In JavaScript-API aufzurufen.

Um das Google Projekt und die Client-ID zu erstellen, führen Sie die folgenden Schritte aus.

1. Gehen Sie zur Google API Console.
   
2. Wenn Sie noch kein Google-API-Projekt erstellt haben, klicken Sie auf NEUES PROJEKT, um ein neues Projekt zu erstellen. Andernfalls wählen Sie ein Projekt aus der Projektliste aus.
3. Wenn Sie das NEUE PROJEKT auswählen, werden Sie auf die Seite zur Projekterstellung weitergeleitet.
   1. Geben Sie einen Projektnamen ein.
   2. Eine Projekt-ID wird Ihrem neuen Projekt automatisch zugewiesen. Wenn Sie diese ID ändern möchten, klicken Sie auf den Link Bearbeiten unter dem Feld Projektname.
   3. Klicken Sie auf ERSTELLEN
4. Das Projekt wurde erstellt und Sie wurden auf das Projekt-Dashboard umgeleitet.
5. Wählen Sie im linken Navigationsbereich unter dem Abschnitt APIs & Dienste die Option Anmeldedaten aus.
6. Wechseln Sie zur Registerkarte OAuth-Zustimmungsbildschirm:
   1. Geben Sie den Namen der Anwendung im Feld Anwendungsname an.
   2. Wählen Sie eine E-Mail-Adresse in der Support-E-Mail-Datei aus.
   3. Geben Sie im Feld Autorisierte Domains die Domänen an, die mit OAuth authentifiziert werden dürfen. (In unserem Beispiel „canditature.azurewebsites.net“)
   4. Klicken Sie auf Speichern.
7. Wechseln Sie zur Registerkarte Anmeldedaten, klicken Sie auf die Dropdown-Liste Anmeldedaten erstellen und wählen Sie OAuth-Client-ID:
   1. Wählen Sie im Abschnitt Anwendungstyp die Option Web Applikation.
   2. Geben Sie im Feld Autorisierte JavaScript-Quellen die Ursprungs-URLs ein (In unserem Beispiel „https:// canditature.azurewebsites.net“)
   3. Geben Sie im Feld Autorisierte Weiterleitungs-URIs die Weiterleitungs-URIs ein. (In unserem Beispiel „https://canditature.azurewebsites.net/google-login“ – nur für das Login-Skript)
   4. Klicken Sie anschließend auf Speichern.

Es erscheint ein Dialogfenster mit OAuth-Client-Details (Client-ID und Client-Secret). Kopieren Sie die Client-ID und das Client-Secret, die für den Zugriff auf die APIs benötigt werden.

Google-Anmeldung mit JavaScript-API

Da der Beispielcode die JavaScript-API verwendet, ist nur eine Seite (index.html) erforderlich, um eine Anmeldung mit dem Google-Konto ohne Aktualisierung der Seite hinzuzufügen.

Wir verwenden jQuery und Ajax, um die Profilinformationen des Benutzers an das serverseitige Skript zu senden und die Kontodaten in die MySQL-Datenbank einzufügen.

Laden Sie die jQuery-Bibliothek am Anfang.

Laden der Google Platform Library – Fügen Sie die Google Platform API Library hinzu und geben Sie das Onload-Ereignis in der Abfragezeichenkette an, um die Anmelde-Schaltfläche anzuzeigen.

Geben Sie die App Client ID an – Fügen Sie das Meta-Element google-signin-client_id hinzu und geben Sie die Client ID Ihres Google-Projekts an, das in der Google API-Konsole erstellt wurde.

Der folgende Code übernimmt den Anmeldevorgang mit der Google JavaScript API. Wir erstellen dazu eine weitere JavaScript Datei (In unserem Beispiel „googleLogin.js“ im Webverzeichnis „js“) um die Funktionen auf unserer Website einzubinden. Anschließend laden wir den Code in unserer index.html.

JavaScript Code:

Zum Inhalt der googleLogin.js Datei:

• renderButton() – Erstellt eine Google Anmeldeschaltfläche mit benutzerdefinierten Einstellungen. Geben Sie die Elementnummer (gSignIn) an, die der Anmelde-Button darstellen soll.
• onSuccess() – Die Callback-Funktion, die von signin2.render() aufgerufen wird, wenn sich ein Benutzer erfolgreich anmeldet.
  • Lädt die auth2-Bibliothek und lädt die Profildaten von Google.
  • Zeigt die Benutzerkontoinformationen auf der Webseite an.
• onFailure() – Die Callback-Funktion, die von signin2.render() aufgerufen wird, wenn ein Benutzer nicht angemeldet wird.
• signOut() – Weist den Benutzer aus dem Google-Konto aus.
  • auth2.signOut() Methode wird verwendet, um nach dem Sing-Out-Prozess zu handeln.
  • disconnect() Methode wird verwendet, um den Benutzer von seinem Google-Konto zusammen mit der OAuth App abzumelden.
• saveUserData() – Sendet die Kontodaten des Benutzers mit der Methode jQuery post() an das serverseitige Skript (googleUserData.php).

HTML Code:

Der folgende HTML-Code zeigt die Google Sign-In-Schaltfläche und die Kontoinformationen des Benutzers auf der Webseite an.