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

refactor(console): update swift guide (#6123)

Browse source
This commit is contained in:
Gao Sun 2024-06-28 10:34:41 +08:00 committed by GitHub
parent 9904ac74d9
commit 07e3725740
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 116 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
packages/console/src/assets/docs/fragments/_redirect_uris.mdx → packages/console/src/assets/docs/fragments/_experience-overview.md
View file

@ -1,6 +1,3 @@
import InlineNotification from '@/ds-components/InlineNotification';
import UriInputField from '@/mdx-components/UriInputField';
Before we dive into the details, here's a quick overview of the end-user experience. The sign-in process can be simplified as follows:
```mermaid
@ -21,15 +18,3 @@ Regarding redirect-based sign-in:
To learn more about the rationale and benefits of redirect-based sign-in, see [Logto sign-in experience explained](https://docs.logto.io/docs/tutorials/get-started/sign-in-experience).
---
<InlineNotification>
In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
</InlineNotification>
Now, let's enter your redirect URI. E.g. {`${props.callbackUri ?? 'http://localhost:3000/callback'}`}.
<UriInputField name="redirectUris" />
Just like signing in, users should be redirected to Logto for signing out of the shared session. Once finished, it would be great to redirect the user back to your website. For example, add `http://localhost:3000` as the post sign-out redirect URI below.
<UriInputField name="postLogoutRedirectUris" />

10
packages/console/src/assets/docs/fragments/_redirect-uris-native.mdx Normal file
View file

@ -0,0 +1,10 @@
import InlineNotification from '@/ds-components/InlineNotification';
import UriInputField from '@/mdx-components/UriInputField';
import ExperienceOverview from './_experience-overview.md';
<ExperienceOverview />
Now, let's configure your redirect URI. E.g. {`${props.defaultUri ?? 'http://localhost:3000/callback'}`}.
<UriInputField name="redirectUris" />

18
packages/console/src/assets/docs/fragments/_redirect-uris-web.mdx Normal file
View file

@ -0,0 +1,18 @@
import InlineNotification from '@/ds-components/InlineNotification';
import UriInputField from '@/mdx-components/UriInputField';
import ExperienceOverview from './_experience-overview.md';
<ExperienceOverview />
<InlineNotification>
In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
</InlineNotification>
Now, let's configure your redirect URI. E.g. {`${props.defaultUri ?? 'http://localhost:3000/callback'}`}.
<UriInputField name="redirectUris" />
Just like signing in, users should be redirected to Logto for signing out of the shared session. Once finished, it would be great to redirect the user back to your website. For example, add `http://localhost:3000` as the post sign-out redirect URI below.
<UriInputField name="postLogoutRedirectUris" />

109
packages/console/src/assets/docs/guides/native-ios-swift/README.mdx
View file

@ -4,6 +4,8 @@ import TabItem from '@mdx/components/TabItem';
import InlineNotification from '@/ds-components/InlineNotification';
import Steps from '@/mdx-components/Steps';
import Step from '@/mdx-components/Step';
import Checkpoint from '../../fragments/_checkpoint.md';
import RedirectUrisNative from '../../fragments/_redirect-uris-native.mdx';
<Steps>
@ -44,6 +46,8 @@ CocoaPods [does not support local dependency](https://github.com/CocoaPods/Cocoa
subtitle="1 step"
>
You can initialize `LogtoClient` in a proper place of your app that can be accessed globally:
<Code className="language-swift">
{`import Logto
import LogtoClient
@ -68,50 +72,93 @@ let config = try? LogtoConfig(
</Step>
<Step
title="Sign in"
subtitle="2 steps"
>
<Step title="Configure redirect URI">
### Configure Redirect URI
First, let’s configure your redirect URI scheme. E.g. `io.logto://callback`
<UriInputField name="redirectUris" />
<RedirectUrisNative />
<InlineNotification>
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.
The Redirect URI in iOS SDK is only for internal use. There's <em>NO NEED</em> to add a [Custom URL Scheme](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) until a connector asks.
</InlineNotification>
Go back to Xcode, use the following code to implement sign-in:
</Step>
<Code className="language-swift">
{`do {
try await client.signInWithBrowser(redirectUri: "${
props.redirectUris[0] ?? 'io.logto://callback'
}")
print(client.isAuthenticated) // true
} catch let error as LogtoClientErrors.SignIn {
// error occured during sign in
<Step title="Implement sign-in and sign-out">
You can use `client.signInWithBrowser(redirectUri:)` to sign in the user and `client.signOut()` to sign out the user.
For example, in a SwiftUI app:
<Code title="ContentView.swift" className="language-swift">
{`struct ContentView: View {
@State var isAuthenticated: Bool
init() {
isAuthenticated = client.isAuthenticated
}
var body: some View {
VStack {
if isAuthenticated {
Button("Sign Out") {
Task { [self] in
await client.signOut()
isAuthenticated = false
}
}
} else {
Button("Sign In") {
Task { [self] in
do {
try await client.signInWithBrowser(redirectUri: "${
props.redirectUris[0] ?? 'io.logto://callback'
}")
isAuthenticated = true
} catch let error as LogtoClientErrors.SignIn {
// error occured during sign in
} catch {
// other errors
}
}
}
}
}
}
}`}
</Code>
</Step>
<Step
title="Sign out"
subtitle="1 step"
>
<Step title="Checkpoint: Test your app">
Calling `.signOut()` will clean all the Logto data in Keychain, if they exist.
<Checkpoint />
```swift
await client.signOut()
```
</Step>
<Step title="Display user information">
To display the user's information, you can use the `client.getIdTokenClaims()` method. For example, in a SwiftUI app:
<Code title="ContentView.swift" className="language-swift">
{`struct ContentView: View {
@State var isAuthenticated: Bool
@State var name: String?
init() {
isAuthenticated = client.isAuthenticated
name = try? client.getIdTokenClaims().name
}
var body: some View {
VStack {
if isAuthenticated {
Text("Welcome, \(name)")
} else {
Text("Please sign in")
}
}
}
}`}
</Code>
</Step>

1
packages/console/src/assets/docs/guides/native-ios-swift/index.ts
View file

@ -10,6 +10,7 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
repo: 'swift',
path: 'Demos/SwiftUI%20Demo',
},
fullGuide: 'swift',
});
export default metadata;

4
packages/console/src/assets/docs/guides/web-next-app-router/README.mdx
View file

@ -4,7 +4,7 @@ import { generateStandardSecret } from '@logto/shared/universal';
import Steps from '@/mdx-components/Steps';
import Step from '@/mdx-components/Step';
import Checkpoint from '../../fragments/_checkpoint.md';
import RedirectUris from '../../fragments/_redirect_uris.mdx';
import RedirectUrisWeb from '../../fragments/_redirect-uris-web.mdx';
<Steps>
@ -84,7 +84,7 @@ export async function GET(request: NextRequest) {
subtitle="2 URIs"
>
<RedirectUris />
<RedirectUrisWeb />
</Step>

4
packages/console/src/assets/docs/guides/web-next/README.mdx
View file

@ -4,7 +4,7 @@ import { generateStandardSecret } from '@logto/shared/universal';
import Steps from '@/mdx-components/Steps';
import Step from '@/mdx-components/Step';
import Checkpoint from '../../fragments/_checkpoint.md';
import RedirectUris from '../../fragments/_redirect_uris.mdx';
import RedirectUrisWeb from '../../fragments/_redirect-uris-web.mdx';
<Steps>
@ -85,7 +85,7 @@ This will create 4 routes automatically:
subtitle="2 URIs"
>
<RedirectUris callbackUri="http://localhost:3000/api/logto/sign-in-callback" />
<RedirectUrisWeb defaultUri="http://localhost:3000/api/logto/sign-in-callback" />
</Step>

4
packages/console/src/assets/docs/guides/web-nuxt/README.mdx
View file

@ -5,7 +5,7 @@ import InlineNotification from '@/ds-components/InlineNotification';
import Steps from '@/mdx-components/Steps';
import Step from '@/mdx-components/Step';
import Checkpoint from '../../fragments/_checkpoint.md';
import RedirectUris from '../../fragments/_redirect_uris.mdx';
import RedirectUrisWeb from '../../fragments/_redirect-uris-web.mdx';
import { generateStandardSecret } from '@logto/shared/universal';
export const cookieEncryptionKey = generateStandardSecret();
@ -84,7 +84,7 @@ See [runtime config](https://nuxt.com/docs/guide/going-further/runtime-config) f
subtitle="2 URIs"
>
<RedirectUris />
<RedirectUrisWeb />
When registering `@logto/nuxt` module, it will do the following:

4
packages/console/src/assets/docs/guides/web-ruby/README.mdx
View file

@ -1,7 +1,7 @@
import UriInputField from '@/mdx-components/UriInputField';
import InlineNotification from '@/ds-components/InlineNotification';
import { generateStandardSecret } from '@logto/shared/universal';
import RedirectUris from '../../fragments/_redirect_uris.mdx';
import RedirectUrisWeb from '../../fragments/_redirect-uris-web.mdx';
import Checkpoint from '../../fragments/_checkpoint.md';
import Steps from '@/mdx-components/Steps';
import Step from '@/mdx-components/Step';
@ -82,7 +82,7 @@ end`}
subtitle="2 URIs"
>
<RedirectUris />
<RedirectUrisWeb />
</Step>

1
packages/console/src/assets/docs/guides/web-ruby/index.ts
View file

@ -12,6 +12,7 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
repo: 'ruby',
path: 'logto-sample',
},
fullGuide: 'ruby',
});
export default metadata;