> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.de/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# App-Konfiguration (BETA)

> Referenzinformationen zu Konfigurationsoptionen für Apps, die auf der neuen Entwicklerplattform (BETA) basieren

<style>
  {`
    .github-link a div,
    .github-link a div p {
      display: inline;
      margin: 0;
      padding: 0;
    }
    .github-link {
      background-color: rgb(255, 255, 255);
      border-radius: 24px;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
      padding: 5px;
      max-width: 247px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    .github-icon {
        display: inline;
        width: 24px;
        margin-right: 8px;
        flex-shrink: 0;
    }
    .table-key, .table-key div, .table-key p {
      margin: 0;
      font-size: 14px;
    }
    `}
</style>

Im Folgenden finden Sie Referenzinformationen zu App-Funktionen der Entwicklerplattform, einschließlich Definitionen für Konfigurationsdateien, Details zu Bereichen und mehr.

## Projektstruktur

* Alle Projektkomponenten müssen sich in dem `src`-Verzeichnis befinden, das in der `hsproject.json`-Konfigurationsdatei der obersten Ebene  angegeben ist.
* Alle App-Funktionen und -Komponenten müssen innerhalb des Verzeichnisses `src/app/`-gespeichert werden. In diesem `app/`-Verzeichnis definieren Sie Unterverzeichnisse für jede Funktion, die Ihre App unterstützen soll:
  * App-Events sind in `app-events/` konfiguriert.
  * App-Objekte sind in `app-objects/` definiert.
  * Alle Kartenfunktionen sind in `cards/` definiert.
  * Die Funktionen der Einstellungsseite sind innerhalb von `settings/` definiert.
  * Die Telemetriedaten sind in `telemetry/` konfiguriert.
  * Webhook-Abonnements sind innerhalb von `webhooks/` definiert.
  * Benutzerdefinierte Workflow-Aktionen sind innerhalb von `workflow-actions/` definiert.
* In jedem Unterverzeichnis für Funktionen konfigurieren Sie die jeweiligen Funktionen mithilfe einer `*-hsmeta.json`-Datei. Sie können dem Dateinamen etwas voranstellen, das für Ihre App sinnvoll ist (z. B. `my-app-hsmeta.json`), solange die Datei mit `-hsmeta.json` endet. Diese Dateien müssen sich auf der Stammebene ihres jeweiligen Ordners befinden (z. B. `app/my-app-hsmeta.json`, `cards/my-card-hsmeta.json`).

