|
| 1 | +--- |
| 2 | +sidebar_position: 4 |
| 3 | +sidebar_label: Verbinde deinen Agenten mit Drittanbieter-APIs |
| 4 | +--- |
| 5 | + |
| 6 | +# Verbinde deinen KI-Agenten mit Drittanbieter-APIs |
| 7 | + |
| 8 | +Diese Anleitung führt dich durch die Aktivierung deines KI-Agenten, damit er im Namen der Benutzer auf Drittanbieter-APIs (z. B. Google Kalender, GitHub usw.) zugreifen kann. Durch die Nutzung der Social Connectors und des Secret Vault von Logto kannst du Zugangstokens sicher speichern und verwalten, sodass dein Agent automatisierte Aufgaben ausführen kann, ohne die Benutzer wiederholt zur erneuten Authentifizierung aufzufordern. |
| 9 | + |
| 10 | +Du lernst, wie du: |
| 11 | + |
| 12 | +- Social Connectors mit Drittanbieter-Token-Speicherung konfigurierst. |
| 13 | +- Minimale Berechtigungen beim ersten Anmelden anforderst. |
| 14 | +- Nach Bedarf schrittweise zusätzliche Berechtigungen anforderst. |
| 15 | +- Gespeicherte Tokens abrufst und verwendest, um auf Drittanbieter-APIs zuzugreifen. |
| 16 | + |
| 17 | +## Warum dein KI-Agent Zugriff auf Drittanbieter-APIs benötigt \{#why-your-ai-agent-needs-third-party-api-access} |
| 18 | + |
| 19 | +KI-Agenten werden zunehmend eingesetzt, um Aufgaben zu automatisieren, die eine Interaktion mit externen Diensten erfordern. Zum Beispiel: |
| 20 | + |
| 21 | +- **📅 Kalenderverwaltung**: Dein KI-Agent kann automatisch Meetings planen, Ereignisse hinzufügen oder Termine im Google Kalender anpassen. |
| 22 | +- **📧 E-Mail-Automatisierung**: Folge-E-Mails senden, Posteingänge organisieren oder Antworten mit Gmail-APIs entwerfen. |
| 23 | +- **💻 Codeverwaltung**: GitHub-Issues erstellen, Pull Requests prüfen oder Repositories verwalten. |
| 24 | +- **📁 Dateiverwaltung**: Dateien auf Google Drive oder Dropbox hochladen, organisieren oder teilen. |
| 25 | + |
| 26 | +Um diese Aufgaben auszuführen, benötigt dein KI-Agent sicheren Zugriff auf von Benutzern autorisierte Drittanbieter-APIs, was bedeutet, dass OAuth-Tokens korrekt und sicher gehandhabt werden müssen. |
| 27 | + |
| 28 | +## Wie es funktioniert \{#how-it-works} |
| 29 | + |
| 30 | +Hier ist ein kurzer Überblick über den Ablauf: |
| 31 | + |
| 32 | +```mermaid |
| 33 | +sequenceDiagram |
| 34 | + participant User as Benutzer |
| 35 | + participant Agent as Dein KI-Agent |
| 36 | + participant Logto |
| 37 | + participant Google as Drittanbieter<br/>(z. B. Google) |
| 38 | +
|
| 39 | + rect rgba(200, 230, 200, 0.5) |
| 40 | + Note over User, Google: Benutzer erteilt Berechtigungen an Drittanbieter |
| 41 | + User->>Agent: "Füge morgen um 15 Uhr ein Meeting zu meinem Kalender hinzu" |
| 42 | + Agent->>User: Benötigt Zugriff auf Google Kalender, bitte autorisieren |
| 43 | + User->>Agent: Google-Autorisierung starten |
| 44 | + Agent->>Logto: Soziale Verifizierung starten |
| 45 | + Logto->>Google: Weiterleitung zu Google |
| 46 | + User->>Google: Authentifizieren und Berechtigungen erteilen |
| 47 | + Google->>Logto: Autorisierungscode zurückgeben |
| 48 | + Logto->>Google: Code gegen Tokens austauschen |
| 49 | + Logto->>Logto: Tokens im Secret Vault speichern |
| 50 | + Logto->>Agent: Verifizierungsergebnis zurückgeben |
| 51 | + end |
| 52 | +
|
| 53 | + rect rgba(200, 200, 230, 0.5) |
| 54 | + Note over User, Google: KI-Agent-Aufgabenausführung |
| 55 | + Agent->>Logto: Google-Zugangstoken abrufen |
| 56 | + Logto->>Agent: Zugangstoken zurückgeben |
| 57 | + Agent->>Google: Google Kalender API aufrufen |
| 58 | + Google->>Agent: Erfolg zurückgeben |
| 59 | + Agent->>User: "Erledigt! Ich habe das Meeting zu deinem Kalender hinzugefügt." |
| 60 | + end |
| 61 | +``` |
| 62 | + |
| 63 | +1. **Benutzer fordert eine Aufgabe an**: Der Benutzer bittet den KI-Agenten, eine Aufgabe auszuführen, die Zugriff auf eine Drittanbieter-API erfordert (z. B. einen Kalendereintrag hinzufügen). |
| 64 | +2. **Autorisierungsaufforderung**: Der Agent erkennt den Bedarf an Drittanbieter-Zugriff und fordert den Benutzer zur Autorisierung auf. |
| 65 | +3. **Tokens gespeichert**: Nach der Benutzerautorisierung speichert Logto die Zugangs- und Auffrischungstokens sicher im Secret Vault. |
| 66 | +4. **Aufgabenausführung**: Der Agent ruft das gespeicherte Token ab und ruft die Drittanbieter-API auf, um die Aufgabe abzuschließen. |
| 67 | + |
| 68 | +Nach der Autorisierung kann der Benutzer mehrere Aufgaben ausführen, ohne erneut zu autorisieren. Logto speichert die Tokens sicher und erneuert sie bei Bedarf automatisch, was eine nahtlose Erfahrung für fortlaufende KI-Agenten-Interaktionen bietet. |
| 69 | + |
| 70 | +## Voraussetzungen \{#prerequisites} |
| 71 | + |
| 72 | +Bevor du beginnst, stelle sicher, dass du Folgendes hast: |
| 73 | + |
| 74 | +- Einen [Logto Cloud](https://cloud.logto.io) (oder selbst gehosteten Logto v1.31+) Mandanten |
| 75 | +- Ein Drittanbieter-Konto mit API-Zugriff (z. B. [Google Cloud Console](https://console.cloud.google.com)) |
| 76 | +- Eine KI-Agenten-Anwendung, die mit Logto SDK integriert ist (Benutzer können sich bei deinem KI-Agenten anmelden) |
| 77 | + |
| 78 | +## Social Connector mit Token-Speicherung einrichten \{#set-up-social-connector-with-token-storage} |
| 79 | + |
| 80 | +Um deinem KI-Agenten den Zugriff auf Drittanbieter-APIs zu ermöglichen, musst du einen Social Connector mit aktivierter Token-Speicherung konfigurieren. Dadurch kann Logto Zugangstokens speichern und verwalten, wenn Benutzer während der Interaktion mit deinem KI-Agenten Drittanbieterdienste autorisieren. |
| 81 | + |
| 82 | +Nehmen wir Google als Beispiel: |
| 83 | + |
| 84 | +1. Navigiere zu <CloudLink to="/connectors/social">Konsole > Connectors > Social Connectors</CloudLink>. |
| 85 | +2. Klicke auf **Social Connector hinzufügen** und wähle **Google** aus. |
| 86 | +3. Folge der [Google Connector-Einrichtungsanleitung](/integrations/google), um deine OAuth-Client-Zugangsdaten zu konfigurieren. |
| 87 | +4. In den Connector-Einstellungen: |
| 88 | + - Aktiviere **Tokens für dauerhaften API-Zugriff speichern**, um Tokens im Secret Vault zu speichern. |
| 89 | + - Setze **Prompts** auf `consent`, damit Benutzer die Berechtigungsanfrage sehen. |
| 90 | + - Aktiviere **Offline-Zugriff**, um Auffrischungstokens für langfristigen API-Zugriff zu erhalten. |
| 91 | +5. Speichere deine Änderungen. |
| 92 | + |
| 93 | +:::info |
| 94 | +Du musst diesen Connector nicht zu deiner Anmeldeerfahrung hinzufügen. Der Connector wird für die bedarfsorientierte Autorisierung verwendet, wenn dein KI-Agent auf Drittanbieter-APIs zugreifen muss, nicht für die Benutzeranmeldung. |
| 95 | +::: |
| 96 | + |
| 97 | +## Autorisierung anfordern und auf Drittanbieter-APIs zugreifen \{#request-authorization-and-access-third-party-apis} |
| 98 | + |
| 99 | +Wenn dein KI-Agent auf eine Drittanbieter-API (z. B. Google Kalender) zugreifen muss, sollte er zunächst prüfen, ob der Benutzer bereits Zugriff autorisiert hat. Falls nicht, fordere den Benutzer zur Autorisierung auf. |
| 100 | + |
| 101 | +:::info Account API aktivieren |
| 102 | +Bevor du fortfährst, aktiviere die Account API unter <CloudLink to="/sign-in-experience/account-center">Konsole > Anmeldeerfahrung > Account Center</CloudLink>. Erfahre mehr über das [Aktivieren der Account API](/end-user-flows/account-settings/by-account-api#how-to-enable-account-api). |
| 103 | +::: |
| 104 | + |
| 105 | +### Schritt 1: Prüfe auf bestehende Autorisierung \{#step-1-check-for-existing-authorization} |
| 106 | + |
| 107 | +Versuche zunächst, das gespeicherte Zugangstoken abzurufen, um zu sehen, ob der Benutzer bereits autorisiert hat: |
| 108 | + |
| 109 | +```tsx |
| 110 | +async function getGoogleAccessToken(userAccessToken: string) { |
| 111 | + const response = await fetch( |
| 112 | + 'https://[tenant-id].logto.app/my-account/identities/google/access-token', |
| 113 | + { |
| 114 | + headers: { |
| 115 | + Authorization: `Bearer ${userAccessToken}`, |
| 116 | + }, |
| 117 | + } |
| 118 | + ); |
| 119 | + |
| 120 | + return response.json(); |
| 121 | +} |
| 122 | +``` |
| 123 | + |
| 124 | +### Schritt 2: Autorisierung anfordern, falls erforderlich \{#step-2-request-authorization-if-needed} |
| 125 | + |
| 126 | +Wenn kein Token existiert, das Token abgelaufen ist oder du den Geltungsbereich des Zugangstokens erweitern musst, verwende die [Social Verification API](/secret-vault/federated-token-set#reauthentication-and-token-renewal) von Logto, um den Autorisierungsablauf zu starten: |
| 127 | + |
| 128 | +```tsx |
| 129 | +async function requestGoogleAuthorization(userAccessToken: string, scopes: string) { |
| 130 | + // Generiere einen zufälligen State zum CSRF-Schutz |
| 131 | + const state = crypto.randomUUID(); |
| 132 | + sessionStorage.setItem('oauth_state', state); |
| 133 | + |
| 134 | + // Soziale Verifizierung starten |
| 135 | + const response = await fetch('https://[tenant-id].logto.app/api/verification/social', { |
| 136 | + method: 'POST', |
| 137 | + headers: { |
| 138 | + Authorization: `Bearer ${userAccessToken}`, |
| 139 | + 'Content-Type': 'application/json', |
| 140 | + }, |
| 141 | + body: JSON.stringify({ |
| 142 | + connectorId: '<google_connector_id>', |
| 143 | + state, |
| 144 | + redirectUri: 'https://your-ai-agent.com/callback', |
| 145 | + scope: scopes, |
| 146 | + }), |
| 147 | + }); |
| 148 | + |
| 149 | + const { verificationRecordId, authorizationUri } = await response.json(); |
| 150 | + |
| 151 | + // verificationRecordId für später speichern |
| 152 | + sessionStorage.setItem('verificationRecordId', verificationRecordId); |
| 153 | + |
| 154 | + // Benutzer zur Google-Autorisierung weiterleiten |
| 155 | + window.location.href = authorizationUri; |
| 156 | +} |
| 157 | +``` |
| 158 | + |
| 159 | +### Schritt 3: Den Autorisierungs-Callback behandeln \{#step-3-handle-the-authorization-callback} |
| 160 | + |
| 161 | +Nachdem der Benutzer Berechtigungen erteilt hat, leitet Google zurück zu deiner App. Schließe die Verifizierung ab und speichere die Tokens: |
| 162 | + |
| 163 | +```tsx |
| 164 | +async function handleAuthorizationCallback( |
| 165 | + userAccessToken: string, |
| 166 | + callbackParams: URLSearchParams |
| 167 | +) { |
| 168 | + const verificationRecordId = sessionStorage.getItem('verificationRecordId'); |
| 169 | + const storedState = sessionStorage.getItem('oauth_state'); |
| 170 | + const code = callbackParams.get('code'); |
| 171 | + const state = callbackParams.get('state'); |
| 172 | + |
| 173 | + // State validieren, um CSRF-Angriffe zu verhindern |
| 174 | + if (state !== storedState) { |
| 175 | + throw new Error('Invalid state parameter'); |
| 176 | + } |
| 177 | + |
| 178 | + // Autorisierung verifizieren |
| 179 | + await fetch('https://[tenant-id].logto.app/api/verification/social/verify', { |
| 180 | + method: 'POST', |
| 181 | + headers: { |
| 182 | + Authorization: `Bearer ${userAccessToken}`, |
| 183 | + 'Content-Type': 'application/json', |
| 184 | + }, |
| 185 | + body: JSON.stringify({ |
| 186 | + verificationRecordId, |
| 187 | + connectorData: { |
| 188 | + code, |
| 189 | + state, |
| 190 | + redirectUri: 'https://your-ai-agent.com/callback', |
| 191 | + }, |
| 192 | + }), |
| 193 | + }); |
| 194 | + |
| 195 | + // Tokens im Secret Vault von Logto speichern |
| 196 | + await fetch('https://[tenant-id].logto.app/my-account/identities/google/access-token', { |
| 197 | + method: 'PUT', |
| 198 | + headers: { |
| 199 | + Authorization: `Bearer ${userAccessToken}`, |
| 200 | + 'Content-Type': 'application/json', |
| 201 | + }, |
| 202 | + body: JSON.stringify({ |
| 203 | + verificationRecordId, |
| 204 | + }), |
| 205 | + }); |
| 206 | + |
| 207 | + // Aufräumen |
| 208 | + sessionStorage.removeItem('verificationRecordId'); |
| 209 | + sessionStorage.removeItem('oauth_state'); |
| 210 | +} |
| 211 | +``` |
| 212 | + |
| 213 | +### Schritt 4: Die Drittanbieter-API aufrufen \{#step-4-call-the-third-party-api} |
| 214 | + |
| 215 | +Jetzt kann dein KI-Agent das Token abrufen und die API aufrufen: |
| 216 | + |
| 217 | +```tsx |
| 218 | +async function addCalendarEvent(userAccessToken: string, eventDetails: EventDetails) { |
| 219 | + // Das gespeicherte Google-Zugangstoken abrufen |
| 220 | + const tokenData = await getGoogleAccessToken(userAccessToken); |
| 221 | + |
| 222 | + if (!tokenData) { |
| 223 | + // Benutzer hat nicht autorisiert, Autorisierung mit Kalender-Berechtigung anfordern |
| 224 | + await requestGoogleAuthorization( |
| 225 | + userAccessToken, |
| 226 | + 'https://www.googleapis.com/auth/calendar.events' |
| 227 | + ); |
| 228 | + return; // Wird nach Weiterleitung fortgesetzt |
| 229 | + } |
| 230 | + |
| 231 | + // Die Google Kalender API aufrufen |
| 232 | + const response = await fetch('https://www.googleapis.com/calendar/v3/calendars/primary/events', { |
| 233 | + method: 'POST', |
| 234 | + headers: { |
| 235 | + Authorization: `Bearer ${tokenData.accessToken}`, |
| 236 | + 'Content-Type': 'application/json', |
| 237 | + }, |
| 238 | + body: JSON.stringify(eventDetails), |
| 239 | + }); |
| 240 | + |
| 241 | + return response.json(); |
| 242 | +} |
| 243 | +``` |
| 244 | + |
| 245 | +Logto übernimmt die Token-Erneuerung automatisch. Wenn das Zugangstoken abgelaufen ist, aber ein Auffrischungstoken existiert, wird Logto beim nächsten Abruf automatisch ein neues Zugangstoken erhalten. |
| 246 | + |
| 247 | +## Zusätzliche Berechtigungen anfordern \{#request-additional-permissions} |
| 248 | + |
| 249 | +Wenn dein KI-Agent mehr Aufgaben übernimmt, musst du möglicherweise zusätzliche Berechtigungen anfordern. Wenn der Benutzer beispielsweise zunächst nur Lesezugriff auf den Kalender autorisiert hat, jetzt aber Ereignisse erstellen möchte, benötigst du Schreibberechtigungen. |
| 250 | + |
| 251 | +### Warum inkrementelle Autorisierung? \{#why-incremental-authorization} |
| 252 | + |
| 253 | +- **Bessere Benutzererfahrung**: Benutzer sind eher bereit, Berechtigungen zu erteilen, wenn sie verstehen, warum sie im Kontext benötigt werden. |
| 254 | +- **Höhere Konversionsraten**: Weniger anfängliche Berechtigungen bedeuten weniger Reibung. |
| 255 | +- **Vertrauensaufbau**: Benutzer vertrauen Anwendungen, die nur das anfordern, was sie wirklich benötigen. |
| 256 | + |
| 257 | +### Beispiel: Upgrade von Lese- auf Schreibzugriff \{#example-upgrading-from-read-to-write-access} |
| 258 | + |
| 259 | +```tsx |
| 260 | +async function createCalendarEvent(userAccessToken: string, eventDetails: EventDetails) { |
| 261 | + const tokenData = await getGoogleAccessToken(userAccessToken); |
| 262 | + |
| 263 | + if (!tokenData) { |
| 264 | + // Noch keine Autorisierung, Kalender-Schreibberechtigung direkt anfordern |
| 265 | + await requestGoogleAuthorization(userAccessToken, 'https://www.googleapis.com/auth/calendar'); |
| 266 | + return; |
| 267 | + } |
| 268 | + |
| 269 | + // Versuche, das Ereignis zu erstellen |
| 270 | + const response = await fetch('https://www.googleapis.com/calendar/v3/calendars/primary/events', { |
| 271 | + method: 'POST', |
| 272 | + headers: { |
| 273 | + Authorization: `Bearer ${tokenData.accessToken}`, |
| 274 | + 'Content-Type': 'application/json', |
| 275 | + }, |
| 276 | + body: JSON.stringify(eventDetails), |
| 277 | + }); |
| 278 | + |
| 279 | + if (response.status === 403) { |
| 280 | + // Unzureichende Berechtigungen, zusätzlichen Geltungsbereich anfordern |
| 281 | + await requestGoogleAuthorization( |
| 282 | + userAccessToken, |
| 283 | + 'https://www.googleapis.com/auth/calendar' // Voller Kalenderzugriff |
| 284 | + ); |
| 285 | + return; |
| 286 | + } |
| 287 | + |
| 288 | + return response.json(); |
| 289 | +} |
| 290 | +``` |
| 291 | + |
| 292 | +:::tip |
| 293 | +Wenn zusätzliche Geltungsbereiche angefordert werden, sieht der Benutzer einen Zustimmungsbildschirm (Consent screen), auf dem nur die neuen Berechtigungen angezeigt werden. Bestehende Berechtigungen bleiben erhalten. |
| 294 | +::: |
| 295 | + |
| 296 | +## Tokenstatus verwalten \{#manage-token-status} |
| 297 | + |
| 298 | +Die Logto-Konsole bietet Einblick in den Tokenstatus für jeden Benutzer: |
| 299 | + |
| 300 | +1. Navigiere zu <CloudLink to="/users">Konsole > Benutzerverwaltung</CloudLink>. |
| 301 | +2. Klicke auf einen Benutzer, um dessen Details anzuzeigen. |
| 302 | +3. Scrolle zum Abschnitt **Verbindungen**, um alle verknüpften Social Accounts zu sehen. |
| 303 | +4. Jede Verbindung zeigt den Tokenstatus an: |
| 304 | + - **Aktiv**: Das Zugangstoken ist gültig und einsatzbereit. |
| 305 | + - **Abgelaufen**: Das Zugangstoken ist abgelaufen. Wenn ein Auffrischungstoken existiert, wird es beim nächsten Abruf automatisch erneuert. |
| 306 | + - **Inaktiv**: Für diese Verbindung sind keine Tokens gespeichert. |
| 307 | + |
| 308 | +## Sicherheitsbest Practices \{#security-best-practices} |
| 309 | + |
| 310 | +Wenn du KI-Agenten entwickelst, die auf Drittanbieter-APIs zugreifen, beachte diese Sicherheitspraktiken: |
| 311 | + |
| 312 | +- **Minimale Geltungsbereiche anfordern**: Fordere nur die Berechtigungen an, die dein Agent tatsächlich benötigt. |
| 313 | +- **Inkrementelle Autorisierung verwenden**: Fordere zusätzliche Berechtigungen im Kontext an, nicht alle auf einmal. |
| 314 | +- **Tokenablauf elegant behandeln**: Gehe immer mit Fällen um, in denen Tokens abgelaufen oder widerrufen wurden. |
| 315 | +- **Benutzer-Zugangstokens sichern**: Das Logto-Zugangstoken des Benutzers ist der Schlüssel zum Abrufen von Drittanbieter-Tokens. Schütze es entsprechend. |
| 316 | +- **API-Zugriffe protokollieren**: Protokolliere, wenn dein KI-Agent auf Drittanbieter-APIs zugreift, für Fehlerbehebung und Compliance. |
| 317 | + |
| 318 | +## Verwandte Ressourcen \{#related-resources} |
| 319 | + |
| 320 | +<Url href="/secret-vault/federated-token-set">Drittanbieter-Token-Speicherung</Url> |
| 321 | +<Url href="/connectors/social-connectors">Social Connectors</Url> |
| 322 | +<Url href="/end-user-flows/sign-up-and-sign-in/social-sign-in">Social Sign-in</Url> |
| 323 | +<Url href="/end-user-flows/account-settings/by-account-api">Account API</Url> |
0 commit comments