Wenn Sie den Zugriff auf Google APIs in Ihrer Webanwendung mit der JavaScript-Bibliothek der Google Identity Services (google.accounts.oauth2) autorisieren möchten, müssen Sie zuerst Folgendes tun:
- OAuth 2.0-Client-ID abrufen
- Konfigurieren Sie den OAuth-Zustimmungsbildschirm und die Bereiche.
- Laden Sie die Clientbibliothek.
- Optional können Sie eine Content Security Policy (CSP) und eine Cross-Origin Opener Policy (COOP) einrichten.
Google API-Client-ID abrufen
Wenn Sie die Google-Kontoautorisierung auf Ihrer Website aktivieren möchten, müssen Sie zuerst eine Google API-Client-ID einrichten. Gehen Sie folgendermaßen vor:
- Öffnen Sie in der Google Cloud Console die Seite Clients.
- Erstellen oder wählen Sie ein Cloud Console-Projekt aus. Beim Erstellen von Produktionsanwendungen sind möglicherweise mehrere Projekte erforderlich. Wiederholen Sie die verbleibenden Schritte dieses Abschnitts für jedes Projekt, das Sie verwalten.
- Klicken Sie auf Client erstellen und wählen Sie als Anwendungstyp die Option Webanwendung aus, um eine neue Client-ID zu erstellen. Wenn Sie eine vorhandene Client-ID verwenden möchten, wählen Sie eine vom Typ Webanwendung aus.
Fügen Sie die URI Ihrer Website zu Autorisierte JavaScript-Quellen hinzu. Der URI enthält nur das Schema und den voll qualifizierten Hostnamen. Beispiel:
https://www.example.comWenn Sie das Autorisierungscodemodell mit
ux_mode: 'redirect'verwenden (oder Autorisierungscodes an einem Backend-Endpunkt austauschen), fügen Sie Ihre Weiterleitungs-URIs zu Autorisierte Weiterleitungs-URIs hinzu. Weiterleitungs-URIs enthalten das Schema, den vollständig qualifizierten Hostnamen und den Pfad und müssen den Validierungsregeln für Weiterleitungs-URIs entsprechen. Zum Beispiel:https://www.example.com/oauth2callback.
Notieren Sie sich nach Abschluss der Konfiguration die erstellte Client-ID.
Sie übergeben diesen Wert im Attribut client_id, wenn Sie initCodeClient() oder initTokenClient() initialisieren. (Es wird auch ein Clientschlüssel erstellt, den Sie vertraulich behandeln und nur für serverseitige Tokenaustauschvorgänge verwenden dürfen.)
OAuth-Zustimmungsbildschirm konfigurieren
Wenn Ihre Webanwendung über OAuth 2.0-Bereiche Zugriff auf Nutzerdaten anfordert, zeigt Google einen Zustimmungsbildschirm an, auf dem Nutzer sehen, welche Anwendung Zugriff anfordert, welche Datenbereiche angefordert werden und welche Bedingungen gelten.
- Öffnen Sie in der Cloud Console im Bereich „Google Auth Platform“ die Seite Branding.
- Wählen Sie bei Aufforderung das von Ihnen konfigurierte Projekt aus.
- Füllen Sie das Branding-Formular aus (Anwendungsname, Anwendungslogo, Support-E-Mail-Adresse, autorisierte Domains, Link zur Startseite der Anwendung und Link zur Datenschutzerklärung) und klicken Sie auf Speichern.
- Rufen Sie die Seite „Datenzugriff“ auf, um die Google API-Bereiche zu konfigurieren, die Ihre Anwendung benötigt. Als Best Practice wird empfohlen, Bereiche schrittweise anzufordern, wenn der Zugriff erforderlich ist, und nicht im Voraus.
- Prüfen Sie Ihren Bestätigungsstatus. Wenn Ihre Anwendung vertrauliche oder eingeschränkte Bereiche anfordert, reichen Sie sie zur Überprüfung ein. Weitere Informationen finden Sie unter Anforderungen für die OAuth-Überprüfung.
Content Security Policy und COOP
Wenn in Ihrer Webanwendung eine Content Security Policy (CSP) erzwungen wird, lassen Sie die folgenden Google Identity Services-Ursprünge zu:
script-src:https://accounts.google.com/gsi/clientframe-src:https://accounts.google.com/gsi/connect-src:https://accounts.google.com/gsi/
Konfigurieren Sie für Pop-up-Autorisierungsabläufe (initTokenClient oder initCodeClient mit ux_mode: 'popup') den HTTP-Antwortheader Cross-Origin-Opener-Policy (COOP) auf same-origin-allow-popups, damit das Dialogfenster die Autorisierungsantwort an Ihre Seite zurückgeben kann.
Nächste Schritte
Laden Sie als Nächstes die Clientbibliothek auf Ihre Webseite, um den Autorisierungsclient zu initialisieren.