Die folgende Beispielverzeichnisstruktur zeigt alle verfügbaren Funktionen. Einzelheiten zum Konfigurieren der `app-hsmeta.json`-App-Schemadatei der obersten Ebene finden Sie unten im [Abschnitt App-Schema](#app-schema). Um App-Funktionen hinzuzufügen, lesen Sie bitte den Abschnitt [Hinzufügen von App-Funktionen](#adding-app-features).

```shell theme={null}
my-project-folder/
└── hsproject.json
└── src
    └── app/
        └── app-hsmeta.json/
        └── app-events/
            └── my-event-type-hsmeta.json
        └── cards/
            └── MyCard.jsx
            └── my-app-card-hsmeta.json
            └── package.json
        └── settings/
            └── Settings.tsx
            └── settings-hsmeta.json
            └── package.json
        └── telemetry/
            └── telemetry-hsmeta.json
        └── webhooks/
            └── webhooks-hsmeta.json
        └── workflow-actions/
            └── custom-action-hsmeta.json
```

<Card title="Beispiel auf GitHub anzeigen" href="https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/tree/main/projects/app-object-getting-started-template" icon="github" horizontal />

Die HubSpot Visual Studio Code-Erweiterung bietet eine [Typüberprüfung](/developer-tooling/local-development/vs-code-extension#validate-hs-meta-json-config-files) für jede Eigenschaft in Ihren `*-hsmeta.json`-Konfigurationsdateien.

## Angeben von UIDs

Das `uid`-Feld ist eine intern eindeutige ID für Ihre spezifische App und muss auch innerhalb des Projekts global eindeutig sein. Für alle [App-Funktionen](#adding-app-features) ist jeweils eine eigene `uid`-Datei in ihren jeweiligen `*-hsmeta.json`-Dateien definiert, die sich von der entsprechenden `uid` der obersten Ebene unterscheiden muss, welche Sie in der `app-hsmeta.json`-Datei Ihrer App auswählen.

## App-Schema

Die Konfiguration der obersten Ebene für Ihre App wird in einer `app-hsmeta.json`-Konfigurationsdatei im `app`-Verzeichnis angegeben.

```shell theme={null}
my-project-folder/
└── src
    └── app/
        └── app-hsmeta.json/
```

Nachfolgend finden Sie die Konfigurationsoptionen für `app-hsmeta.json`.

```json theme={null}
{
  "uid": "new_developer_platform_app",
  "type": "app",
  "config": {
    "description": "An example to demonstrate how to build an app with developer projects.",
    "name": "my first app",
    "distribution": "marketplace",
    "auth": {
      "type": "oauth",
      "redirectUrls": ["http://localhost:3000/oauth-callback"],
      "requiredScopes": ["crm.objects.contacts.read", "crm.objects.contacts.write"],
      "optionalScopes": [],
      "conditionallyRequiredScopes": []
    },
    "permittedUrls": {
      "fetch": ["https://api.hubapi.com"],
      "iframe": [],
      "img": []
    },
    "support": {
      "supportEmail": "support@example.com",
      "documentationUrl": "https://example.com/docs",
      "supportUrl": "https://example.com/support",
      "supportPhone": "+18005555555"
    }
  }
}
```

<Card title="Beispiel auf GitHub anzeigen" href="https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/app-object-getting-started-template/src/app/app-hsmeta.json" icon="github" horizontal />

Die einzelnen Konfigurationsoptionen sind in der folgenden Tabelle aufgeführt. Weitere Informationen zum [Verteilen Ihrer App](#distribution), zum Konfigurieren der [Authentifizierung](#authentication) und zum Angeben von [Bereichen](#scopes) finden Sie in den Abschnitten unterhalb der Tabelle.

<p className="table-key">
  Mit <span style={{ color: 'red' }}>\*</span> markierte Felder sind Pflichtfelder.
</p>

| Feld                                                | Typ          | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| --------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `uid`<span style={{color:"red"}}>\*</span>          | Zeichenfolge | Eine interne eindeutige ID für die App. Sie muss innerhalb des Projekts global eindeutig und kann eine beliebige Zeichenfolge mit bis zu 64 Zeichen sein. Zeichen können in Groß- oder Kleinbuchstaben geschrieben werden und Ziffern, Unterstriche (`_`), Bindestriche (`-`) und Punkte (`.`) enthalten.                                                                                                                                                                                                   |
| `type`<span style={{color:"red"}}>\*</span>         | Zeichenfolge | Der Typ der Komponente. Muss mit dem Namen des übergeordneten Ordners (`app`) übereinstimmen.                                                                                                                                                                                                                                                                                                                                                                                                               |
| `description`<span style={{color:"red"}}>\*</span>  | Zeichenfolge | Eine Beschreibung, was die App für den installierenden Benutzer tut. Kann eine beliebige Zeichenfolge mit bis zu 8.192 Zeichen sein.                                                                                                                                                                                                                                                                                                                                                                        |
| `name`<span style={{color:"red"}}>\*</span>         | Zeichenfolge | Dies ist der Name der App, der in HubSpot angezeigt wird. Kann eine beliebige Zeichenfolge mit bis zu 200 Zeichen sein. Darf nicht mit einem Leerzeichen beginnen oder enden.                                                                                                                                                                                                                                                                                                                               |
| `distribution`<span style={{color:"red"}}>\*</span> | Zeichenfolge | Die Methode der App-Verteilung, die auf eine der folgenden Optionen festgelegt werden kann:<ul><li>`marketplace`: wird verwendet, wenn die App für ein Listing im HubSpot App Marketplace in Frage kommen soll.</li><li>`private`: wird verwendet, wenn Sie Ihre App nur in einer bestimmten Gruppe von Accounts der Zulassungsliste oder jeweils in einem einzelnen Account installieren möchten.</li></ul> <p>Weitere Informationen finden Sie im Abschnitt [Verteilung](#distribution) weiter unten.</p> |
| `auth`<span style={{color:"red"}}>\*</span>         | Objekt       | Ein Objekt, das die Details der Authentifizierungsmethode der App enthält. Weitere Informationen finden Sie im [Abschnitt zur Authentifizierung](#authentication) weiter unten.                                                                                                                                                                                                                                                                                                                             |
| `permittedUrls`                                     | Objekt       | Ein Array, das die URLs enthält, die die App aufrufen darf. URLs müssen dem HTTPS-Schema folgen und eine [Autorität](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL#authority) enthalten, ggf. gefolgt von einem optionalen Pfadpräfix.                                                                                                                                                                                                                   |
| `supportEmail`                                      | Zeichenfolge | Eine gültige E-Mail-Adresse, an die sich Benutzer wenden können, wenn sie Support benötigen.                                                                                                                                                                                                                                                                                                                                                                                                                |
| `documentationUrl`                                  | Zeichenfolge | Die externe URL, zu der Benutzer navigieren können, um die Begleitdokumentation zu erhalten. Muss HTTPS verwenden.                                                                                                                                                                                                                                                                                                                                                                                          |
| `supportUrl`                                        | Zeichenfolge | Die externe URL, zu der Benutzer navigieren können, um zusätzlichen Support zu erhalten. Muss HTTPS verwenden.                                                                                                                                                                                                                                                                                                                                                                                              |
| `supportPhone`                                      | Zeichenfolge | Die Telefonnummer, die Benutzer kontaktieren können, wenn sie Support benötigen. Muss mit einem Pluszeichen (`+`) beginnen.                                                                                                                                                                                                                                                                                                                                                                                 |

### Verteilung

Mit dem `distribution`-Feld in Ihrem App-Schema können Sie konfigurieren, wie Sie Ihre App verteilen möchten:

* Wenn Sie Ihre App im [HubSpot App Marketplace](https://ecosystem.hubspot.com/marketplace/apps) listen wollen, legen Sie das `distribution`-Feld auf `"marketplace"` fest. Ein Beispiel für ein App-Schema für diese Option finden Sie [hier](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/public-app-getting-started-template/src/app/app-hsmeta.json). Wenn Sie diese Option wählen, stellen Sie sicher, dass Sie innerhalb dem `type` der `auth`-Eigenschaft den Wert auf `oauth`setzen, wie im Abschnitt [Authentifizierung](#authentication) weiter unten beschrieben.
* Wenn Sie zulassen möchten, dass Ihre App in einer bestimmten Gruppe von Accounts der Zulassungsliste installiert werden darf, oder falls Sie die Installation jeweils auf einen einzelnen Account beschränken möchten, wählen Sie für den `distribution`-Wert `"private"`. Stellen Sie sicher, dass Sie den `type` innerhalb der `auth`-Eigenschaft genauso bestimmen:
  * Wenn Sie Ihre App basierend auf [einer Zulassungsliste, die Sie in Ihren Projekteinstellungen konfiguriert haben,](/apps/developer-platform/build-apps/manage-apps-in-hubspot#manage-authentication-for-your-app) und somit in mehreren Accounts installieren möchten, muss der `type` der Authentifizierung `oauth` lauten. Ein Beispiel für dieses App-Schema-Option finden [Sie hier](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/private-app-oauth-getting-started-template/src/app/app-hsmeta.json).
  * Um die Installation auf einen einzelnen Account zu beschränken (entweder auf den Account, den Sie für die Entwicklung verwenden, oder auf einen anderen, auf den der installierende Benutzer Zugriff hat), setzen Sie den `type` der Authentifizierung auf `static`. Ein Beispiel für ein App-Schema für statische Authentifizierung finden Sie [hier](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/private-app-static-getting-started-template/src/app/app-hsmeta.json).

### Authentifizierung

Die Authentifizierung für Ihre App wird über die `auth`-Eigenschaft in Ihrem App-Schema konfiguriert. Sie können dabei die Bereichsanforderungen Ihrer App, Weiterleitungs-URLs und den Authentifizierungstyp angeben.

<p className="table-key">
  Mit <span style={{ color: 'red' }}>\*</span> markierte Felder sind Pflichtfelder.
</p>

| Feld                                                  | Typ          | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                              |
| ----------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type`<span style={{color:"red"}}>\*</span>           | Zeichenfolge | Die Art der Authentifizierung, für die folgende Optionen infrage kommen: <ul><li>`oauth`: Installation über OAuth zulassen, entweder für eine bestimmte Gruppe von Accounts der Zulassungsliste oder als im HubSpot App Marketplace gelistet.</li><li>`static`: Beschränkte Installation Ihrer App auf einen einzigen Account, auf den der installierende Benutzer Zugriff hat.</li></ul>                                 |
| `redirectUrls`<span style={{color:"red"}}>\*</span>   | Array        | Eine Liste von URLs, zu denen der OAuth-Prozess zurückleiten darf. Jede App muss über mindestens eine derartige URL verfügen und HTTPS verwenden. Die einzige Ausnahme ist, dass für `http://localhost` das Testen erlaubt ist.                                                                                                                                                                                           |
| `requiredScopes`<span style={{color:"red"}}>\*</span> | Array        | Eine Liste der erforderlichen Bereiche Ihrer App. Jede App muss mindestens einen Bereich enthalten, wobei es erforderlich ist, dass der installierende Benutzer diese Bereiche zulässt, wenn die App erfolgreich installiert werden soll. [Erfahren Sie im Folgenden mehr über Bereiche](#scopes).                                                                                                                        |
| `optionalScopes`                                      | Array        | Eine Liste der optionalen Bereiche Ihrer App. Diese Bereiche können bei der Installation von der Autorisierung ausgeschlossen werden, wenn der Account oder der Benutzer, der die App installiert, nicht über entsprechende Berechtigungen verfügt. In diesem Fall wird der Bereich nicht in das resultierende Aktualisierungs- oder Zugriffs-Token aufgenommen. [Erfahren Sie im Folgenden mehr über Bereiche](#scopes). |
| `conditionallyRequiredScopes`                         | Array        | Eine Liste von Bereichen, die nur erforderlich sind, wenn sie im `scope`-Abfrageparameter der Installations-URL enthalten sind. [Erfahren Sie im Folgenden mehr über Bereiche](#scopes).                                                                                                                                                                                                                                  |

### Bereiche

Im `auth`-Feld einer App-Konfigurationsdatei können Sie drei [Arten von Bereichen](/apps/legacy-apps/public-apps/overview#scope-types) angeben: erforderliche Bereiche, bedingt erforderliche Bereiche und optionale Bereiche.

Ihre App muss mindestens den `read`-Bereich enthalten, damit Kunden auf den zugehörigen CRM-Objekttyp zugreifen können.

```json theme={null}
"auth": {
      "type" : "oauth",
      "redirectUrls": ["http://localhost:3000/oauth-callback"],
      "requiredScopes": [
        "crm.objects.contacts.read",
        "crm.objects.contacts.write"
      ],
      "optionalScopes": [],
      "conditionallyRequiredScopes": []
    },

```

Eine vollständige Liste der verfügbaren Bereiche finden Sie in der [Referenz zu Bereichen](/apps/legacy-apps/authentication/scopes).

## App-Features hinzufügen

Um App-Funktionen wie Webhook-Abonnements, benutzerdefinierte Workflow-Aktionen und App-Karten zu konfigurieren, lesen Sie bitte die folgenden Anleitungen, um Näheres zum Hinzufügen der zugehörigen `*-hsmeta.json`-Dateien zu Ihrem Projekt zu erfahren:

* [Eine App-Karte erstellen](/apps/developer-platform/add-features/ui-extensibility/app-cards/create-an-app-card)
* [App-Events definieren](/apps/developer-platform/add-features/app-events/overview)
* [App-Objekte erstellen](/apps/developer-platform/add-features/app-objects/quickstart-guide-to-app-objects)
* [Eine Einstellungskomponente erstellen](/apps/developer-platform/add-features/ui-extensibility/create-a-settings-component)
* [Eine benutzerdefinierte Workflow-Aktion einrichten](/apps/developer-platform/add-features/custom-workflow-actions)
* [Ein Webhook-Abonnement konfigurieren](/apps/developer-platform/add-features/configure-webhooks)
* [Telemetriedaten hinzufügen](/apps/developer-platform/add-features/add-telemetry)
