Social Login: Anleitung zur Einrichtung der Google Schnittstelle

In diesem Tutorial wird gezeigt, wie Sie einen Google Login Button einrichten und in Ihrem tricoma Shop aktivieren.

1. Erstellen eines Projekts in der Google Developer Plattform

Um zur Google Developer Plattform zu gelangen, klicken Sie auf folgenden Link: https://console.developers.google.com/

1.1. Projekt erstellen und auswählen

• Nach dem Sie in der Google Developer Plattform angelangt sind, klicken Sie oben rechts neben dem Google Logo auf die Projektauswahl, um ein neues Projekt zu erstellen (Screen: Projektauswahl)
• Es erscheint ein Fenster, bei dem Sie ein Projekt erstellen können (Screen: Projekt erstellen)
• Es erscheint ein Formular, bei dem Sie das Projekt erstellen können (Screen: Projekt erstellen Name und Projekt-ID). Vergeben Sie einen aussagekräftigen Namen für Ihr Projekt und achten Sie hierbei auch auf die Projekt-ID. Eine Organisation kann ausgewählt werden, ist aber nicht notwendig. Bestätigen Sie anschließend mit "Erstellen".
• Das Projekt wird somit erstellt. Anschließend muss das Projekt in der Projektauswahl ausgewählt werden. (Screen: Projekt auswählen)

1. OAuth-Zustimmungsbildschirm

Sie können in Ihrem Projekt jetzt den "OAuth-Zustimmungsbildschirm" erstellen und konfigurieren. (Screen: OAuth Zustimmungsbildschirm erstellen)

1.1. OAuth-Zustimmungsbildschirm erstellen

• Schritt 1: Klicken Sie in der linken Navigation auf "OAuth-Zustimmungsbildschirm..."
• Schritt 2: Wählen Sie für den User Type die Auswahl "Extern"
• Schritt 3: Klicken Sie "Erstellen"

1.2. OAuth-Zustimmungsbildschirm konfigurieren

Weiter geht es mit der Konfiguration. Screen (OAuth Zustimmungsbildschirm konfigurieren)

Hier werden unter anderem Felder konfiguriert, die bei der Abfrage der Nutzerdaten angezeigt werden.

Gehen Sie hier durch die einzelnen Felder und füllen diese jeweils aus:

• 1. Anwendungsname: Wählen Sie hier den App-Namen (Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 1)
• 2. Nutzersupport-E-Mail: Wählen Sie eine Google E-Mail aus dem Dropdown (Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 1)
• 3. Anwendungslogo: Das Anwendungslogo ist optional, aber Sie sollten hier das Icon oder das Logo Ihres Shops hochladen. (Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 1)
• 4. Startseite der Anwendung: Geben Sie hier den Startseiten Link des Shops an. (Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 1)
• 5. Link zur Datenschutzerklärung der Anwendung: Geben Sie hier den Link zur Datenschutzerklärung des Shops an. (Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 1)
• 6. Link zu den Nutzungsbedingungen der Anwendung: Geben Sie hier den Link zu den Nutzungsbedingungen des Shops an. (Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 2)
• 7. Authorisierte Domains: Klicken Sie auf "Domain hinzufügen" und hinterlegen Sie die Domain des Shops (ohne Zusätze z.B. grillschweine.de). Möglicherweise muss die Domain in Ihrer Google Search Console verknüpft und authorisiert (Domain-Inhaberschaft bestätigen) werden. Um die Domain-Inhaberschaft zu bestätigen, können Sie auf den Link "Google Search Console" klicken und dort die Schritte weiterführen. Ein Tutorial hierfür aus unseren Reihen: Google Search Console - Inhaberschaft bestätigen (Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 2)
• 8. Kontaktdaten des Entwicklers: Geben Sie hier Ihre E-Mail-Adresse an (Screen: OAuth Zustimmungsbildschirm konfigurieren Teil 2)

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

Anschließend müssen jetzt die Bereiche definiert werden, die beim Google Login Button abgerufen werden sollen. (Screen: Anwendungsregistrierung)

Klicken Sie hierzu auf "BEREICHE HINZUFÜGEN ODER ENTFERNEN". Es öffnet sich ein Fenster in dem die Bereiche ausgewählt werden können. Zur Nutzung im tricoma Shop ist mindestens die erste Zeile (E-Mail-Adresse abrufen) zu markieren . Um weitere Daten, wie z.B. Vornamen und Namen abzurufen, können Sie die zweite Zeile markieren. Nachdem Sie die Bereiche markiert (Checkbox aktivieren) haben, klicken Sie auf "Aktualisieren". Die gewählten Bereiche erscheinen nun in der Tabelle "Meine nicht vertraulichen Bereiche". Klicken Sie anschließend auf "Speichern und Fortfahren".

1.4. OAuth-Zustimmungsbildschirm konfigurieren (Optionale Informationen)

Im nächsten Formular können optionale Informationen hinterlegt werden, die für den Google Login Button in unserem Fall nicht benötigt werden.
Klicken Sie wieder auf "Speichern und Fortfahren".

1.5. OAuth-Zustimmungsbildschirm konfigurieren (Letzte Überprüfung)

Auf der nächsten Seite erhalten Sie das Fazit oder eine Überprüfungsseite.

Um die Einrichtung abzuschließen ist es notwendig, OAuth-Anmeldedaten zu generieren. Diese werden im nächsten Punkt beschrieben, bevor hier abgeschlossen werden kann.

1.6. OAuth Anmeldedaten generieren

Klicken Sie hierzu in der linken Navigation auf "Anmeldedaten" und auf der Seite oben auf "ANMELDEDATEN ERSTELLEN". (Screen: Anmeldedaten generieren)

• Wählen Sie den Anwendungstyp "Webanwendung". (Screen: Anmeldedaten generieren 2)
• Tragen Sie bei "Autorisierte JavaScript-Quellen" die Domain des Shops ein (URI hinzufügen). (Screen: Anmeldedaten generieren 3)
• Tragen Sie bei "Autorisierte Weiterleitungs-URIs" die Domain des Shops ein (URI hinzufügen) und den Zusatz /Login/ ein, z.B. https://www.ihredomain.de/Login/. (Screen: Anmeldedaten generieren 3)
• Bestätigen Sie mit "Erstellen".

1.7. OAuth-Zustimmungsbildschirm Abschluss

Klicken Sie hierzu in der linken Navigation auf "OAuth-Zustimmungsbildschirm..." und auf der Seite in der Navigationsstruktur auf den letzten Punkt.. (Screen: Abschluss)

Ganz unten können Sie nun bestätigen.

2. Einrichtung im tricoma

2.1. Einfügen der clientId im tricoma Plugin

Gehen Sie hierzu im tricoma auf die App "Bereiche" bzw. "Multishop" und klicken auf das Plugin Symbol. (Screen: tricoma Einrichtung)
Wählen Sie anschließend links im Menü "Social Login" um in die Einstellungsmaske des Plugins zu gelangen.
Tragen Sie die ClientId der erstellten Anmeldedaten (Screen: ClientId von Google)
Aktivieren Sie den Shop und klicken auf Speichern.