mirror of
https://github.com/logto-io/logto.git
synced 2025-01-20 21:32:31 -05:00
refactor(console): update iOS guide
This commit is contained in:
Charles Zhao
parent
40c8d0eeed
commit
243f4cadb1
3 changed files with 170 additions and 12 deletions
|
|
@ -2,10 +2,11 @@ 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="Add Logto SDK as a Dependency"
|
||||
title="Integrate Logto Swift SDK"
|
||||
subtitle="Add Logto SDK as a dependency"
|
||||
index={0}
|
||||
activeIndex={props.activeStepIndex}
|
||||
onButtonClick={() => props.onNext(1)}
|
||||
|
|
@ -23,17 +24,24 @@ We do not support **Carthage** and **CocoaPods** at the time due to some technic
|
|||
|
||||
<details>
|
||||
<summary>Carthage</summary>
|
||||
Carthage <a href="https://github.com/Carthage/Carthage/issues/1226#issuecomment-290931385">needs a `xcodeproj` file to build</a>, but `swift package generate-xcodeproj` will report a failure since we are using binary targets for native social plugins. We will try to find a workaround later.
|
||||
|
||||
Carthage [needs a `xcodeproj` file to build](https://github.com/Carthage/Carthage/issues/1226#issuecomment-290931385), but `swift package generate-xcodeproj` will report a failure since we are using binary targets
|
||||
for native social plugins. We will try to find a workaround later.
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>CocoaPods</summary>
|
||||
CocoaPods <a href="https://github.com/CocoaPods/CocoaPods/issues/3276">does not support local dependency</a> and monorepo, thus it's hard to create a `.podspec` for this repo.
|
||||
|
||||
CocoaPods [does not support local dependency](https://github.com/CocoaPods/CocoaPods/issues/3276) and monorepo, thus it's hard to create a `.podspec` for this repo.
|
||||
|
||||
</details>
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Init LogtoClient"
|
||||
subtitle="1 step"
|
||||
index={1}
|
||||
activeIndex={props.activeStepIndex}
|
||||
onButtonClick={() => props.onNext(2)}
|
||||
|
|
@ -63,20 +71,30 @@ let config = try? LogtoConfig(
|
|||
```
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Sign In"
|
||||
subtitle="2 steps"
|
||||
index={2}
|
||||
activeIndex={props.activeStepIndex}
|
||||
onButtonClick={() => props.onNext(3)}
|
||||
>
|
||||
|
||||
First, let’s configure your redirect URI
|
||||
### Configure Redirect URI
|
||||
|
||||
First, let’s configure your redirect URI scheme. E.g. `logto://callback`
|
||||
|
||||
<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
|
||||
|
||||
<Alert>
|
||||
The Redirect URI in iOS SDK is only for internal use. There's <em>NO NEED</em> to add a <a href="https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app">Custom URL Scheme</a> until a connector asks.
|
||||
</Alert>
|
||||
|
||||
Go back to Xcode, use the following code to implement sign-in:
|
||||
|
||||
```swift
|
||||
do {
|
||||
try await client.signInWithBrowser(redirectUri: "<your-redirect-uri>")
|
||||
try await client.signInWithBrowser(redirectUri: "logto://callback")
|
||||
print(client.isAuthenticated) // true
|
||||
} catch let error as LogtoClientErrors.SignIn {
|
||||
// error occured during sign in
|
||||
|
|
@ -84,6 +102,7 @@ do {
|
|||
```
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Sign Out"
|
||||
subtitle="1 step"
|
||||
|
|
@ -92,16 +111,17 @@ do {
|
|||
onButtonClick={() => props.onNext(4)}
|
||||
>
|
||||
|
||||
Calling `.signOut()` will clean all the Logto data in Keychain, if it has.
|
||||
Calling `.signOut()` will clean all the Logto data in Keychain, if they exist.
|
||||
|
||||
```swift
|
||||
await client.signOut()
|
||||
```
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Further Readings"
|
||||
subtitle="3 steps"
|
||||
title="Further readings"
|
||||
subtitle="4 articles"
|
||||
index={4}
|
||||
activeIndex={props.activeStepIndex}
|
||||
buttonText="admin_console.general.done"
|
||||
|
|
@ -109,8 +129,9 @@ await client.signOut()
|
|||
onButtonClick={props.onComplete}
|
||||
>
|
||||
|
||||
- [SDK Documentation](https://link-url-here.org)
|
||||
- [OIDC Documentation](https://link-url-here.org)
|
||||
- [Calling API to fetch accessToken](https://link-url-here.org)
|
||||
- [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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,136 @@
|
|||
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="在 iOS 应用中集成 Logto Swift SDK"
|
||||
subtitle="将 Logto SDK 添加至依赖"
|
||||
index={0}
|
||||
activeIndex={props.activeStepIndex}
|
||||
onButtonClick={() => props.onNext(1)}
|
||||
>
|
||||
|
||||
使用如下的 URL 将 Logto SDK 添加至 Swift Package Manager 的依赖中。
|
||||
|
||||
```bash
|
||||
https://github.com/logto-io/swift.git
|
||||
```
|
||||
|
||||
从 Xcode 11 开始，无需任何额外工具你就可以 [引入一个 Swift package](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app)。
|
||||
|
||||
因为一些技术原因，我们暂时不支持 **Carthage** 和 **CocoaPods**。
|
||||
|
||||
<details>
|
||||
<summary>Carthage</summary>
|
||||
|
||||
Carthage [需要创建一个 `xcodeproj` 文件才能编译](https://github.com/Carthage/Carthage/issues/1226#issuecomment-290931385)，但由于我们内置了一些社交插件所用到的二进制目标文件，导致使用 `swift package generate-xcodeproj` 命令时报错。我们会继续努力寻求解决方案。
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>CocoaPods</summary>
|
||||
|
||||
CocoaPods [不支持本地依赖](https://github.com/CocoaPods/CocoaPods/issues/3276) 和 monorepo，所以要在此工程创建 `.podspec` 文件使用 Cocoapods 的话将非常困难。
|
||||
|
||||
</details>
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="初始化 LogtoClient"
|
||||
subtitle="共 1 步"
|
||||
index={1}
|
||||
activeIndex={props.activeStepIndex}
|
||||
onButtonClick={() => props.onNext(2)}
|
||||
>
|
||||
|
||||
<pre>
|
||||
<code className="language-swift">
|
||||
{`import Logto
|
||||
|
||||
let config = try? LogtoConfig(
|
||||
endpoint: "${props.endpoint}",
|
||||
appId: "${props.appId}",
|
||||
)
|
||||
let logtoClient = LogtoClient(useConfig: config)`}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
我们默认会把例如 ID Token 和 Refresh Token 这样的凭据存储在 Keychain 中，如此一来用户在重新打开应用的时候无需再次登录。
|
||||
|
||||
如果需要禁用这个行为，可将 `usingPersistStorage` 设置成 `false`：
|
||||
|
||||
```swift
|
||||
let config = try? LogtoConfig(
|
||||
// ...
|
||||
usingPersistStorage: false
|
||||
)
|
||||
```
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="登录"
|
||||
subtitle="共 2 步"
|
||||
index={2}
|
||||
activeIndex={props.activeStepIndex}
|
||||
onButtonClick={() => props.onNext(3)}
|
||||
>
|
||||
|
||||
### 配置 Redirect URI
|
||||
|
||||
首先，我们来配置你的 redirect URI scheme。例如 `logto://callback`
|
||||
|
||||
<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
|
||||
|
||||
<Alert>
|
||||
iOS SDK 中的 Redirect URI 仅用于内部。除非连接器有要求，否则 <em>无需</em> 在项目中添加 <a href="https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app">Custom URL Scheme</a>。
|
||||
</Alert>
|
||||
|
||||
回到 Xcode，使用如下代码实现登录：
|
||||
|
||||
```swift
|
||||
do {
|
||||
try await client.signInWithBrowser(redirectUri: "logto://callback")
|
||||
print(client.isAuthenticated) // true
|
||||
} catch let error as LogtoClientErrors.SignIn {
|
||||
// 登录过程中有错误发生
|
||||
}
|
||||
```
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="退出登录"
|
||||
subtitle="共 1 步"
|
||||
index={3}
|
||||
activeIndex={props.activeStepIndex}
|
||||
onButtonClick={() => props.onNext(4)}
|
||||
>
|
||||
|
||||
调用 `.signOut()` 将清除 Keychain 中所有 Logto 的数据（如果有）。
|
||||
|
||||
```swift
|
||||
await client.signOut()
|
||||
```
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="延展阅读"
|
||||
subtitle="共 4 篇"
|
||||
index={4}
|
||||
activeIndex={props.activeStepIndex}
|
||||
buttonText="admin_console.general.done"
|
||||
buttonType="primary"
|
||||
onButtonClick={props.onComplete}
|
||||
>
|
||||
|
||||
- [自定义登录体验](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>
|
||||
|
|
@ -24,6 +24,7 @@ const Guides: Record<string, LazyExoticComponent<(props: MDXProps) => JSX.Elemen
|
|||
react: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/react.mdx')),
|
||||
vue: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/vue.mdx')),
|
||||
vanilla: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/vanilla.mdx')),
|
||||
'ios_zh-cn': lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx')),
|
||||
'android_zh-cn': lazy(
|
||||
async () => import('@/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx')
|
||||
),
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue