Skip to content

Commit

Permalink
chore: add i18n
Browse files Browse the repository at this point in the history 
add i18n translation
  • Loading branch information
@simeng-li
simeng-li committed Jan 24, 2025
1 parent 45370ea commit 1b92da5
Show file tree
Hide file tree
Showing 49 changed files with 1,047 additions and 640 deletions.
71 changes: 69 additions & 2 deletions ...ocusaurus-plugin-content-docs/current/quick-starts/framework/flutter/README.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
slug: /quick-starts/flutter
sidebar_label: Flutter
sidebar_custom_props:
description: Flutter ist ein Framework zum Erstellen hybrider mobiler Apps.
description: Flutter ist ein Framework zur Erstellung hybrider mobiler Apps.
language: dart
official_link: https://flutter.dev
app_type: Native app
Expand All @@ -28,13 +28,15 @@ Dieses Tutorial zeigt dir, wie du Logto in deine Flutter-Anwendung integrieren k
## Voraussetzungen \{#prerequisites}

- Ein [Logto Cloud](https://cloud.logto.io) Konto oder ein [selbst gehostetes Logto](/introduction/set-up-logto-oss).
- Eine erstellte Logto native Anwendung.
- Eine Logto native Anwendung erstellt.
- Eine Flutter- oder Dart-Entwicklungsumgebung.

## Installation \{#installation}

<Installation />

## Einrichtung \{#set-up-and-dependencies}

<Dependency />

## Integration \{#integration}
Expand All @@ -51,6 +53,71 @@ Dieses Tutorial zeigt dir, wie du Logto in deine Flutter-Anwendung integrieren k

<Organization />

## Migrationsanleitung \{#migration-guide}

Wenn du von einer vorherigen Version des Logto Dart SDKs migrierst, Version < 3.0.0:

1. Aktualisiere deine `pubspec.yaml` Datei, um die neueste Version des Logto Dart SDK zu verwenden.

```yaml title="pubspec.yaml"
dependencies:
logto_dart_sdk: ^3.0.0
```
2. Aktualisiere die Android-Manifestdatei, ersetze die veraltete `flutter_web_auth` Callback-Aktivität durch die neue `flutter_web_auth_2`.

- `FlutterWebAuth` -> `FlutterWebAuth2`
- `flutter_web_auth` -> `flutter_web_auth_2`

3. Übergebe die `redirectUri` an die `signOut` Methode.

`redirectUri` ist jetzt erforderlich, wenn die `signOut` Methode aufgerufen wird. Für die iOS-Plattform ist dieser Parameter nutzlos, aber für Android- und Web-Plattformen, die eine zusätzliche `end_session` Anfrage benötigen, um die Anmeldesitzung zu bereinigen, wird dieser Parameter als `post_logout_redirect_uri` Parameter in der `end_session` Anfrage verwendet.

```dart
await logtoClient.signOut(redirectUri);
```

## Fehlerbehebung \{#troubleshooting}

### Fehlerbehebung Android

- Du musst deine AndroidManifest.xml aktualisieren, um die `com.linusu.flutter_web_auth_2.CallbackActivity` Aktivität einzuschließen, etwa so:

```xml title="android/app/src/main/AndroidManifest.xml"
<manifest>
<application>
<!-- füge die com.linusu.flutter_web_auth_2.CallbackActivity Aktivität hinzu -->
<activity
android:name="com.linusu.flutter_web_auth_2.CallbackActivity"
android:exported="true">
<intent-filter android:label="flutter_web_auth_2">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="YOUR_CALLBACK_URL_SCHEME_HERE" />
</intent-filter>
</activity>
</application>
</manifest>
```

- Wenn du S+ (SDK-Version 31 und höher) anvisierst, musst du einen expliziten Wert für `android:exported` angeben. Wenn du den früheren Installationsanweisungen gefolgt bist, war dies nicht enthalten. Stelle sicher, dass du `android:exported="true"` zur `com.linusu.flutter_web_auth.CallbackActivity` Aktivität in deiner `AndroidManifest.xml` Datei hinzufügst.

- Browser wird nach erfolgreicher Anmeldung nicht geschlossen:

Um sicherzustellen, dass `flutter_web_auth_2` korrekt funktioniert, musst du alle `android:taskAffinity` Einträge aus deiner `AndroidManifest.xml` Datei entfernen. Setze `android:launchMode="singleTop"` zur Hauptaktivität in deiner `AndroidManifest.xml` Datei.

```xml title="android/app/src/main/AndroidManifest.xml"
<activity
android:name=".MainActivity"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
// ...
/>
```

## Weiterführende Lektüre \{#further-readings}

<FurtherReadings />
129 changes: 70 additions & 59 deletions ...urus-plugin-content-docs/current/quick-starts/framework/flutter/_dependency.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
### Abhängigkeiten und Konfigurationen \{#dependency-and-configurations}
### SDK-Version-Kompatibilität \{#sdk-version-compatibility}

Dieses SDK hat die folgenden Abhängigkeiten, einige erfordern zusätzliche Konfigurationen:
| Logto SDK-Version | Dart SDK-Version | Dart 3.0 kompatibel |
| ----------------- | ----------------- | ------------------- |
| < 2.0.0 | >= 2.17.6 < 3.0.0 | false |
| >= 2.0.0 < 3.0.0 | >= 3.0.0 | true |
| >= 3.0.0 | >= 3.6.0 | true |

<details>
<summary>
### flutter_secure_storage einrichten \{#flutter_secure_storage}

### flutter_secure_storage \{#flutter_secure_storage}

</summary>

Wir verwenden [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage), um die plattformübergreifende persistente sichere Token-Speicherung zu implementieren.
Im Hintergrund verwendet dieses SDK [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage), um die plattformübergreifende, persistente sichere Token-Speicherung zu implementieren.

- Keychain wird für iOS verwendet
- AES-Verschlüsselung wird für Android verwendet.

#### Android-Version konfigurieren \{#config-android-version}

Setze die android:minSdkVersion auf 18 in der android/app/build.gradle-Datei deines Projekts.
Setze die android:minSdkVersion auf `>= 18` in der Datei `android/app/build.gradle` deines Projekts.

```kotlin title="build.gradle"
android {
Expand All @@ -30,13 +29,11 @@ Setze die android:minSdkVersion auf 18 in der android/app/build.gradle-Datei dei
}
```

#### Autobackup deaktivieren \{#disable-autobackup}

Standardmäßig kann Android Daten automatisch auf Google Drive sichern. Dies kann die Ausnahme `java.security.InvalidKeyException:Failed to unwrap key` verursachen.
#### Automatische Sicherung auf Android deaktivieren \{#disable-autobackup}

Um dies zu vermeiden, kannst du das automatische Backup für deine App deaktivieren oder `sharedprefs` von der `FlutterSecureStorage` ausschließen.
Standardmäßig sichert Android Daten auf Google Drive. Dies kann die Ausnahme `java.security.InvalidKeyException:Failed` verursachen, um den Schlüssel zu entpacken. Um dies zu vermeiden,

1. Um das automatische Backup zu deaktivieren, gehe zu deiner App-Manifestdatei und setze die Attribute `android:allowBackup` und `android:fullBackupContent` auf `false`.
1. Um die automatische Sicherung zu deaktivieren, gehe zu deiner App-Manifestdatei und setze die Attribute `android:allowBackup` und `android:fullBackupContent` auf `false`.

```xml title="AndroidManifest.xml"
<manifest ... >
Expand All @@ -54,10 +51,10 @@ Um dies zu vermeiden, kannst du das automatische Backup für deine App deaktivie

2. Schließe `sharedprefs` von `FlutterSecureStorage` aus.

Wenn du das `android:fullBackupContent` für deine App beibehalten möchtest, anstatt es zu deaktivieren, kannst du das Verzeichnis `sharedprefs` vom Backup ausschließen.
Wenn du das `android:fullBackupContent` für deine App beibehalten möchtest, anstatt es zu deaktivieren, kannst du das Verzeichnis `sharedprefs` von der Sicherung ausschließen.
Siehe weitere Details in der [Android-Dokumentation](https://developer.android.com/identity/data/autobackup#IncludingFiles).

> In deiner AndroidManifest.xml-Datei füge das Attribut android:fullBackupContent zum `<application>`-Element hinzu, wie im folgenden Beispiel gezeigt. Dieses Attribut verweist auf eine XML-Datei, die Backup-Regeln enthält.
> In deiner AndroidManifest.xml-Datei füge das Attribut android:fullBackupContent zum `<application>`-Element hinzu, wie im folgenden Beispiel gezeigt. Dieses Attribut verweist auf eine XML-Datei, die Sicherungsregeln enthält.
```xml title="AndroidManifest.xml"
<application ...
Expand All @@ -76,51 +73,65 @@ Um dies zu vermeiden, kannst du das automatische Backup für deine App deaktivie

Bitte überprüfe [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage#configure-android-version) für weitere Details.

</details>

<details>
<summary>

### flutter_web_auth \{#flutter_web_auth}
### flutter_web_auth_2 einrichten \{#flutter_web_auth}

</summary>
Im Hintergrund verwendet dieses SDK [flutter_web_auth_2](https://pub.dev/packages/flutter_web_auth_2), um Benutzer mit Logto zu authentifizieren. Dieses Paket bietet eine einfache Möglichkeit, Benutzer mit Logto unter Verwendung des System-Webviews oder Browsers zu authentifizieren.

[flutter_web_auth](https://pub.dev/packages/flutter_web_auth) wird hinter dem Logto Flutter SDK verwendet. Wir verlassen uns auf seine webview-basierte Interaktionsschnittstelle, um Benutzer zu authentifizieren.

:::note
Dieses Plugin verwendet `ASWebAuthenticationSession` auf iOS 12+ und macOS 10.15+, `SFAuthenticationSession` auf iOS 11, `Chrome Custom Tabs` auf Android und öffnet ein neues Fenster im Web.
:::

#### Registriere die Callback-URL auf Android \{#register-the-callback-url-on-android}

Um die Callback-URL von Logtos Anmelde-Webseite zu erfassen, musst du deine Anmelde-redirectUri in deiner `AndroidManifest.xml`-Datei registrieren.

```xml title="AndroidManifest.xml"
<activity android:name="com.linusu.flutter_web_auth.CallbackActivity" android:exported="true">
<intent-filter android:label="flutter_web_auth">
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
<data android:scheme="io.logto"/>
</intent-filter>
</activity>
```

</details>

<details>
<summary>

### http.dart \{#httpdart}

</summary>

Da das SDK Netzwerk-Anfragen stellen muss, musst du einen HTTP-Client an das SDK übergeben. Du kannst den Standard-`http.Client` von [http.dart](https://pub.dev/packages/http) verwenden oder deinen eigenen `http.Client` mit benutzerdefinierten Konfigurationen erstellen.

```dart
import 'package:http/http.dart' as http;
- iOS: Keine zusätzliche Einrichtung erforderlich

- Android: Registriere die Callback-URL auf Android

Um die Callback-URL von Logtos Anmelde-Webseite zu erfassen, musst du deine Anmelde-redirectUri in deiner `AndroidManifest.xml`-Datei registrieren.

```xml title="AndroidManifest.xml"
<manifest>
<application>
<activity
android:name="com.linusu.flutter_web_auth_2.CallbackActivity"
android:exported="true">
<intent-filter android:label="flutter_web_auth_2">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="YOUR_CALLBACK_URL_SCHEME_HERE" />
</intent-filter>
</activity>
</application>
</manifest>
```

- Webbrowser: Erstelle einen Endpunkt, um die Callback-URL zu verarbeiten

Wenn du die Webplattform verwendest, musst du einen Endpunkt erstellen, um die Callback-URL zu verarbeiten und sie mit der `postMessage` API an die Anwendung zurückzusenden.

```html title="callback.html"
<!doctype html>
<title>Authentifizierung abgeschlossen</title>
<p>
Die Authentifizierung ist abgeschlossen. Wenn dies nicht automatisch geschieht, bitte das
Fenster schließen.
</p>
<script>
function postAuthenticationMessage() {
const message = {
'flutter-web-auth-2': window.location.href,
};
if (window.opener) {
window.opener.postMessage(message, window.location.origin);
window.close();
} else if (window.parent && window.parent !== window) {
window.parent.postMessage(message, window.location.origin);
} else {
localStorage.setItem('flutter-web-auth-2', window.location.href);
window.close();
}
}
```
postAuthenticationMessage();
</script>
```

</details>
Bitte überprüfe die Einrichtungsanleitung im [flutter_web_auth_2](https://pub.dev/packages/flutter_web_auth_2#setup) Paket für weitere Details.
25 changes: 15 additions & 10 deletions ...us-plugin-content-docs/current/quick-starts/framework/flutter/_installation.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,32 @@ Du kannst das `logto_dart_sdk package` direkt mit dem Pub-Paketmanager installie
Führe den folgenden Befehl im Stammverzeichnis deines Projekts aus:

```bash
flutter pub get logto_dart_sdk
flutter pub add logto_dart_sdk
```

</TabItem>
Oder füge Folgendes zu deiner `pubspec.yaml` Datei hinzu:

<TabItem value="github" label="GitHub">
```yaml
dependencies:
logto_dart_sdk: ^3.0.0
```
Wenn du deine eigene Version des SDKs forken möchtest, kannst du das Repository direkt von GitHub klonen.
Dann führe aus:
```bash
git clone https://github.com/logto-io/dart
flutter pub get
```

</TabItem>

</Tabs>
<TabItem value="github" label="GitHub">

### Module \{#modules}
Wenn du es vorziehst, deine eigene Version des SDK zu forken, kannst du das Repository direkt von GitHub klonen.

Das `logto_dart_sdk` umfasst zwei Hauptmodule:
```bash
git clone https://github.com/logto-io/dart
```

- **logto_core.dart** Dieses Kernmodul bietet die grundlegenden Funktionen und Schnittstellen für das Logto SDK.
</TabItem>

- **logto_client.dart** Dieses Clientmodul bietet eine High-Level-Logto-Clientklasse zur Interaktion mit dem Logto-Server.
</Tabs>
Loading

0 comments on commit 1b92da5

Please sign in to comment.