Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-24 22:05:56 -05:00
Code Issues Activity

refactor(console): sync input URI values in code samples in guide

Browse source
This commit is contained in:
Charles Zhao 2022-07-07 18:39:14 +08:00
parent d5d6c5ed08
commit 3fdf47248b
No known key found for this signature in database
GPG key ID: 4858774754C92DF2
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"> <TabItem value="kotlin" label="Kotlin">
```kotlin <pre>
logtoClient.signIn(this, "<your-redirect-uri>") { logtoException: LogtoException? -> <code className="language-kotlin">
// User signed in successfully if `logtoException` is null. {`logtoClient.signIn(this, "${props.redirectUris[0] ?? '<your-redirect-uri>'}") { logtoException: LogtoException? ->
} // User signed in successfully if \`logtoException\` is null.
``` }`}
</code>
</pre>
</TabItem> </TabItem>
<TabItem value="java" label="Java"> <TabItem value="java" label="Java">
```java <pre>
logtoClient.signIn(this, "<your-redirect-uri>", logtoException -> { <code className="language-java">
// User signed in successfully if `logtoException` is null. {`logtoClient.signIn(this, "${props.redirectUris[0] ?? '<your-redirect-uri>'}", logtoException -> {
}); // User signed in successfully if \`logtoException\` is null.
``` });`}
</code>
</pre>
</TabItem> </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"> <TabItem value="kotlin" label="Kotlin">
```kotlin <pre>
logtoClient.signIn(this, "<your-redirect-uri>") { logtoException: LogtoException? -> <code className="language-kotlin">
// 当 `logtoException` 为 null 时，则登录成功。 {`logtoClient.signIn(this, "${props.redirectUris[0] ?? '<your-redirect-uri>'}") { logtoException: LogtoException? ->
} // 当 \`logtoException\` 为 null 时，则登录成功。
``` }`}
</code>
</pre>
</TabItem> </TabItem>
<TabItem value="java" label="Java"> <TabItem value="java" label="Java">
```java <pre>
logtoClient.signIn(this, "<your-redirect-uri>", logtoException -> { <code className="language-java">
// 当 `logtoException` 为 null 时，则登录成功。 {`logtoClient.signIn(this, "${props.redirectUris[0] ?? '<your-redirect-uri>'}", logtoException -> {
}); // 当 \`logtoException\` 为 null 时，则登录成功。
``` });`}
</code>
</pre>
</TabItem> </TabItem>

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

@ -80,12 +80,12 @@ app.use(
> >
<Alert> <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> </Alert>
### Configure Redirect URI ### 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" /> <UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
@ -118,7 +118,7 @@ const { fromUint8Array } = require('js-base64');
const config = { const config = {
endpoint: '${props.endpoint}', endpoint: '${props.endpoint}',
appId: '${props.appId}', 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(' '), 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 = { const config = {
endpoint: '${props.endpoint}', endpoint: '${props.endpoint}',
appId: '${props.appId}', appId: '${props.appId}',
redirectUri: 'http://localhost:3000/callback', // 上一步配置过的 Redirect URI redirectUri: '${props.redirectUris[0] ?? 'http://localhost:1234/callback'}', // 上一步配置过的 Redirect URI
scopes: withReservedScopes().split(' '), 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 ### 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" /> <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: Go back to Xcode, use the following code to implement sign-in:
```swift <pre>
do { <code className="language-swift">
try await client.signInWithBrowser(redirectUri: "logto://callback") {`do {
try await client.signInWithBrowser(redirectUri: "${props.redirectUris[0] ?? 'io.logto://callback'}")
print(client.isAuthenticated) // true print(client.isAuthenticated) // true
} catch let error as LogtoClientErrors.SignIn { } catch let error as LogtoClientErrors.SignIn {
// error occured during sign in // error occured during sign in
} }`}
``` </code>
</pre>
</Step> </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
首先，我们来配置你的 redirect URI scheme。例如 `logto://callback` 首先，我们来配置你的 redirect URI scheme。例如 `io.logto://callback`
<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" /> <UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
@ -92,14 +92,16 @@ let config = try? LogtoConfig(
回到 Xcode，使用如下代码实现登录： 回到 Xcode，使用如下代码实现登录：
```swift <pre>
do { <code className="language-swift">
try await client.signInWithBrowser(redirectUri: "logto://callback") {`do {
try await client.signInWithBrowser(redirectUri: "${props.redirectUris[0] ?? 'io.logto://callback'}")
print(client.isAuthenticated) // true print(client.isAuthenticated) // true
} catch let error as LogtoClientErrors.SignIn { } catch let error as LogtoClientErrors.SignIn {
// 登录过程中有错误发生 // 登录过程中有错误发生
} }`}
``` </code>
</pre>
</Step> </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: Go back to your IDE/editor, use the following code to implement the sign-in button:
```tsx <pre>
import { useLogto } from '@logto/react'; <code className="language-tsx">
{`import { useLogto } from '@logto/react';
const SignIn = () => { const SignIn = () => {
const { signIn, isAuthenticated } = useLogto(); const { signIn, isAuthenticated } = useLogto();
@ -100,12 +101,13 @@ const SignIn = () => {
} }
return ( return (
<button onClick={() => signIn('http://localhost:1234/callback')}> <button onClick={() => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}')}>
Sign In Sign In
</button> </button>
); );
}; };`}
``` </code>
</pre>
### Handle redirect ### 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 ### Implement a sign-out button
```tsx <pre>
const SignOut = () => { <code className="language-tsx">
{`const SignOut = () => {
const { signOut } = useLogto(); const { signOut } = useLogto();
return ( return (
<button onClick={() => signOut('http://localhost:1234')}> <button onClick={() => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}')}>
Sign out Sign out
</button> </button>
); );
}; };`}
``` </code>
</pre>
</Step> </Step>

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

@ -89,8 +89,9 @@ const App = () => (
返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮： 返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮：
```tsx <pre>
import { useLogto } from '@logto/react'; <code className="language-tsx">
{`import { useLogto } from '@logto/react';
const SignIn = () => { const SignIn = () => {
const { signIn, isAuthenticated } = useLogto(); const { signIn, isAuthenticated } = useLogto();
@ -100,12 +101,13 @@ const SignIn = () => {
} }
return ( return (
<button onClick={() => signIn('http://localhost:1234/callback')}> <button onClick={() => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}')}>
登录 登录
</button> </button>
); );
}; };`}
``` </code>
</pre>
### 处理重定向 ### 处理重定向
@ -153,17 +155,19 @@ const Callback = () => {
### 实现退出登录按钮 ### 实现退出登录按钮
```tsx <pre>
const SignOut = () => { <code className="language-tsx">
{`const SignOut = () => {
const { signOut } = useLogto(); const { signOut } = useLogto();
return ( return (
<button onClick={() => signOut('http://localhost:1234')}> <button onClick={() => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}')}>
退出登录 退出登录
</button> </button>
); );
}; };`}
``` </code>
</pre>
</Step> </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: Go back to your IDE/editor, use the following code to implement the sign-in button:
```html <pre>
<button onclick="logtoClient.signIn('http://localhost:1234/callback')"> <code className="language-html">
{`<button onclick="logtoClient.signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}')">
Sign In Sign In
</button> </button>`}
``` </code>
</pre>
### Handle redirect ### 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 ### Implement a sign-out button
```html <pre>
<button onclick="logtoClient.signOut('http://localhost:1234')"> <code className="language-html">
{`<button onclick="logtoClient.signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}')">
Sign Out Sign Out
</button> </button>`}
``` </code>
</pre>
</Step> </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 或编辑器，使用如下代码来实现一个登录按钮： 返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮：
```html <pre>
<button onclick="logtoClient.signIn('http://localhost:1234/callback')"> <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 <pre>
<button onclick="logtoClient.signOut('http://localhost:1234')"> <code className="language-html">
{`<button onclick="logtoClient.signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}')">
退出登录 退出登录
</button> </button>`}
``` </code>
</pre>
</Step> </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: Go back to your IDE/editor, use the following code to implement the sign-in button:
```ts <pre>
import { useLogto } from "@logto/vue"; <code className="language-ts">
{`import { useLogto } from "@logto/vue";
const { signIn, isAuthenticated } = useLogto(); const { signIn, isAuthenticated } = useLogto();
const onClickSignIn = () => signIn('http://localhost:1234/callback'); const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}');`}
``` </code>
</pre>
```html ```html
<div v-if="isAuthenticated"> <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 ### Implement a sign-out button
```ts <pre>
import { useLogto } from "@logto/vue"; <code className="language-ts">
{`import { useLogto } from "@logto/vue";
const { signOut } = useLogto(); const { signOut } = useLogto();
const onClickSignOut = () => signOut('http://localhost:1234'); const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');`}
``` </code>
</pre>
```html ```html
<button @click="onClickSignOut">Sign Out</button> <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 或编辑器，使用如下代码来实现一个登录按钮： 返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮：
```ts <pre>
import { useLogto } from "@logto/vue"; <code className="language-ts">
{`import { useLogto } from "@logto/vue";
const { signIn, isAuthenticated } = useLogto(); const { signIn, isAuthenticated } = useLogto();
const onClickSignIn = () => signIn('http://localhost:1234/callback'); const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}');`}
``` </code>
</pre>
```html ```html
<div v-if="isAuthenticated"> <div v-if="isAuthenticated">
@ -162,12 +164,14 @@ const router = createRouter({
### 实现退出登录按钮 ### 实现退出登录按钮
```ts <pre>
import { useLogto } from "@logto/vue"; <code className="language-ts">
{`import { useLogto } from "@logto/vue";
const { signOut } = useLogto(); const { signOut } = useLogto();
const onClickSignOut = () => signOut('http://localhost:1234'); const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');`}
``` </code>
</pre>
```html ```html
<button @click="onClickSignOut">退出登录</button> <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 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 sdks = applicationTypeAndSdkTypeMappings[appType];
const [selectedSdk, setSelectedSdk] = useState<SupportedSdk>(sdks[0]); const [selectedSdk, setSelectedSdk] = useState<SupportedSdk>(sdks[0]);
const [activeStepIndex, setActiveStepIndex] = useState(-1); const [activeStepIndex, setActiveStepIndex] = useState(-1);
@ -91,6 +91,8 @@ const Guide = ({ app, isCompact, onClose }: Props) => {
<GuideComponent <GuideComponent
appId={appId} appId={appId}
endpoint={window.location.origin} endpoint={window.location.origin}
redirectUris={oidcClientMetadata.redirectUris}
postLogoutRedirectUris={oidcClientMetadata.postLogoutRedirectUris}
activeStepIndex={activeStepIndex} activeStepIndex={activeStepIndex}
isCompact={isCompact} isCompact={isCompact}
onNext={(nextIndex: number) => { onNext={(nextIndex: number) => {