Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/customization/match-your-brand.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,31 @@ sidebar_position: 1

Customize the look and feel of your sign-in page by navigating to <CloudLink to="/sign-in-experience/branding">Console > Sign-in experience > Branding</CloudLink>. This section allows you to easily adjust key branding elements.

### Brand color
### Brand color \{#brand-color}

Define the primary color used throughout the sign-in experience, including primary buttons, links, and other components. Replace the default Logto purple color with your brand's color. For dark mode, a separate brand color can be specified.

### Company logo
### Company logo \{#company-logo}

The logo will be displayed on the sign-in homepage, sign-up home, loading page, and other interfaces with our expansion.

- There are some limitations for images: they must be under 500KB and in SVG, PNG, JPG, JPEG, or ICO format.
- If you leave the logo field blank, the logo will not display in the interface.
- A dark mode version of the logo can also be uploaded.

### Favicon
### Favicon \{#favicon}

A favicon is a small icon representing a website and is displayed in the browser tab, bookmarks, and other areas of the browser interface.

- The image must be under 500KB and in SVG, PNG, JPG, JPEG, or ICO format. Uploading a square image is recommended to ensure a good presentation effect.
- A dark mode version of the favicon can also be uploaded.
- Besides, the browser title for different flows (Sign in/Sign up/Forgot password, etc.) is now used instead of a custom title.

### Dark mode
### Dark mode \{#dark-mode}

Enable dark mode to automatically adjust the sign-in page's appearance based on the user's system preferences.

### Hide Logto branding
### Hide Logto branding \{#hide-logto-branding}

By default, the out-of-the-box sign-in experience pages display "Powered by Logto" at the bottom. Enable the "Hide Logto branding" option to remove the Logto mark and create a clean, professional sign-in experience that exclusively showcases your own brand identity.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ The guide in the console is only for quick start with Logto using our SDK. For c
<Url href="/authorization">Authorization</Url>
<Url href="/organizations">Organizations</Url>

## FAQs
## FAQs \{#faqs}

<details>
<summary>
Expand Down
8 changes: 4 additions & 4 deletions docs/logto-cloud/system-limit.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ You may notice that some items on the pricing page are marked as _unlimited_ or

If your use case is reasonable but reaches a system limit, feel free to contact us and share your feedback. This helps us better understand real-world usage patterns and adjust system limits to better support our loyal customers.

## Tenant-level rate limit protection
## Tenant-level rate limit protection \{#tenant-level-rate-limit-protection}

### Dev tenants
### Dev tenants \{#dev-tenants}

For Dev tenants, users can take advantage of Logto's free features and offerings. To prevent abuse and set clear expectations, we define certain system limits. These limits help us manage our platform sustainably while still providing free access for testing and development purposes.

Expand Down Expand Up @@ -41,7 +41,7 @@ If you'd like to increase your quota, you can contact us for assistance. We also
| Audit log retention | 14 days |
| Tenant members | 20 |

### Pro tenant
### Pro tenant \{#pro-tenant}

For Pro tenants, entity limits define the upper ceiling for add-ons and other "unlimited" entities such as applications. The details of the Pro plan's system limits are listed below.

Expand Down Expand Up @@ -74,6 +74,6 @@ For Pro tenants, entity limits define the upper ceiling for add-ons and other "u
| Custom domains | 10 |
| Tenant members | 100 |

### Enterprise
### Enterprise \{#enterprise}

For Enterprise plans, limits and features are fully customizable and managed through a the contract. Please [contact us](https://logto.io/contact) for more details.

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Passe die Spracheinstellungen ganz einfach in der Logto-Konsole an – ganz ohne
2. **Sprache verwalten**: Klicke auf die Schaltfläche „Sprache verwalten“, um auf deine Sprachbibliothek zuzugreifen.
- **Vorhandene Sprachen bearbeiten:** Passe Übersetzungen der von Logto bereitgestellten Sprachen an. Diese Sprachen können nicht gelöscht werden, aber deine Änderungen überschreiben die Standardwerte.
- **Neue Sprache hinzufügen:** Klicke auf die Schaltfläche „Sprache hinzufügen“, wähle ein Sprach-Tag aus, gib deine Übersetzungen ein und speichere die Änderungen, um eine neue Sprache hinzuzufügen.
3. **Auto-Erkennung aktivieren:** Wenn aktiviert, wird die Anmeldeseite automatisch in der bevorzugten Sprache des Benutzers angezeigt, basierend auf den Geräteeinstellungen.
3. **Auto-Erkennung aktivieren:** Wenn aktiviert, wird die Anmeldeseite automatisch in der bevorzugten Sprache des Benutzers entsprechend den Geräteeinstellungen angezeigt.
4. **Standardsprache festlegen:** Du kannst eine Standardsprache aus deiner Sprachbibliothek auswählen. Sie wird verwendet, wenn die erkannte Benutzersprache in der aktuellen Sprachbibliothek nicht abgedeckt ist.

Hier sind einige wichtige Begriffe, die du beim Verwalten von Sprachen kennen solltest:
Expand Down Expand Up @@ -54,13 +54,13 @@ Du kannst auch die [PATCH /api/sign-in-exp](https://openapi.logto.io/group/endpo

## Sprachauflösung zur Laufzeit \{#runtime-language-resolution}

Zur Laufzeit wird die Sprache der Anmeldeerfahrung mit folgender Priorität bestimmt:
Zur Laufzeit wird die Sprache der Anmeldeerfahrung mit folgender Priorität ermittelt:

1. `ui_locales` OIDC-Parameter aus der aktuellen Authentifizierungsanfrage (das erste unterstützte Tag wird verwendet). Siehe [ui_locales](/end-user-flows/authentication-parameters/ui-locales).
2. Andernfalls, wenn „Auto-Erkennung“ aktiviert ist, die erkannte Sprache des Benutzerclients (z. B. aus dem HTTP-Header `Accept-Language`).
3. Andernfalls die Standardsprache des Mandanten in der Anmeldeerfahrung.

Diese Auflösung beeinflusst auch die E-Mail-Lokalisierung für durch die Interaktion ausgelöste Nachrichten. Mehr erfahren: [E-Mail-Vorlagen-Lokalisierung](/connectors/email-connectors/email-templates#email-template-localization).
Diese Auflösung wirkt sich auch auf die E-Mail-Lokalisierung für durch die Interaktion ausgelöste Nachrichten aus. Mehr erfahren: [E-Mail-Vorlagen-Lokalisierung](/connectors/email-connectors/email-templates#email-template-localization).

## Anwendungsfälle \{#use-cases}

Expand All @@ -72,14 +72,14 @@ Die Logto-Anmeldeerfahrung i18n macht individuelle Sprachen möglich.

Klicke auf das Sprach-Tag `ja`, um deine eigene japanische Übersetzung hinzuzufügen.

So kann der Benutzer, der deine Seite aus Japan besucht, die Inhalte auf Japanisch lesen, die du gerade aus dem Englischen übersetzt hast.
So kann der Benutzer, der deine Seite aus Japan aufruft, die Inhalte auf Japanisch lesen, die du gerade aus dem Englischen übersetzt hast.

## FAQs \{#faqs}

<details>
<summary>

### Was passiert, wenn die von mir hinzugefügte Sprache zur von Logto bereitgestellten Sprache wird? \{#what-if-the-language-i-added-becomes-logto-provided-language}
### Was passiert, wenn die von mir hinzugefügte Sprache zu einer von Logto bereitgestellten Sprache wird? \{#what-if-the-language-i-added-becomes-logto-provided-language}

</summary>

Expand All @@ -90,15 +90,28 @@ Neben dem Sprach-Tag auf der linken Seite erscheint ein von Logto bereitgestellt
<details>
<summary>

### Was ist, wenn ich nur einige wenige benutzerdefinierte Werte hinzugefügt habe? \{#what-if-i-only-added-a-few-custom-values}
### Was ist, wenn ich nur wenige benutzerdefinierte Werte hinzugefügt habe? \{#what-if-i-only-added-a-few-custom-values}

</summary>

Was die Endbenutzer sehen, ist das Ergebnis der Zusammenführung beider Spalten.
Das, was die Endbenutzer sehen, ist das Ergebnis der Zusammenführung beider Spalten.
Angenommen, du möchtest nur einen Teil der ursprünglichen von Logto bereitgestellten Inhalte anpassen. Der einzige Unterschied zwischen deinem Anmeldebildschirm und dem von Logto bereitgestellten besteht in den von dir bearbeiteten Schlüsseln. Der Rest des Inhalts bleibt unverändert.

</details>

<details>
<summary>

### Wie kann ich einen Standard-Ländercode für Telefonnummern in der Anmeldeerfahrung festlegen? \{#how-can-i-set-a-default-phone-number-country-code-for-the-sign-in-experience}

</summary>

Der Ländercode für Telefonnummern in der [Anmeldeerfahrung](/end-user-flows/sign-up-and-sign-in/sign-up) richtet sich standardmäßig nach der Browsersprache des Benutzers. Wenn beispielsweise die Browsersprache eines Benutzers auf `fr` eingestellt ist, wird der Ländercode standardmäßig auf Frankreich (+33) gesetzt.

Um den Standard-Ländercode für bestimmte Benutzer oder Regionen programmatisch zu steuern, kannst du den [`ui_locales`](/end-user-flows/authentication-parameters/ui-locales) Authentifizierungsparameter verwenden. Wenn du z. B. `ui_locales=ja` setzt, wird der Ländercode standardmäßig auf Japan (+81) gesetzt.

</details>

## Verwandte Ressourcen \{#related-resources}

<Url href="https://blog.logto.io/rtl-language-support">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,50 +8,54 @@ sidebar_position: 1

Passe das Aussehen und das Gefühl deiner Anmeldeseite an, indem du zu <CloudLink to="/sign-in-experience/branding">Konsole > Anmeldeerlebnis > Branding</CloudLink> navigierst. In diesem Abschnitt kannst du wichtige Branding-Elemente ganz einfach anpassen.

**Markenfarbe**
### Markenfarbe \{#brand-color}

Definiere die Primärfarbe, die im gesamten Anmeldeerlebnis verwendet wird, einschließlich primärer Schaltflächen, Links und anderer Komponenten. Ersetze das standardmäßige Logto-Lila durch die Farbe deiner Marke. Für den Dunkelmodus kann eine separate Markenfarbe festgelegt werden.

**Firmenlogo**
### Firmenlogo \{#company-logo}

Das Logo wird auf der Anmelde-Startseite, der Registrierungs-Startseite, der Lade-Seite und anderen Oberflächen mit unserer Erweiterung angezeigt.
Das Logo wird auf der Anmelde-Startseite, der Registrierungsseite, der Lade-Seite und anderen Oberflächen mit unserer Erweiterung angezeigt.

- Es gibt einige Einschränkungen für Bilder: Sie müssen unter 500 KB groß sein und im SVG-, PNG-, JPG-, JPEG- oder ICO-Format vorliegen.
- Wenn du das Logofeld leer lässt, wird das Logo nicht in der Oberfläche angezeigt.
- Es gibt einige Einschränkungen für Bilder: Sie müssen unter 500KB groß sein und im SVG-, PNG-, JPG-, JPEG- oder ICO-Format vorliegen.
- Wenn du das Logo-Feld leer lässt, wird das Logo nicht in der Oberfläche angezeigt.
- Eine Version des Logos für den Dunkelmodus kann ebenfalls hochgeladen werden.

**Favicon**
### Favicon \{#favicon}

Ein Favicon ist ein kleines Symbol, das eine Website repräsentiert und im Browser-Tab, in Lesezeichen und anderen Bereichen der Browseroberfläche angezeigt wird.
Ein Favicon ist ein kleines Symbol, das eine Website repräsentiert und im Browser-Tab, in Lesezeichen und anderen Bereichen der Browser-Oberfläche angezeigt wird.

- Das Bild muss unter 500 KB groß sein und im SVG-, PNG-, JPG-, JPEG- oder ICO-Format vorliegen. Es wird empfohlen, ein quadratisches Bild hochzuladen, um eine gute Darstellung zu gewährleisten.
- Das Bild muss unter 500KB groß sein und im SVG-, PNG-, JPG-, JPEG- oder ICO-Format vorliegen. Es wird empfohlen, ein quadratisches Bild hochzuladen, um eine gute Darstellung zu gewährleisten.
- Eine Version des Favicons für den Dunkelmodus kann ebenfalls hochgeladen werden.
- Außerdem wird jetzt der Browser-Titel für verschiedene Abläufe (Anmelden / Registrieren / Passwort vergessen usw.) anstelle eines benutzerdefinierten Titels verwendet.

**Dunkelmodus**
### Dunkelmodus \{#dark-mode}

Aktiviere den Dunkelmodus, um das Erscheinungsbild der Anmeldeseite automatisch an die Systemeinstellungen des Benutzers anzupassen.

### Logto-Branding ausblenden \{#hide-logto-branding}

Standardmäßig zeigen die sofort einsatzbereiten Anmeldeseiten „Powered by Logto“ am unteren Rand an. Aktiviere die Option „Logto-Branding ausblenden“, um das Logto-Zeichen zu entfernen und ein sauberes, professionelles Anmeldeerlebnis zu schaffen, das ausschließlich deine eigene Markenidentität präsentiert.

## App-spezifisches Branding \{#app-specific-branding}

Wenn dein Multi-App-Geschäft App-spezifische Anmeldeerlebnisse benötigt, kannst du dies auf der Anwendungsdetailseite konfigurieren. Navigiere zu <CloudLink to="/applications">Konsole > Anwendungen</CloudLink>.

Durch das Aktivieren des "App-spezifischen Anmeldeerlebnisses" kannst du spezifische Branding-Logos, Favicons, Farben und sogar [benutzerdefiniertes CSS](/customization/custom-css) für jede App festlegen. Wenn eine Anmeldung von einer App mit aktiviertem App-spezifischen Branding initiiert wird, wird das Anmeldeerlebnis entsprechend den App-spezifischen Branding-Einstellungen angepasst; andernfalls werden die Standard-Einstellungen des Omni-Anmeldeerlebnisses verwendet.
Durch das Aktivieren von „App-spezifisches Anmeldeerlebnis“ kannst du für jede App spezifische Branding-Logos, Favicons, Farben und sogar [benutzerdefiniertes CSS](/customization/custom-css) festlegen. Wenn eine Anmeldung von einer App mit aktiviertem App-spezifischem Branding ausgelöst wird, wird das Anmeldeerlebnis entsprechend den App-spezifischen Branding-Einstellungen angepasst; andernfalls werden die Standard-Einstellungen des Omni-Anmeldeerlebnisses verwendet.

Sowohl helle als auch dunkle Modus-Einstellungen sind für das App-spezifische Branding verfügbar. Die Einstellungen für den Dunkelmodus werden nur wirksam, wenn der Dunkelmodus in den [Omni-Anmeldeerlebnis](#omni-sign-in-experience)-Einstellungen aktiviert ist.
Sowohl Einstellungen für den hellen als auch für den dunklen Modus sind für das App-spezifische Branding verfügbar. Die Einstellungen für den Dunkelmodus werden nur wirksam, wenn der Dunkelmodus in den [Omni-Anmeldeerlebnis](#omni-sign-in-experience)-Einstellungen aktiviert ist.

## Organisationsspezifisches Branding \{#organization-specific-branding}

Um das Logo der Organisation deines Kunden dynamisch im Anmeldeerlebnis anzuzeigen, kannst du die Organisationslogos auf der Seite mit den Organisationseinstellungen hochladen. Navigiere zu <CloudLink to="/organizations">Konsole > Organisationen</CloudLink>.

Durch das Aktivieren des "Organisationsspezifischen Anmeldeerlebnisses" kannst du, wie beim App-spezifischen Branding, auch spezifische Branding-Logos, Favicons, Farben und [benutzerdefiniertes CSS](/customization/custom-css) für jede Organisation festlegen.
Durch das Aktivieren von „Organisationsspezifisches Anmeldeerlebnis“ kannst du, wie beim App-spezifischen Branding, für jede Organisation spezifische Branding-Logos, Favicons, Farben und [benutzerdefiniertes CSS](/customization/custom-css) festlegen.

Wenn du dann eine Anmeldung auslöst, kannst du die Organisations-ID im Parameter `organization_id` übergeben, um Logto mitzuteilen, welches Organisationslogo angezeigt werden soll. Zum Beispiel, um das Organisationslogo für die Organisations-ID `123456` anzuzeigen:

- Wenn du das Logto SDK verwendest, kannst du den Parameter `organization_id` im Objekt `extraParams` der Methode `signIn` übergeben.
- Wenn du einen OIDC-Client verwendest, kannst du den Parameter `organization_id` beim Aufruf des [Autorisierungsendpunkts](https://openid.net/specs/openid-connect-core-1_0.html#AuthorizationEndpoint) übergeben.

Sowohl helle als auch dunkle Modus-Einstellungen sind für das organisationsspezifische Branding verfügbar. Die Einstellungen für den Dunkelmodus werden nur wirksam, wenn der Dunkelmodus in den [Omni-Anmeldeerlebnis](#omni-sign-in-experience)-Einstellungen aktiviert ist.
Sowohl Einstellungen für den hellen als auch für den dunklen Modus sind für das organisationsspezifische Branding verfügbar. Die Einstellungen für den Dunkelmodus werden nur wirksam, wenn der Dunkelmodus in den [Omni-Anmeldeerlebnis](#omni-sign-in-experience)-Einstellungen aktiviert ist.

:::note
Wenn sowohl App-spezifisches Branding als auch organisationsspezifisches Branding aktiviert sind, hat das organisationsspezifische Branding Vorrang. Die vollständige Reihenfolge der Priorität ist:
Expand All @@ -64,7 +68,7 @@ Hier ist ein Beispiel, wie du den Parameter `organization_id` in der Methode `si

```tsx
logtoClient.signIn({
// ...andere Parameter
// ...weitere Parameter
redirectUri: 'https://your-redirect-uri',
extraParams: {
organization_id: '123456',
Expand Down
Loading
Loading