Social Login: Anleitung zur Einrichtung der Google Schnittstelle

Google Login Button im tricoma Shop einrichten

In diesem Tutorial erfährst du, wie du einen Google Login Button einrichtest und in deinem tricoma Shop aktivierst.

1. Erstellen eines Projekts in der Google Developer Plattform

Um ein Projekt für die Google-Anbindung zu erstellen, rufe die Google Developer Plattform auf:
https://console.developers.google.com/

1.1 Projekt erstellen und auswählen

1. Klicke oben rechts neben dem Google-Logo auf die Projektauswahl. (Screen: Projektauswahl)

2. Es öffnet sich ein Fenster, in dem du ein neues Projekt erstellen kannst. (Screen: Projekt erstellen)

3. Du siehst nun ein Formular zur Projekterstellung. (Screen: Projekt erstellen – Name und Projekt-ID)
→ Vergib einen aussagekräftigen Namen für dein Projekt und achte auf die Projekt-ID.
→ Die Angabe einer Organisation ist optional.

4. Klicke auf „Erstellen“, um das Projekt anzulegen.

5. Nach der Erstellung musst du das Projekt über die Projektauswahl aktiv auswählen. (Screen: Projekt auswählen)

1. OAuth-Zustimmungsbildschirm einrichten

Jetzt richtest du in deinem Google-Projekt den sogenannten OAuth-Zustimmungsbildschirm ein. Dieser Schritt ist notwendig, damit sich Nutzer später mit ihrem Google-Konto einloggen können.

1.1. OAuth-Zustimmungsbildschirm erstellen

Gehe dabei folgendermaßen vor:

1. Klicke in der linken Navigation auf „OAuth-Zustimmungsbildschirm“.

2. Wähle bei „User Type“ die Option „Extern“ aus.

3. Klicke auf „Erstellen“, um fortzufahren.

1.2. OAuth-Zustimmungsbildschirm konfigurieren

Nachdem du den Zustimmungsbildschirm erstellt hast, geht es jetzt an die Konfiguration. Hier legst du fest, welche Informationen deine App beim Login-Vorgang anzeigt.

So gehst du vor:

1. Anwendungsname
Trage hier den Namen deiner App ein – z. B. den Namen deines Shops.
(Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 1)

2. Nutzersupport-E-Mail
Wähle eine Google-Mail-Adresse aus dem Dropdown-Menü aus.
(Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 1)

3. Anwendungslogo (optional)
Du kannst hier das Logo oder Icon deines Shops hochladen. Es wird später im Login-Fenster angezeigt.
(Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 1)

4. Startseite der Anwendung
Gib den Link zur Startseite deines Shops ein.
(Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 1)

5. Link zur Datenschutzerklärung
Trage hier den vollständigen Link zur Datenschutzerklärung deines Shops ein.
(Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 1)

6. Link zu den Nutzungsbedingungen
Auch dieser Link sollte auf deiner Shop-Website vorhanden sein – einfach hier eintragen.
(Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 2)

