Was ist eine Kunden-ID?
Eine Google-Client-ID (oder ClientID) ist eine eindeutige Kennung, die einer Anwendung/einem Benutzer zugewiesen wird. Es wird zur Authentifizierung von Clients und Servern mithilfe von OAuth (Auth 2.0) verwendet.

Um eine Google-Client-ID zu erhalten, öffnen Sie die Google Cloud Console und starten Sie ein neues Projekt. Für dieses Tutorial nennen wir das Projekt „GoogleReact Sign-In“, aber Sie können einen beliebigen Namen wählen.

Navigieren Sie nach dem Erstellen des Projekts zum Abschnitt „Anmeldeinformationen“ im Menü „API und Dienste“. Hier finden Sie ein Dashboard, in dem Ihr aktueller Projektname in der oberen linken Ecke neben dem Google Cloud-Logo sichtbar sein sollte.

Bevor Sie nun Ihre Anmeldeinformationen erstellen, gehen wir zum OAuth-Zustimmungsbildschirm, um den Zustimmungsbildschirm einzurichten.

Richten Sie einen Google-Anmeldeeinwilligungsbildschirm ein.

Der Einwilligungsbildschirm ist, wie der Name schon sagt, eine Seite, auf der sich der Benutzer über eine externe Bibliothek oder eine Bibliothek eines Drittanbieters anmelden muss. Dieses Popup informiert den Benutzer darüber, dass er die Stammseite Ihrer App verlässt und Zugriff auf eine Drittanbieterseite gewährt. Beispiel für einen Einwilligungsbildschirm für die Google-Anmeldung, siehe unten

Einfach ausgedrückt: Wenn Sie OAuth 2.0 zur Autorisierung verwenden, fordert Ihre App den Benutzer auf, einen oder mehrere Zugriffsbereiche mithilfe seines Google-Kontos zu autorisieren. Zu den Zugriffsbereichen gehören alle Informationen oder Aktivitäten, auf die Ihre App zugreifen oder die sie im Benutzerkonto ausführen darf.

Um die Google-Zustimmungsseite für Ihre React-App einzurichten, navigieren Sie zur Registerkarte „OAuth-Zustimmungsbildschirm“ im linken Menü Ihrer Google Cloud Console.

Wählen Sie auf dieser Registerkarte „Extern“ aus, die einzige zulässige Option, es sei denn, Sie verwenden ein von Google verifiziertes Unternehmen oder eine von Google verifizierte Anwendung, und klicken Sie dann auf die Schaltfläche „Erstellen“, um Ihren Einwilligungsbildschirm zu erstellen.

Geben Sie als Nächstes auf derselben Seite einen Namen für Ihre Bewerbung und eine E-Mail-Adresse ein, um Aktualisierungen zum Status des Projekts zu erhalten.

Sie können die verbleibenden Anforderungen und Optionen vorerst leer lassen, aber wenn Sie über die Details verfügen, können Sie sie in dieser Phase hinzufügen.

Die restlichen Registrierungsabschnitte können Sie vorerst überspringen. Scrollen Sie einfach in jedem Abschnitt nach unten, klicken Sie auf Speichern und kehren Sie nach Abschluss zum Dashboard zurück.

Nachdem wir die OAuth-Zustimmungsseite entworfen haben, müssen wir die App veröffentlichen, bevor wir damit experimentieren oder sicherstellen, dass die Authentifizierung funktioniert. Standardmäßig ist der Status „Testing“ und nach der Veröffentlichung wird es in die Produktion verschoben.

Sobald Sie Ihre App als „In Produktion“ markiert haben, ist sie für jeden mit einem Google-Konto zugänglich.

Generieren Sie Ihre Web-Client-ID.

Jetzt kehren wir zur Option „Anmeldeinformationen“ zurück, um auf die Seite zuzugreifen, auf der Sie Ihre Web-Client-ID erstellen können.
Wählen Sie auf dem Bildschirm oben auf der Seite Anmeldeinformationen erstellen aus und klicken Sie dann auf die OAuth-Client-ID.

Sie werden aufgefordert, einen Bewerbungstyp auszuwählen, wie unten aufgeführt. Entscheiden Sie sich für eine Webanwendung. Wenn Sie diese Schritte für React ausführen (wir verwenden die Google-Client-ID für das Web).

Als nächstes wählen wir einen Namen für unsere Client-ID aus, um den spezifischen ID-Link zu einer einzelnen App zu identifizieren oder anzugeben. Dieser Name wird verwendet. Um zwischen Web-, iOS- und Android-IDs zu unterscheiden, können wir „Web-ID“, „Android-ID“, „iOS-ID“ usw. in ihre Namenskonventionen aufnehmen:

Anschließend stellen wir zwei Arten von URLs vor: autorisierte JavaScript-Ursprünge und autorisierte Weiterleitungs-URLs.

Die „Autorisierte JavaScript-Ursprungs-URL“ ist die URL, über die sich Ihre Anwendung anmeldet. Für React-Entwickler ist es localhost (localhost:3000) oder Ihre gehostete URL, wenn Sie Ihre App gehostet haben.

Die „Autorisierte Weiterleitungs-URL“ ist der Link, zu dem Google den Nutzer zurückleitet, nachdem Sie ihn erfolgreich angemeldet haben. Sie können ihn beispielsweise zu Ihrem ursprünglichen Link zurückführen oder ihn zu einem anderen Link weiterleiten. Sie müssen die URL hier hinzufügen.

Fügen Sie die folgenden URLs zu den autorisierten JavaScript-Ursprüngen und autorisierten Weiterleitungs-URLs hinzu: http://localhost:3000 bzw. http://localhost:

Um eine Web-Client-ID zu erstellen, müssen Sie auf die Schaltfläche „ERSTELLEN“ klicken. Sie kehren zur Startseite zurück, wo Sie Ihre frisch erstellten Anmeldeinformationen einsehen können. Um Ihre neue Web-Client-ID zu kopieren, klicken Sie auf das Symbol „Kopieren“.

Nachdem wir unsere Web-Client-ID erfolgreich erstellt haben, gehen Sie in unsere React-App und fügen Ihre Client-ID in die .env-Datei ein.