Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

refactor(console): update android sdk integration guide

Browse source
This commit is contained in:
Charles Zhao 2022-06-30 16:22:38 +08:00
parent ab4e649199
commit 3587b20021
No known key found for this signature in database
GPG key ID: 4858774754C92DF2
3 changed files with 87 additions and 215 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

150
packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
View file

@ -2,26 +2,30 @@ import UriInputField from '@mdx/components/UriInputField';
import Step from '@mdx/components/Step';
import Tabs from '@mdx/components/Tabs';
import TabItem from '@mdx/components/TabItem';
import Alert from '@/components/Alert';
<Step
title="Install SDK"
subtitle="Install Logto Android SDK with Gradle"
title="Integrate Logto Android SDK"
subtitle="Add Logto SDK as a dependency"
index={0}
activeIndex={props.activeStepIndex}
onButtonClick={() => props.onNext(1)}
>
### Prerequisite
* Minimal Android SDK: Level 24
<Alert>
The minimum supported Android API is level 24
</Alert>
Add the `mavenCentral()` repository to your Gradle project build file:
```kotlin
repositories {
mavenCentral()
}
```
Add the Logto Android SDK to your dependencies:
Add Logto Android SDK to your dependencies:
<Tabs>
<TabItem value="kotlin" label="Kotlin">
@ -49,35 +53,13 @@ dependencies {
</Step>
<Step
title="Configure"
subtitle="Configure your application and LogtoClient"
title="Init LogtoClient"
subtitle="1 step"
index={1}
activeIndex={props.activeStepIndex}
onButtonClick={() => props.onNext(2)}
>
### Configure Redirect URI
The `Redirect URI` indicates the endpoint that the application used to receive authorization results, which is implemented by the Logto Android SDK internally.
### Configure Redirect URI in Admin Console
Add the following value to Redirect URIs input field
```bash
$(LOGTO_REDIRECT_SCHEME)://$(YOUR_APP_PACKAGE)/callback
```
Notes:
- `LOGTO_REDIRECT_SCHEME` should be a custom scheme in the reverse domain format.
- Replace `$(LOGTO_REDIRECT_SCHEME)` with your own settings.
e.g. `io.logto.android://io.logto.sample/callback`
<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
### Configure Logto Android SDK
<Tabs>
<TabItem value="kotlin" label="Kotlin">
@ -105,8 +87,9 @@ class MainActivity : AppCompatActivity() {
<TabItem value="java" label="Java">
```java
import io.logto.sdk.android.LogtoClient;
<pre>
<code className="language-java">
{`import io.logto.sdk.android.LogtoClient;
import io.logto.sdk.android.type.LogtoConfig;
public class MainActivity extends AppCompatActivity {
@ -118,8 +101,8 @@ public class MainActivity extends AppCompatActivity {
setContentView(R.layout.activity_main);
LogtoConfig logtoConfig = new LogtoConfig(
"<your-logto-endpoint>",
"<your-app-id>",
"${props.endpoint}",
"${props.appId}",
null,
null,
true
@ -127,40 +110,39 @@ public class MainActivity extends AppCompatActivity {
logtoClient = new LogtoClient(logtoConfig, getApplication());
}
}
```
}`}
</code>
</pre>
</TabItem>
</Tabs>
Notes:
- `<your-logto-endpoint>` is the logto service running in your machine. If you start logto service in `http://localhost:300` then `<your-logto-endpoint` will be `http://localhost:300`
- `<your-app-id>` is the Application ID of your application, which is created in the Admin Console.
</Step>
<Step
title="Sign In"
subtitle="Sign In to your application by Logto and do some extra works"
subtitle="2 steps"
index={2}
activeIndex={props.activeStepIndex}
onButtonClick={() => props.onNext(3)}
>
### Perform a signing-in action
### Configure Redirect URI
First, let’s configure your redirect URI. E.g. `io.logto.android://io.logto.sample/callback`
<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
Go back to your IDE/editor, use the following code to implement sign-in:
<Tabs>
<TabItem value="kotlin" label="Kotlin">
```kotlin
logtoClient.signInWithBrowser(
this,
"io.logto.android://io.logto.sample/callback",
) { logtoException: LogtoException? ->
// custom logic
logtoClient.signIn(this, "<your-redirect-uri>") { logtoException: LogtoException? ->
// User signed in successfully if `logtoException` is null.
}
```
@ -169,54 +151,8 @@ logtoClient.signInWithBrowser(
<TabItem value="java" label="Java">
```java
logtoClient.signInWithBrowser(
this,
"io.logto.android://io.logto.sample/callback",
logtoException -> {
// custom logic
}
);
```
</TabItem>
</Tabs>
### Implement your business logic after signing-in.
<Tabs>
<TabItem value="kotlin" label="Kotlin">
```kotlin
logtoClient.getAccessToken { logtoException: LogtoException?, result: AccessToken? ->
// custom logic
}
logtoClient.getIdTokenClaims { logtoException: LogtoException?, result: IdTokenCliams? ->
// custom logic
}
logtoClient.fetchUserInfo { logtoException: LogtoException?, userInfoResponse: UserInfoResponse? ->
// custom logic
}
```
</TabItem>
<TabItem value="java" label="Java">
```java
logtoClient.getAccessToken((logtoException, accessToken) -> {
// custom logic
});
logtoClient.getIdTokenClaims((logtoException, idTokenClaims) -> {
// custom logic
});
logtoClient.fetchUserInfo((logtoException, userInfoResponse) -> {
// custom logic
logtoClient.signIn(this, "<your-redirect-uri>", logtoException -> {
// User signed in successfully if `logtoException` is null.
});
```
@ -224,16 +160,19 @@ logtoClient.fetchUserInfo((logtoException, userInfoResponse) -> {
</Tabs>
After signing in successfully, `logtoClient.isAuthenticated` will be `true`.
</Step>
<Step
title="Sign Out"
subtitle="1 step"
index={3}
activeIndex={props.activeStepIndex}
onButtonClick={() => props.onNext(4)}
>
### Perform a signing-out action
Calling `.signOut(completion)` will always clear local credentials even if errors occurred.
<Tabs>
@ -241,7 +180,7 @@ logtoClient.fetchUserInfo((logtoException, userInfoResponse) -> {
```kotlin
logtoClient.signOut { logtoException: LogtoException? ->
// custom logic
// Local credentials are cleared regardless of whether `logtoException` is null.
}
```
@ -251,7 +190,7 @@ logtoClient.signOut { logtoException: LogtoException? ->
```java
logtoClient.signOut(logtoException -> {
// custom logic
// Local credentials are cleared regardless of whether `logtoException` is null.
});
```
@ -259,15 +198,11 @@ logtoClient.signOut(logtoException -> {
</Tabs>
Notes:
- `signOut` will always clear local credentials even if errors occurred.
</Step>
<Step
title="Further Readings"
subtitle="3 steps"
title="Further readings"
subtitle="4 articles"
index={4}
activeIndex={props.activeStepIndex}
buttonText="admin_console.general.done"
@ -275,8 +210,9 @@ Notes:
onButtonClick={props.onComplete}
>
- Fetch User Info
- Configure Social Sign-In
- Access Protected API Resources
- [Customize sign-in experience](https://docs.logto.io/docs/recipes/customize-sie)
- [Enable SMS or email passcode sign-in](https://docs.logto.io/docs/tutorials/get-started/enable-passcode-sign-in)
- [Enable social sign-in](https://docs.logto.io/docs/tutorials/get-started/enable-social-sign-in)
- [Protect your API](https://docs.logto.io/docs/recipes/protect-your-api)
</Step>

150
packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx
View file

@ -2,19 +2,22 @@ import UriInputField from '@mdx/components/UriInputField';
import Step from '@mdx/components/Step';
import Tabs from '@mdx/components/Tabs';
import TabItem from '@mdx/components/TabItem';
import Alert from '@/components/Alert';
<Step
title="安装 SDK"
subtitle="从 Gradle 安装 Logto Android SDK"
title="在 Android 应用中集成 Logto Android SDK"
subtitle="将 Logto SDK 添加至依赖"
index={0}
activeIndex={props.activeStepIndex}
onButtonClick={() => props.onNext(1)}
>
### 前提条件
* 最小 Android SDK 版本: Level 24
<Alert>
Logto Andorid SDK 支持的最小 Android API 级别为 24
</Alert>
将 `mavenCentral()` 添加到构建脚本中：
```kotlin
repositories {
mavenCentral()
@ -22,6 +25,7 @@ repositories {
```
添加 Logto Android SDK 依赖：
<Tabs>
<TabItem value="kotlin" label="Kotlin">
@ -49,35 +53,13 @@ dependencies {
</Step>
<Step
title="配置"
subtitle="Configure your application and LogtoClient"
title="初始化 LogtoClient"
subtitle="共 1 步"
index={1}
activeIndex={props.activeStepIndex}
onButtonClick={() => props.onNext(2)}
>
### 配置 Redirect URI
Redirect URI 指定了应用用来接受授权结果的端口，Logto Android SDK 内部实现了该重定向的功能
### 在管理员控制台中配置 Redirect URI
将以下值添加到下面的 Redirect URI 输入框中：
```bash
$(LOGTO_REDIRECT_SCHEME)://$(YOUR_APP_PACKAGE)/callback
```
注意:
- `LOGTO_REDIRECT_SCHEME` 应为自定义的反向域名格式的一串字符。
- 将上述的 `$(LOGTO_REDIRECT_SCHEME)` 替换成你定义的值。
例： `io.logto.android://io.logto.sample/callback`
<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
### 配置 Logto Android SDK
<Tabs>
<TabItem value="kotlin" label="Kotlin">
@ -105,8 +87,9 @@ class MainActivity : AppCompatActivity() {
<TabItem value="java" label="Java">
```java
import io.logto.sdk.android.LogtoClient;
<pre>
<code className="language-java">
{`import io.logto.sdk.android.LogtoClient;
import io.logto.sdk.android.type.LogtoConfig;
public class MainActivity extends AppCompatActivity {
@ -118,8 +101,8 @@ public class MainActivity extends AppCompatActivity {
setContentView(R.layout.activity_main);
LogtoConfig logtoConfig = new LogtoConfig(
"<your-logto-endpoint>",
"<your-app-id>",
"${props.endpoint}",
"${props.appId}",
null,
null,
true
@ -127,40 +110,39 @@ public class MainActivity extends AppCompatActivity {
logtoClient = new LogtoClient(logtoConfig, getApplication());
}
}
```
}`}
</code>
</pre>
</TabItem>
</Tabs>
Notes:
- `<your-logto-endpoint>` 是你运行 Logto 服务所在的地址. 若你的 Logto 服务运行在 `http://localhost:300`，则 `<your-logto-endpoint` 为 `http://localhost:300`
- `<your-app-id>` 是你为自己的应用在管理员控制台中所创建的客户端ID.
</Step>
<Step
title="登录"
subtitle="Sign In to your application by Logto and do some extra works"
subtitle="共 2 步"
index={2}
activeIndex={props.activeStepIndex}
onButtonClick={() => props.onNext(3)}
>
### 执行登录
### 配置 Redirect URI
首先，我们来添加 Redirect URI。例如 `io.logto.android://io.logto.sample/callback`
<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
返回你的 IDE 或编辑器，使用如下代码实现登录：
<Tabs>
<TabItem value="kotlin" label="Kotlin">
```kotlin
logtoClient.signInWithBrowser(
this,
"io.logto.android://io.logto.sample/callback",
) { logtoException: LogtoException? ->
// 后续处理逻辑
logtoClient.signIn(this, "<your-redirect-uri>") { logtoException: LogtoException? ->
// 当 `logtoException` 为 null 时，则登录成功。
}
```
@ -169,54 +151,8 @@ logtoClient.signInWithBrowser(
<TabItem value="java" label="Java">
```java
logtoClient.signInWithBrowser(
this,
"io.logto.android://io.logto.sample/callback",
logtoException -> {
// 后续处理逻辑
}
);
```
</TabItem>
</Tabs>
### 登录成功后，你可以使用 SDK 提供的一些 API 来实现自己的业务逻辑
<Tabs>
<TabItem value="kotlin" label="Kotlin">
```kotlin
logtoClient.getAccessToken { logtoException: LogtoException?, result: AccessToken? ->
// 后续处理逻辑
}
logtoClient.getIdTokenClaims { logtoException: LogtoException?, result: IdTokenClaims? ->
// 后续处理逻辑
}
logtoClient.fetchUserInfo { logtoException: LogtoException?, userInfoResponse: UserInfoResponse? ->
// 后续处理逻辑
}
```
</TabItem>
<TabItem value="java" label="Java">
```java
logtoClient.getAccessToken((logtoException, accessToken) -> {
// 后续处理逻辑
});
logtoClient.getIdTokenClaims((logtoException, idTokenClaims) -> {
// 后续处理逻辑
});
logtoClient.fetchUserInfo((logtoException, userInfoResponse) -> {
// 后续处理逻辑
logtoClient.signIn(this, "<your-redirect-uri>", logtoException -> {
// 当 `logtoException` 为 null 时，则登录成功。
});
```
@ -224,16 +160,19 @@ logtoClient.fetchUserInfo((logtoException, userInfoResponse) -> {
</Tabs>
当成功登录后，`logtoClient.isAuthenticated` 的值将为 `true`。
</Step>
<Step
title="登出"
title="退出登录"
subtitle="共 1 步"
index={3}
activeIndex={props.activeStepIndex}
onButtonClick={() => props.onNext(4)}
>
### 执行登出
调用 `.signOut(completion)` 操作会清除本地存储的用户相关凭据，即使在退出登录过程中发生了异常。
<Tabs>
@ -241,7 +180,7 @@ logtoClient.fetchUserInfo((logtoException, userInfoResponse) -> {
```kotlin
logtoClient.signOut { logtoException: LogtoException? ->
// 后续处理逻辑
// 无论是否存在 `logtoException`，本地存储的用户相关凭据都已清除。
}
```
@ -251,7 +190,7 @@ logtoClient.signOut { logtoException: LogtoException? ->
```java
logtoClient.signOut(logtoException -> {
// 后续处理逻辑
// 无论是否存在 `logtoException`，本地存储的用户相关凭据都已清除。
});
```
@ -259,15 +198,11 @@ logtoClient.signOut(logtoException -> {
</Tabs>
注意:
- 登出操作会清除本地存储的用户相关凭据，即使在登出过程中发生了异常。
</Step>
<Step
title="延伸阅读"
subtitle="3 steps"
title="延展阅读"
subtitle="共 4 篇"
index={4}
activeIndex={props.activeStepIndex}
buttonText="admin_console.general.done"
@ -275,8 +210,9 @@ logtoClient.signOut(logtoException -> {
onButtonClick={props.onComplete}
>
- 获取用户信息
- 配置社会化登录
- 访问受保护的 API 资源
- [自定义登录体验](https://docs.logto.io/zh-cn/docs/recipes/customize-sie)
- [启用短信或邮件验证码登录](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-passcode-sign-in)
- [启用社交登录](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-social-sign-in)
- [保护你的 API](https://docs.logto.io/zh-cn/docs/recipes/protect-your-api)
</Step>

2
packages/phrases/src/locales/en.ts
View file

@ -113,7 +113,7 @@ const translation = {
subtitle:
'Now follow the steps below to finish your app settings. Please select the SDK type to continue.',
description_by_sdk:
'This quick start guide demonstrates how to integrate Logto to {{sdk}} application',
'This quick start guide demonstrates how to integrate Logto into {{sdk}} app',
},
},
application_details: {