7. Autorisierte Domains
Klicke auf „Domain hinzufügen“ und gib die Domain deines Shops ein – z. B. grillschweine.de (ohne Zusätze wie https:// oder /shop).
Beachte: Die Domain muss eventuell in der Google Search Console bestätigt werden. Folge dafür dem Link „Google Search Console“ und führe die Schritte zur Domain-Inhaberschaft durch.
Ein hilfreiches Tutorial dazu findest du hier:

Google Search Console - Inhaberschaft bestätigen

(Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 2)

8. Kontaktdaten des Entwicklers
Gib deine eigene E-Mail-Adresse an, unter der du erreichbar bist.
(Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 2)

1.3. OAuth-Zustimmungsbildschirm konfigurieren – Bereiche hinzufügen oder entfernen

Im nächsten Schritt legst du fest, welche Daten beim Login über den Google-Button abgefragt werden dürfen.

So geht's:

1. Klicke auf „BEREICHE HINZUFÜGEN ODER ENTFERNEN“.
(Screenshot: Anwendungsregistrierung)

2. Es öffnet sich ein neues Fenster, in dem du die gewünschten Bereiche (Scopes) auswählen kannst.

3. Für die Nutzung im tricoma Shop musst du mindestens die erste Zeile aktivieren:
„E-Mail-Adresse abrufen“ – das ist zwingend erforderlich.

4. Wenn du zusätzlich den Vor- und Nachnamen der Nutzer abrufen möchtest, kannst du auch die zweite Zeile aktivieren.

5. Aktiviere die entsprechenden Checkboxen und klicke anschließend auf „Aktualisieren“.

6. Die ausgewählten Bereiche erscheinen nun unter „Meine nicht vertraulichen Bereiche“.

7- Zum Abschluss klicke auf „Speichern und Fortfahren“.

1.4. OAuth-Zustimmungsbildschirm konfigurieren – Optionale Informationen

Im nächsten Schritt kannst du optionale Informationen hinterlegen. Diese sind für den Google Login Button im tricoma Shop nicht notwendig.

Du kannst diesen Abschnitt einfach überspringen, indem du direkt auf „Speichern und Fortfahren“ klickst.

1.5. OAuth-Zustimmungsbildschirm konfigurieren – Letzte Überprüfung

Zum Schluss wird dir eine Übersichtsseite angezeigt, auf der du noch einmal alle Angaben überprüfen kannst.

Wichtig: Die Einrichtung des Zustimmungsbildschirms ist an dieser Stelle noch nicht vollständig abgeschlossen.

Damit die Google-Login-Funktion später funktioniert, musst du im nächsten Schritt OAuth-Anmeldedaten erstellen. Wie das geht, erfährst du im nächsten Abschnitt.

1.6. OAuth-Anmeldedaten generieren

Im letzten Schritt erstellst du die Anmeldedaten, die für die Google-Login-Funktion im Shop notwendig sind.

So gehst du vor:

1. Klicke in der linken Navigation auf „Anmeldedaten“.

2. Oben auf der Seite klickst du auf „ANMELDEDATEN ERSTELLEN“.
(Screen: Anmeldedaten generieren)

3. Wähle den Anwendungstyp „Webanwendung“ aus.
(Screen: Anmeldedaten generieren 2)

4. Im Feld „Autorisierte JavaScript-Quellen“ fügst du die Domain deines Shops hinzu – z. B. https://www.ihredomain.de.
(Screen: Anmeldedaten generieren 3)

5. Im Feld „Autorisierte Weiterleitungs-URIs“ gibst du ebenfalls deine Domain an – mit dem Zusatz /Login/ am Ende.
Beispiel: https://www.ihredomain.de/Login/
(Screen: Anmeldedaten generieren 3)

6. Klicke zum Abschluss auf „Erstellen“.

Nach dem die Anmeldedaten nun verfügbar sind, ist es nun auch möglich den OAuth-Zustimmungsbildschirm vollständig abschließen zu können.

1.7. OAuth-Zustimmungsbildschirm – Abschluss

Zum Schluss schließt du den Vorgang endgültig ab.

So geht's:

1. Klicke in der linken Navigation erneut auf „OAuth-Zustimmungsbildschirm“.

2. In der Navigationsübersicht auf der Seite klickst du ganz unten auf den letzten Punkt.
(Screen: Abschluss)

3. Scrolle ganz nach unten – dort findest du die Option, den Vorgang abzuschließen und zu bestätigen.

2. Einrichtung im tricoma

2.1. Einfügen der Client-ID im tricoma Plugin

Jetzt bindest du die Google-Login-Funktion direkt im tricoma System ein.

So gehst du vor:

1. Öffne in deinem tricoma-System die App „Webseitenbereiche“.

2. Klicke beim entsprechenden Shop auf das Plugin-Symbol.
(Screen: tricoma Einrichtung)

3. Wähle im Menü auf der linken Seite den Punkt „Social Login“, um in die Einstellungen des Plugins zu gelangen.

4. Trage dort die Client-ID ein, die du zuvor in der Google Developer Console bei den Anmeldedaten erhalten hast.
(Screen: ClientId von Google)

5. Aktiviere den gewünschten Shop.

6. Klicke abschließend auf „Speichern“, um die Einstellungen zu übernehmen.