# Autorisierungsabläufe hinzufügen Implementieren Sie PKCE OAuth-Workflows in Ihrer Stripe-App. Sie können OAuth mit Ihrer *Nutzeroberflächen-Erweiterung* (A set of APIs that allow you to inject user interface elements into the Stripe Dashboard using TypeScript and React) im Dashboard implementieren, um Zugriffs-Token von einem OAuth-Anbieter abzurufen, statt ein OAuth-Backend zu erstellen. Wenn der/die Nutzer/in Ihrer *Stripe-App* (An app that you can build on top of Stripe to customize the functionality of the Stripe Dashboard UI, leverage Stripe user data, store data on Stripe, and more) Zugriff auf einen OAuth-Anbieter gewährt, kann er/sie direkt über Ihre Stripe-App im Dashboard mit den Diensten des OAuth-Anbieters interagieren. ![Der OAuth-Ablauf einer Stripe-App](https://b.stripecdn.com/docs-statics-srv/assets/oauth_pkce_flow_diagram_v2.491ae76870978963e8b69e82e2b1a1a1.png) OAuth-Ablauf mit einer Stripe-App ## Before you begin - Stellen Sie sicher, dass OAuth den [Proof Key for Code Exchange (PKCE)](https://auth0.com/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-proof-key-for-code-exchange-pkce)-Ablauf unterstützt. - Falls nicht bereits geschehen, erstellen Sie eine App mit Ihrem OAuth-Anbieter, die Sie mit Ihrer Stripe-App verbinden und verwenden können. - Erstellen Sie eine [Stripe-App](https://docs.stripe.com/stripe-apps/create-app.md) und eine [Nutzeroberfläche](https://docs.stripe.com/stripe-apps/build-ui.md). Die UI-Erweiterung ruft den Zugriffs-Token des OAuth-Anbieters per PKCE-Ablauf ab. ## Autorisierungs-Link erstellen Endnutzer/innen klicken einen Autorisierungslink Ihrer App, um den OAuth-Ablauf zu starten und Ihrer App Zugriff auf den Dienst des OAuth-Anbieters zu gewähren. 1. Erstellen Sie die *Test* (Test mode is another way to test changes to your integration without affecting production. A sandbox is the default and recommended way to test integrations. All Stripe features are available in test mode but you can't create live charges unless you're in live mode)- und *Live* (Use this mode when you’re ready to launch your app. Card networks or payment providers process payments)-OAuth-Umleitungs-URLs. Dieses Verfahren gilt auch in einer *Sandbox* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes)-Umgebung. Die Umleitungs-URL gilt ausschließlich für Ihre App und enthält Ihre App-`id` im Pfad. Beispiel: Wenn das Feld `id` in Ihrem [App-Manifest](https://docs.stripe.com/stripe-apps/reference/app-manifest.md) `"id": "com.example.oauth-example"` lautet: - Die Test-Modus-URL lautet: ``` https://dashboard.stripe.com/test/apps-oauth/com.example.oauth-example ``` - Die Live-Modus-URL lautet: ``` https://dashboard.stripe.com/apps-oauth/com.example.oauth-example ``` 1. Registrieren Sie die Test- und Live-OAuth-Umleitungs-URLs bei Ihrem OAuth-Anbieter. 1. Erstellen Sie in der Nutzeroberflächen-Erweiterung Ihrer App einen Pfad, der Nutzer/innen von Ihrer Stripe-App weiterleitet, um den OAuth-Anbieter zu autorisieren. Übergeben Sie hierfür die folgenden Parameter in den OAuth-Umleitungs-URLs: | Parameter | Wert | | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | `response_type` | Dies lautet immer `code`. Der PKCE-Ablauf verwendet `code` als Wert, um einen Autorisierungscode vom OAuth-Anbieter anzufordern. | | `client_id` | Die von Ihrem OAuth-Anbieter zugewiesene ID Ihrer OAuth-App. | | `redirect_uri` | Die OAuth-Umleitungs-URL der Stripe-App. Dies ist die URL, die der OAuth-Anbieter verwendet, um eine/n Nutzer/in zu Ihrer App umzuleiten. | | `state` | Der `state`-Rückgabewert der Funktion [createOAuthState](https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api.md#createOAuthState). | | `code_challenge` | Der `challenge`-Rückgabewert der Funktion [createOAuthState](https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api.md#createOAuthState). | | `code_challenge_method` | Dies ist immer `S256`. | Für die Nutzerweiterleitung aus Ihrer Stripe-App können Sie das folgende Codebeispiel verwenden, um eine Drittanbieter-App mithilfe der OAuth-Umleitungs-URLs und der Nutzeroberflächenkomponente [„Schaltfläche”](https://docs.stripe.com/stripe-apps/components/button.md) zu autorisieren: ```ts import { ContextView, Button, } from '@stripe/ui-extension-sdk/ui'; import * as React from 'react'; import {createOAuthState} from '@stripe/ui-extension-sdk/oauth'; import type {ExtensionContextValue} from '@stripe/ui-extension-sdk/context'; const {useState, useEffect} = React; const clientID = 'your_client_id'; const getRedirectURL = (mode: 'live' | 'test') => `https://dashboard.stripe.com/${ mode === 'test' ? 'test/' : '' }apps-oauth/com.example.oauth-example`; const getAuthURL = (state: string, challenge: string, mode: 'live' | 'test') => `https://www.example.com/oauth2/authorize?response_type=code&client_id=${clientID}&redirect_uri=${getRedirectURL(mode)}&state=${state}&code_challenge=${challenge}&code_challenge_method=S256`; const ExampleApp = ({environment}: ExtensionContextValue) => { const {mode} = environment; const [authURL, setAuthURL] = useState(''); useEffect(() => { createOAuthState().then(({state, challenge}) => { setAuthURL(getAuthURL(state, challenge, mode)); }); }, [mode]); return ( ); }; export default ExampleApp; ``` ## Zugriffs-Token vom OAuth-Anbieter abrufen Ihre App kann nur Anfragen im Auftrag aktueller Nutzer/innen stellen. Nachdem Ihre App autorisiert wurde, übergibt das Dashboard die OAuth-Daten an Ihre App durch die `code`- und `verifier`-Werte der [Kontexteigenschaft](https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api.md#props) `oauthContext`. Ihre App kann nur bei gültigen Autorisierungsversuche die Werte `code`, `verifier` und gegebenenfalls den benutzerdefinierten Wert `state` lesen. Ein Autorisierungsversuch ist gültig, wenn durch den OAuth-Anbieter eine Weiterleitung zu `redirect_uri`` erfolgt und der entsprechende Parameter der Abfragezeichenfolge des Autorisierungslinks den Wert`state`umfasst. Der Wert`state`muss identisch mit dem von der Funktion`createOAuthState`zurückgegebenen Wert`state` sein (der bei der Erstellung des Autorisierungslinks vorlag). Rufen Sie über die Nutzeroberflächen-Erweiterung Ihrer App den Zugriffs-Token vom OAuth-Anbieter mit den folgenden Parametern ab: | Parameter | Wert | | --------------- | ------------------------------------------------------------------------------------------------------------------------------ | | `code` | Der Wert des [React-Props](https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api.md#props) `oauthContext.code`. | | `grant_type` | Dies ist immer `authorization_code`. | | `code_verifier` | Der Wert des [React-Props](https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api.md#props) `oauthContext.verifier`. | | `client_id` | Ihre Client-ID vom OAuth-Anbieter | | `redirect_uri` | Die OAuth-Umleitungs-URL der Stripe-App. | Sie können das folgende Codebeispiel verwenden, um einen Zugriffs-Token von einem OAuth-Anbieter abzurufen: ```ts import {ContextView} from '@stripe/ui-extension-sdk/ui'; import * as React from 'react'; import type {ExtensionContextValue} from '@stripe/ui-extension-sdk/context'; const {useState, useEffect} = React; // Store the authorization token data. interface TokenData { account_id: string; access_token: string; expires_in: number; } const clientID = 'your_client_id'; const getRedirectURL = (mode: 'live' | 'test') => `https://dashboard.stripe.com/${ mode === 'test' ? 'test/' : '' }apps-oauth/com.example.oauth-example`; // Fetch the authorization token from an example authorization server. const getTokenFromAuthServer = async ({code, verifier, mode}: {code: string, verifier: string, mode: 'live' | 'test'}): Promise => { try { const response = await fetch(`https://api.example.com/oauth2/token?code=${code}&grant_type=authorization_code&code_verifier=${verifier}&client_id=${clientID}&redirect_uri=${getRedirectURL(mode)}`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, }); if (response.ok) { return await response.json(); } throw new Error(await response.text()); } catch (e) { console.error('Unable to retrieve token from authorization server:', (e as Error).message); return null; } }; const ExampleApp = ({environment, oauthContext}: ExtensionContextValue) => { const [tokenData, setTokenData] = useState(null); const code = oauthContext?.code || ''; const verifier = oauthContext?.verifier || ''; const {mode} = environment; useEffect(() => { if (code && verifier && !tokenData) { getTokenFromAuthServer({code, verifier, mode}).then(setTokenData); } }, [code, verifier, mode, tokenData]); return ( ) }; export default ExampleApp; ``` ## Einen Zugriffs-Token finden und einrichten Richten Sie den Zugriffs-Token ein und suchen Sie ihn in der Secret Store API, damit Ihre App ihn in späteren Sitzungen verwenden und speichern kann. 1. Fügen Sie die Berechtigung `secret_write` zu Ihrer App hinzu: ```bash stripe apps grant permission "secret_write" "Allows storing secrets between page reloads" ``` 1. Richten Sie in der Nutzeroberflächen-Erweiterung Ihrer App den Zugriffs-Token in der Secret Store API ein: ```ts import {ContextView} from '@stripe/ui-extension-sdk/ui'; import * as React from 'react'; import Stripe from 'stripe'; import {createHttpClient, STRIPE_API_KEY} from '@stripe/ui-extension-sdk/http_client'; import type {ExtensionContextValue} from '@stripe/ui-extension-sdk/context'; const {useState, useEffect} = React; interface TokenData { account_id: string; access_token: string; expires_in: number; } const clientID = 'your_client_id'; const getRedirectURL = (mode: 'live' | 'test') => `https://dashboard.stripe.com/${ mode === 'test' ? 'test/' : '' }apps-oauth/com.example.oauth-example`; // Fetch the authorization token from an example authorization server. const getTokenFromAuthServer = async ({code, verifier, mode}: {code: string, verifier: string, mode: 'live' | 'test'}): Promise => { try { const response = await fetch(`https://api.example.com/oauth2/token?code=${code}&grant_type=authorization_code&code_verifier=${verifier}&client_id=${clientID}&redirect_uri=${getRedirectURL(mode)}`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, }); if (response.ok) { return await response.json(); } throw new Error(await response.text()); } catch (e) { console.error('Unable to retrieve token from authorization server:', (e as Error).message); return null; } }; const stripe = new Stripe(STRIPE_API_KEY, { httpClient: createHttpClient(), apiVersion: '2026-03-25.dahlia', }); // Save the token to Secret Store API const saveTokenData = async ({userID, tokenData}: {userID: string, tokenData: TokenData}) => { try { await stripe.apps.secrets.create({ scope: { type: 'user', user: userID }, name: 'oauth_token', payload: JSON.stringify(tokenData), }); } catch (e) { console.error('Unable to save token to Secret Store API:', (e as Error).message); } } const ExampleApp = ({userContext, environment, oauthContext}: ExtensionContextValue) => { const [tokenData, setTokenData] = useState(null); const code = oauthContext?.code || ''; const verifier = oauthContext?.verifier || ''; const {mode} = environment; const {id: userID} = userContext; useEffect(() => { if (code && verifier && !tokenData) { getTokenFromAuthServer({code, verifier, mode}).then(tokenData => { if (tokenData) { setTokenData(tokenData); saveTokenData({userID, tokenData}); } }); } }, [code, verifier, mode, userID, tokenData]); return ( ) }; export default ExampleApp; ``` Weitere Informationen finden Sie unter [Geheimschlüssel einrichten](https://docs.stripe.com/api/apps/secret_store/set.md). 1. Suchen Sie in der UI-Erweiterung Ihrer App den Zugriffs-Token in der Secret Store API: ```ts import {ContextView} from '@stripe/ui-extension-sdk/ui'; import * as React from 'react'; import Stripe from 'stripe'; import {createHttpClient, STRIPE_API_KEY} from '@stripe/ui-extension-sdk/http_client'; import type {ExtensionContextValue} from '@stripe/ui-extension-sdk/context'; const {useState, useEffect} = React; interface TokenData { account_id: string; access_token: string; expires_in: number; } const stripe = new Stripe(STRIPE_API_KEY, { httpClient: createHttpClient(), apiVersion: '2026-03-25.dahlia', }); // Read the token from Secret Store API const getTokenFromSecretStore = async (userID: string): Promise => { try { const response = await stripe.apps.secrets.find({ scope: { type: 'user', user: userID }, name: 'oauth_token', expand: ['payload'], }); const secretValue: string = response.payload!; return JSON.parse(secretValue) as TokenData; } catch (e) { console.error('Unable to retrieve token from Secret Store API:', (e as Error).message); return null; } }; const ExampleApp = ({userContext}: ExtensionContextValue) => { const [tokenData, setTokenData] = useState(null); const {id: userID} = userContext; useEffect(() => { if (!tokenData) { getTokenFromSecretStore(userID).then(setTokenData); } }, [userID, tokenData]); return ( ) }; export default ExampleApp; ``` Weitere Informationen finden Sie unter [Geheimschlüssel finden](https://docs.stripe.com/api/apps/secret_store/find.md). ## See also - [Geheimschlüssel speichern](https://docs.stripe.com/stripe-apps/store-secrets.md) - [Serverseitige Logik](https://docs.stripe.com/stripe-apps/build-backend.md) - [App hochladen](https://docs.stripe.com/stripe-apps/upload-install-app.md)