Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-10 21:58:23 -05:00
Code Issues Activity

Merge pull request #1455 from logto-io/charles-log-3465-sync-redirect-uri-and-post-sign-out-uri-in-guide

Browse source 
refactor(console): sync input URI values in code samples in guide
This commit is contained in:
Charles Zhao 2022-07-07 19:30:50 +08:00 • committed by GitHub
commit 78cba36e8f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 127 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -140,21 +140,25 @@ Go back to your IDE/editor, use the following code to implement sign-in:
<TabItem value="kotlin" label="Kotlin">
```kotlin
logtoClient.signIn(this, "<your-redirect-uri>") { logtoException: LogtoException? ->
// User signed in successfully if `logtoException` is null.
}
```
<pre>
<code className="language-kotlin">
{`logtoClient.signIn(this, "${props.redirectUris[0] ?? '<your-redirect-uri>'}") { logtoException: LogtoException? ->
// User signed in successfully if \`logtoException\` is null.
}`}
</code>
</pre>
</TabItem>
<TabItem value="java" label="Java">
```java
logtoClient.signIn(this, "<your-redirect-uri>", logtoException -> {
// User signed in successfully if `logtoException` is null.
});
```
<pre>
<code className="language-java">
{`logtoClient.signIn(this, "${props.redirectUris[0] ?? '<your-redirect-uri>'}", logtoException -> {
// User signed in successfully if \`logtoException\` is null.
});`}
</code>
</pre>
</TabItem>

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

@ -140,21 +140,25 @@ public class MainActivity extends AppCompatActivity {
<TabItem value="kotlin" label="Kotlin">
```kotlin
logtoClient.signIn(this, "<your-redirect-uri>") { logtoException: LogtoException? ->
// 当 `logtoException` 为 null 时，则登录成功。
}
```
<pre>
<code className="language-kotlin">
{`logtoClient.signIn(this, "${props.redirectUris[0] ?? '<your-redirect-uri>'}") { logtoException: LogtoException? ->
// 当 \`logtoException\` 为 null 时，则登录成功。
}`}
</code>
</pre>
</TabItem>
<TabItem value="java" label="Java">
```java
logtoClient.signIn(this, "<your-redirect-uri>", logtoException -> {
// 当 `logtoException` 为 null 时，则登录成功。
});
```
<pre>
<code className="language-java">
{`logtoClient.signIn(this, "${props.redirectUris[0] ?? '<your-redirect-uri>'}", logtoException -> {
// 当 \`logtoException\` 为 null 时，则登录成功。
});`}
</code>
</pre>
</TabItem>

6
packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx
View file

@ -80,12 +80,12 @@ app.use(
>
<Alert>
In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
In the following steps, we assume your app is running on <code>http://localhost:1234</code>.
</Alert>
### Configure Redirect URI
First, let’s enter your redirect URI. E.g. `http://localhost:3000/callback`.
First, let’s enter your redirect URI. E.g. `http://localhost:1234/callback`.
<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
@ -118,7 +118,7 @@ const { fromUint8Array } = require('js-base64');
const config = {
endpoint: '${props.endpoint}',
appId: '${props.appId}',
redirectUri: 'http://localhost:3000/callback', // Configured in the previous step
redirectUri: '${props.redirectUris[0] ?? 'http://localhost:1234/callback'}', // Configured in the previous step
scopes: withReservedScopes().split(' '),
};

2
packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx
View file

@ -116,7 +116,7 @@ const { fromUint8Array } = require('js-base64');
const config = {
endpoint: '${props.endpoint}',
appId: '${props.appId}',
redirectUri: 'http://localhost:3000/callback', // 上一步配置过的 Redirect URI
redirectUri: '${props.redirectUris[0] ?? 'http://localhost:1234/callback'}', // 上一步配置过的 Redirect URI
scopes: withReservedScopes().split(' '),
};

14
packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx
View file

@ -83,7 +83,7 @@ let config = try? LogtoConfig(
### Configure Redirect URI
First, let’s configure your redirect URI scheme. E.g. `logto://callback`
First, let’s configure your redirect URI scheme. E.g. `io.logto://callback`
<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
@ -93,14 +93,16 @@ First, let’s configure your redirect URI scheme. E.g. `logto://callback`
Go back to Xcode, use the following code to implement sign-in:
```swift
do {
try await client.signInWithBrowser(redirectUri: "logto://callback")
<pre>
<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
}
```
}`}
</code>
</pre>
</Step>

14
packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx
View file

@ -82,7 +82,7 @@ let config = try? LogtoConfig(
### 配置 Redirect URI
首先，我们来配置你的 redirect URI scheme。例如 `logto://callback`
首先，我们来配置你的 redirect URI scheme。例如 `io.logto://callback`
<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
@ -92,14 +92,16 @@ let config = try? LogtoConfig(
回到 Xcode，使用如下代码实现登录：
```swift
do {
try await client.signInWithBrowser(redirectUri: "logto://callback")
<pre>
<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 {
// 登录过程中有错误发生
}
```
}`}
</code>
</pre>
</Step>

24
packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
View file

@ -89,8 +89,9 @@ We provide two hooks `useHandleSignInCallback()` and `useLogto()` which can help
Go back to your IDE/editor, use the following code to implement the sign-in button:
```tsx
import { useLogto } from '@logto/react';
<pre>
<code className="language-tsx">
{`import { useLogto } from '@logto/react';
const SignIn = () => {
const { signIn, isAuthenticated } = useLogto();
@ -100,12 +101,13 @@ const SignIn = () => {
}
return (
<button onClick={() => signIn('http://localhost:1234/callback')}>
<button onClick={() => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}')}>
Sign In
</button>
);
};
```
};`}
</code>
</pre>
### Handle redirect
@ -153,17 +155,19 @@ After signing out, it'll be great to redirect user back to your website. Let's a
### Implement a sign-out button
```tsx
const SignOut = () => {
<pre>
<code className="language-tsx">
{`const SignOut = () => {
const { signOut } = useLogto();
return (
<button onClick={() => signOut('http://localhost:1234')}>
<button onClick={() => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}')}>
Sign out
</button>
);
};
```
};`}
</code>
</pre>
</Step>

24
packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx
View file

@ -89,8 +89,9 @@ const App = () => (
返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮：
```tsx
import { useLogto } from '@logto/react';
<pre>
<code className="language-tsx">
{`import { useLogto } from '@logto/react';
const SignIn = () => {
const { signIn, isAuthenticated } = useLogto();
@ -100,12 +101,13 @@ const SignIn = () => {
}
return (
<button onClick={() => signIn('http://localhost:1234/callback')}>
<button onClick={() => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}')}>
登录
</button>
);
};
```
};`}
</code>
</pre>
### 处理重定向
@ -153,17 +155,19 @@ const Callback = () => {
### 实现退出登录按钮
```tsx
const SignOut = () => {
<pre>
<code className="language-tsx">
{`const SignOut = () => {
const { signOut } = useLogto();
return (
<button onClick={() => signOut('http://localhost:1234')}>
<button onClick={() => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}')}>
退出登录
</button>
);
};
```
};`}
</code>
</pre>
</Step>

20
packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx
View file

@ -81,11 +81,13 @@ First, let’s enter your redirect URI. E.g. `http://localhost:1234/callback`.
Go back to your IDE/editor, use the following code to implement the sign-in button:
```html
<button onclick="logtoClient.signIn('http://localhost:1234/callback')">
<pre>
<code className="language-html">
{`<button onclick="logtoClient.signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}')">
Sign In
</button>
```
</button>`}
</code>
</pre>
### Handle redirect
@ -122,11 +124,13 @@ After signing out, it'll be great to redirect user back to your website. Let's a
### Implement a sign-out button
```html
<button onclick="logtoClient.signOut('http://localhost:1234')">
<pre>
<code className="language-html">
{`<button onclick="logtoClient.signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}')">
Sign Out
</button>
```
</button>`}
</code>
</pre>
</Step>

20
packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx
View file

@ -81,11 +81,13 @@ const logtoClient = new LogtoClient({
返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮：
```html
<button onclick="logtoClient.signIn('http://localhost:1234/callback')">
<pre>
<code className="language-html">
{`<button onclick="logtoClient.signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}')">
登录
</button>
```
</button>`}
</code>
</pre>
### 处理重定向
@ -122,11 +124,13 @@ try {
### 实现退出登录按钮
```html
<button onclick="logtoClient.signOut('http://localhost:1234')">
<pre>
<code className="language-html">
{`<button onclick="logtoClient.signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}')">
退出登录
</button>
```
</button>`}
</code>
</pre>
</Step>

20
packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
View file

@ -92,12 +92,14 @@ We provide two composables `useHandleSignInCallback()` and `useLogto()`, which c
Go back to your IDE/editor, use the following code to implement the sign-in button:
```ts
import { useLogto } from "@logto/vue";
<pre>
<code className="language-ts">
{`import { useLogto } from "@logto/vue";
const { signIn, isAuthenticated } = useLogto();
const onClickSignIn = () => signIn('http://localhost:1234/callback');
```
const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}');`}
</code>
</pre>
```html
<div v-if="isAuthenticated">
@ -162,12 +164,14 @@ After signing out, it'll be great to redirect user back to your website. Let's a
### Implement a sign-out button
```ts
import { useLogto } from "@logto/vue";
<pre>
<code className="language-ts">
{`import { useLogto } from "@logto/vue";
const { signOut } = useLogto();
const onClickSignOut = () => signOut('http://localhost:1234');
```
const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');`}
</code>
</pre>
```html
<button @click="onClickSignOut">Sign Out</button>

20
packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
View file

@ -92,12 +92,14 @@ app.mount("#app");`}
返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮：
```ts
import { useLogto } from "@logto/vue";
<pre>
<code className="language-ts">
{`import { useLogto } from "@logto/vue";
const { signIn, isAuthenticated } = useLogto();
const onClickSignIn = () => signIn('http://localhost:1234/callback');
```
const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}');`}
</code>
</pre>
```html
<div v-if="isAuthenticated">
@ -162,12 +164,14 @@ const router = createRouter({
### 实现退出登录按钮
```ts
import { useLogto } from "@logto/vue";
<pre>
<code className="language-ts">
{`import { useLogto } from "@logto/vue";
const { signOut } = useLogto();
const onClickSignOut = () => signOut('http://localhost:1234');
```
const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');`}
</code>
</pre>
```html
<button @click="onClickSignOut">退出登录</button>

4
packages/console/src/pages/Applications/components/Guide/index.tsx
View file

@ -41,7 +41,7 @@ const Guides: Record<string, LazyExoticComponent<(props: MDXProps) => JSX.Elemen
};
const Guide = ({ app, isCompact, onClose }: Props) => {
const { id: appId, name: appName, type: appType } = app;
const { id: appId, name: appName, type: appType, oidcClientMetadata } = app;
const sdks = applicationTypeAndSdkTypeMappings[appType];
const [selectedSdk, setSelectedSdk] = useState<SupportedSdk>(sdks[0]);
const [activeStepIndex, setActiveStepIndex] = useState(-1);
@ -91,6 +91,8 @@ const Guide = ({ app, isCompact, onClose }: Props) => {
<GuideComponent
appId={appId}
endpoint={window.location.origin}
redirectUris={oidcClientMetadata.redirectUris}
postLogoutRedirectUris={oidcClientMetadata.postLogoutRedirectUris}
activeStepIndex={activeStepIndex}
isCompact={isCompact}
onNext={(nextIndex: number) => {