mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
feat(console): add flutter guide (#4338)
* feat(console): add flutter guide add flutter guide * fix: should read props should read props * fix: remove useless content remove useless content * fix(console): update flutter SDK content update flutter SDK content
This commit is contained in:
simeng-li
GitHub
parent
59a42c76c5
commit
758510a13f
1 changed files with 196 additions and 1 deletions
|
|
@ -1 +1,196 @@
|
||||||
## Replace this with actual guide
|
import UriInputField from '@/mdx-components-v2/UriInputField';
|
||||||
|
import Steps from '@/mdx-components-v2/Steps';
|
||||||
|
import Step from '@/mdx-components-v2/Step';
|
||||||
|
import Tabs from '@mdx/components/Tabs';
|
||||||
|
import TabItem from '@mdx/components/TabItem';
|
||||||
|
import InlineNotification from '@/ds-components/InlineNotification';
|
||||||
|
|
||||||
|
<Steps>
|
||||||
|
<Step title="Install Logto SDK">
|
||||||
|
|
||||||
|
Our flutter SDK package is published on [pub.dev](https://pub.dev/packages/logto_dart_sdk). Install the SDK package by running the following command in your project directory:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
flutter pub get logto_dart_sdk
|
||||||
|
```
|
||||||
|
|
||||||
|
</Step>
|
||||||
|
<Step title="Dependency settings" subtitle="2 steps">
|
||||||
|
<details>
|
||||||
|
|
||||||
|
<summary>flutter_secure_storage</summary>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
|
||||||
|
We use [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage) to implement the cross-platform persistent secure token storage.
|
||||||
|
|
||||||
|
- Keychain is used for iOS
|
||||||
|
- AES encryption is used for Android.
|
||||||
|
|
||||||
|
### Config Android version:
|
||||||
|
|
||||||
|
In `[project]/android/app/build.gradle` set minSdkVersion to >= 18.
|
||||||
|
|
||||||
|
```gradle
|
||||||
|
android {
|
||||||
|
...
|
||||||
|
|
||||||
|
defaultConfig {
|
||||||
|
...
|
||||||
|
minSdkVersion 18
|
||||||
|
...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<InlineNotification>
|
||||||
|
|
||||||
|
By default Android backups data on Google Drive. It can cause exception `java.security.InvalidKeyException:Failed` to unwrap key. You will need to:
|
||||||
|
|
||||||
|
- Disable `autobackup`;
|
||||||
|
- Exclude `sharedprefs` FlutterSecureStorage used by the plugin;
|
||||||
|
|
||||||
|
</InlineNotification>
|
||||||
|
|
||||||
|
1. To disable `autobackup`, go to your app manifest file and set the boolean value `android:allowBackup`:
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<manifest ... >
|
||||||
|
...
|
||||||
|
<application
|
||||||
|
android:allowBackup="false"
|
||||||
|
android:fullBackupContent="false"
|
||||||
|
...
|
||||||
|
>
|
||||||
|
...
|
||||||
|
</application>
|
||||||
|
</manifest>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Exclude `sharedprefs` FlutterSecureStorage.
|
||||||
|
|
||||||
|
If you need to enable the `android:fullBackupContent` for your app. Set up a backup rule to [exclude](https://developer.android.com/guide/topics/data/autobackup#IncludingFiles) the prefs used by the plugin:
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<application ...
|
||||||
|
android:fullBackupContent="@xml/backup_rules">
|
||||||
|
</application>
|
||||||
|
```
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<full-backup-content>
|
||||||
|
<exclude domain="sharedpref" path="FlutterSecureStorage"/>
|
||||||
|
</full-backup-content>
|
||||||
|
```
|
||||||
|
|
||||||
|
Please check [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage#configure-android-version) for more details.
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
|
||||||
|
<summary>flutter_web_auth</summary>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
|
||||||
|
[flutter_web_auth](https://pub.dev/packages/flutter_web_auth) is used behind Logto's flutter SDK. We rely on its webview-based interaction interface to open Logto's authorization pages.
|
||||||
|
|
||||||
|
<InlineNotification>
|
||||||
|
|
||||||
|
Under the hood, this plugin uses `ASWebAuthenticationSession` on iOS 12+ and macOS 10.15+,
|
||||||
|
`SFAuthenticationSession` on iOS 11, Chrome Custom Tabs on Android and opens a new window on Web.
|
||||||
|
You can build it with iOS 8+, but it is currently only supported by iOS 11 or higher.
|
||||||
|
|
||||||
|
</InlineNotification>
|
||||||
|
|
||||||
|
Andorid:
|
||||||
|
|
||||||
|
In order to capture the callback url from Logto's sign-in web page, you will need to register your sign-in redirectUri to the `AndroidManifest.xml`.
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<activity android:name="com.linusu.flutter_web_auth.CallbackActivity" android:exported="false">
|
||||||
|
<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>
|
||||||
|
```
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
</Step>
|
||||||
|
<Step title="Init LogtoClient" subtitle="1 step">
|
||||||
|
|
||||||
|
<pre>
|
||||||
|
<code className="language-dart">
|
||||||
|
{`
|
||||||
|
import 'package:logto_dart_sdk/logto_dart_sdk.dart';
|
||||||
|
import 'package:http/http.dart' as http;
|
||||||
|
|
||||||
|
late LogtoClient logtoClient;
|
||||||
|
|
||||||
|
// LogtoConfig
|
||||||
|
final logtoConfig = const LogtoConfig(
|
||||||
|
endpoint: '${props.endpoint}',${
|
||||||
|
props.alternativeEndpoint ? ` // or "${props.alternativeEndpoint}"` : ''
|
||||||
|
}
|
||||||
|
appId: '${props.app.id}',
|
||||||
|
);
|
||||||
|
|
||||||
|
void init() async {
|
||||||
|
logtoClient = LogtoClient(
|
||||||
|
config: logtoConfig,
|
||||||
|
httpClient: http.Client(), // Optional http client
|
||||||
|
);
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
</Step>
|
||||||
|
<Step title="Sign In" subtitle="2 steps">
|
||||||
|
|
||||||
|
### Configure Redirect URI
|
||||||
|
|
||||||
|
<InlineNotification>
|
||||||
|
In the following steps, we assume your app has configured using `io.logo` as your schema .
|
||||||
|
</InlineNotification>
|
||||||
|
|
||||||
|
Let's switch to the Application details page of Logto Admin Console. Add a Redirect URI `io.logto://callback` and click "Save Changes".
|
||||||
|
|
||||||
|
<UriInputField name="redirectUris" />
|
||||||
|
|
||||||
|
### Implement a sign-in method
|
||||||
|
|
||||||
|
<pre>
|
||||||
|
<code className="language-dart">
|
||||||
|
{`void signIn() async {
|
||||||
|
await logtoClient.signIn('${props.redirectUris[0] ?? 'io.logto://callback'}');
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
</Step>
|
||||||
|
|
||||||
|
<Step title="Sign Out" subtitle="1 step">
|
||||||
|
|
||||||
|
Calling `.signOut()` will clean all the Logto data in the secret storage, if it has.
|
||||||
|
|
||||||
|
```dart
|
||||||
|
void signOut() async {
|
||||||
|
await logtoClient.signOut();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
</Step>
|
||||||
|
|
||||||
|
</Steps>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue