From 3fdf47248b021ceb0fd35bc8122477228b06d392 Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Thu, 7 Jul 2022 18:39:14 +0800 Subject: [PATCH] refactor(console): sync input URI values in code samples in guide --- .../docs/tutorial/integrate-sdk/android.mdx | 24 +++++++++++-------- .../tutorial/integrate-sdk/android_zh-cn.mdx | 24 +++++++++++-------- .../docs/tutorial/integrate-sdk/express.mdx | 6 ++--- .../tutorial/integrate-sdk/express_zh-cn.mdx | 2 +- .../docs/tutorial/integrate-sdk/ios.mdx | 14 ++++++----- .../docs/tutorial/integrate-sdk/ios_zh-cn.mdx | 14 ++++++----- .../docs/tutorial/integrate-sdk/react.mdx | 24 +++++++++++-------- .../tutorial/integrate-sdk/react_zh-cn.mdx | 24 +++++++++++-------- .../docs/tutorial/integrate-sdk/vanilla.mdx | 20 +++++++++------- .../tutorial/integrate-sdk/vanilla_zh-cn.mdx | 20 +++++++++------- .../docs/tutorial/integrate-sdk/vue.mdx | 20 +++++++++------- .../docs/tutorial/integrate-sdk/vue_zh-cn.mdx | 20 +++++++++------- .../Applications/components/Guide/index.tsx | 4 +++- 13 files changed, 127 insertions(+), 89 deletions(-) diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx index a002264da..e68da6e00 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx @@ -140,21 +140,25 @@ Go back to your IDE/editor, use the following code to implement sign-in: -```kotlin -logtoClient.signIn(this, "") { logtoException: LogtoException? -> - // User signed in successfully if `logtoException` is null. -} -``` +
+
+{`logtoClient.signIn(this, "${props.redirectUris[0] ?? ''}") { logtoException: LogtoException? ->
+    // User signed in successfully if \`logtoException\` is null.
+}`}
+
+
 -```java -logtoClient.signIn(this, "", logtoException -> { - // User signed in successfully if `logtoException` is null. -}); -``` +
+
+{`logtoClient.signIn(this, "${props.redirectUris[0] ?? ''}", logtoException -> {
+    // User signed in successfully if \`logtoException\` is null.
+});`}
+
+
 diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx index d61c62894..def6cd75e 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx @@ -140,21 +140,25 @@ public class MainActivity extends AppCompatActivity { -```kotlin -logtoClient.signIn(this, "") { logtoException: LogtoException? -> - // 当 `logtoException` 为 null 时，则登录成功。 -} -``` +
+
+{`logtoClient.signIn(this, "${props.redirectUris[0] ?? ''}") { logtoException: LogtoException? ->
+    // 当 \`logtoException\` 为 null 时，则登录成功。
+}`}
+
+
 -```java -logtoClient.signIn(this, "", logtoException -> { - // 当 `logtoException` 为 null 时，则登录成功。 -}); -``` +
+
+{`logtoClient.signIn(this, "${props.redirectUris[0] ?? ''}", logtoException -> {
+    // 当 \`logtoException\` 为 null 时，则登录成功。
+});`}
+
+
 diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx index 5c641b225..b19d58836 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx @@ -80,12 +80,12 @@ app.use( > - In the following steps, we assume your app is running on http://localhost:3000. + In the following steps, we assume your app is running on http://localhost:1234. ### 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`. @@ -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(' '), }; diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx index 9c8adfcd7..db2857967 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx @@ -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(' '), }; diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx index 0e07280f8..1100ef9c3 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx @@ -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` @@ -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") +
+
+{`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
-}
-```
+}`}
+
+
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx index c7daae017..9062a1905 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx @@ -82,7 +82,7 @@ let config = try? LogtoConfig( ### 配置 Redirect URI -首先，我们来配置你的 redirect URI scheme。例如 `logto://callback` +首先，我们来配置你的 redirect URI scheme。例如 `io.logto://callback` @@ -92,14 +92,16 @@ let config = try? LogtoConfig( 回到 Xcode，使用如下代码实现登录： -```swift -do { - try await client.signInWithBrowser(redirectUri: "logto://callback") +
+
+{`do {
+  try await client.signInWithBrowser(redirectUri: "${props.redirectUris[0] ?? 'io.logto://callback'}")
   print(client.isAuthenticated) // true
 } catch let error as LogtoClientErrors.SignIn {
   // 登录过程中有错误发生
-}
-```
+}`}
+
+
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx index 0d7ddbf77..bbaaaf34d 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx @@ -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'; +
+
+{`import { useLogto } from '@logto/react';
 
 const SignIn = () => {
   const { signIn, isAuthenticated } = useLogto();
@@ -100,12 +101,13 @@ const SignIn = () => {
   }
 
   return (
-    
   );
-};
-```
+};`}
+
+
### 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 = () => { +
+
+{`const SignOut = () => {
   const { signOut } = useLogto();
 
   return (
-    
   );
-};
-```
+};`}
+
+
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx index 92a29d1ae..dd5b1929f 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx @@ -89,8 +89,9 @@ const App = () => ( 返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮： -```tsx -import { useLogto } from '@logto/react'; +
+
+{`import { useLogto } from '@logto/react';
 
 const SignIn = () => {
   const { signIn, isAuthenticated } = useLogto();
@@ -100,12 +101,13 @@ const SignIn = () => {
   }
 
   return (
-    
   );
-};
-```
+};`}
+
+
### 处理重定向 @@ -153,17 +155,19 @@ const Callback = () => { ### 实现退出登录按钮 -```tsx -const SignOut = () => { +
+
+{`const SignOut = () => {
   const { signOut } = useLogto();
 
   return (
-    
   );
-};
-```
+};`}
+
+
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx index 3092c53b2..87cef3285 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx @@ -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 - -``` +`} + + ### 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 - -``` +`} + + diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx index 1c292c90f..2e0b669f0 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx @@ -81,11 +81,13 @@ const logtoClient = new LogtoClient({ 返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮： -```html - -``` +`} + + ### 处理重定向 @@ -122,11 +124,13 @@ try { ### 实现退出登录按钮 -```html - -``` +`} + + diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx index b3cf8256d..4c5ebcca7 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx @@ -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"; +
+
+{`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'}');`}
+
+
```html
@@ -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"; +
+
+{`import { useLogto } from "@logto/vue";
 
 const { signOut } = useLogto();
-const onClickSignOut = () => signOut('http://localhost:1234');
-```
+const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');`}
+
+
```html diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx index e70904f9a..3fd845a4b 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx @@ -92,12 +92,14 @@ app.mount("#app");`} 返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮： -```ts -import { useLogto } from "@logto/vue"; +
+
+{`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'}');`}
+
+
```html
@@ -162,12 +164,14 @@ const router = createRouter({ ### 实现退出登录按钮 -```ts -import { useLogto } from "@logto/vue"; +
+
+{`import { useLogto } from "@logto/vue";
 
 const { signOut } = useLogto();
-const onClickSignOut = () => signOut('http://localhost:1234');
-```
+const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');`}
+
+
```html diff --git a/packages/console/src/pages/Applications/components/Guide/index.tsx b/packages/console/src/pages/Applications/components/Guide/index.tsx index d21c35ae0..22a82dec9 100644 --- a/packages/console/src/pages/Applications/components/Guide/index.tsx +++ b/packages/console/src/pages/Applications/components/Guide/index.tsx @@ -41,7 +41,7 @@ const Guides: Record 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(sdks[0]); const [activeStepIndex, setActiveStepIndex] = useState(-1); @@ -91,6 +91,8 @@ const Guide = ({ app, isCompact, onClose }: Props) => { {