mirror of
https://github.com/logto-io/logto.git
synced 2025-01-06 20:40:08 -05:00
refactor(console): pre-fill app id and endpoint in guides
This commit is contained in:
Charles Zhao
parent
5b3612c153
commit
7a3e2a3baf
8 changed files with 58 additions and 44 deletions
|
|
@ -82,22 +82,24 @@ e.g. `io.logto.android://io.logto.sample/callback`
|
|||
|
||||
<TabItem value="kotlin" label="Kotlin">
|
||||
|
||||
```kotlin
|
||||
import io.logto.sdk.android.LogtoClient
|
||||
<pre>
|
||||
<code className="language-kotlin">
|
||||
{`import io.logto.sdk.android.LogtoClient
|
||||
import io.logto.sdk.android.type.LogtoConfig
|
||||
|
||||
class MainActivity : AppCompatActivity() {
|
||||
val logtoConfig = LogtoConfig(
|
||||
endpoint = "<your-logto-endpoint>",
|
||||
appId = "<your-app-id>",
|
||||
endpoint = "${props.endpoint}",
|
||||
appId = "${props.appId}",
|
||||
scopes = null,
|
||||
resources = null,
|
||||
usingPersistStorage = true,
|
||||
)
|
||||
|
||||
val logtoClient = LogtoClient(logtoConfig, application)
|
||||
}
|
||||
```
|
||||
}`}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
</TabItem>
|
||||
|
||||
|
|
|
|||
|
|
@ -82,22 +82,24 @@ $(LOGTO_REDIRECT_SCHEME)://$(YOUR_APP_PACKAGE)/callback
|
|||
|
||||
<TabItem value="kotlin" label="Kotlin">
|
||||
|
||||
```kotlin
|
||||
import io.logto.sdk.android.LogtoClient
|
||||
<pre>
|
||||
<code className="language-kotlin">
|
||||
{`import io.logto.sdk.android.LogtoClient
|
||||
import io.logto.sdk.android.type.LogtoConfig
|
||||
|
||||
class MainActivity : AppCompatActivity() {
|
||||
val logtoConfig = LogtoConfig(
|
||||
endpoint = "<your-logto-endpoint>",
|
||||
appId = "<your-app-id>",
|
||||
endpoint = "${props.endpoint}",
|
||||
appId = "${props.appId}",
|
||||
scopes = null,
|
||||
resources = null,
|
||||
usingPersistStorage = true,
|
||||
)
|
||||
|
||||
val logtoClient = LogtoClient(logtoConfig, application)
|
||||
}
|
||||
```
|
||||
}`}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
</TabItem>
|
||||
|
||||
|
|
|
|||
|
|
@ -39,15 +39,17 @@ We do not support **Carthage** and **CocoaPods** at the time due to some technic
|
|||
onButtonClick={() => props.onNext(2)}
|
||||
>
|
||||
|
||||
```swift
|
||||
import Logto
|
||||
<pre>
|
||||
<code className="language-swift">
|
||||
{`import Logto
|
||||
|
||||
let config = try? LogtoConfig(
|
||||
endpoint: "<your-logto-endpoint>",
|
||||
appId: "<your-application-id>"
|
||||
endpoint: "${props.endpoint}",
|
||||
appId: "${props.appId}",
|
||||
)
|
||||
let logtoClient = LogtoClient(useConfig: config)
|
||||
```
|
||||
let logtoClient = LogtoClient(useConfig: config)`}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
By default, we store credentials like ID Token and Refresh Token in Keychain. Thus the user doesn't need to sign in again when he returns.
|
||||
|
||||
|
|
|
|||
|
|
@ -60,16 +60,17 @@ pnpm build
|
|||
|
||||
Add the following code to your main html file. You may need client ID and authorization domain.
|
||||
|
||||
```tsx
|
||||
import { LogtoProvider, LogtoConfig } from '@logto/react';
|
||||
<pre>
|
||||
<code className="language-tsx">
|
||||
{`import { LogtoProvider, LogtoConfig } from '@logto/react';
|
||||
import React from 'react';
|
||||
|
||||
//...
|
||||
|
||||
const App = () => {
|
||||
const config: LogtoConfig = {
|
||||
clientId: 'foo',
|
||||
endpoint: 'https://your-endpoint-domain.com',
|
||||
clientId: '${props.appId}',
|
||||
endpoint: '${props.endpoint}',
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -90,8 +91,9 @@ const App = () => {
|
|||
</LogtoProvider>
|
||||
</BrowserRouter>
|
||||
);
|
||||
};
|
||||
```
|
||||
};`}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
</Step>
|
||||
|
||||
|
|
|
|||
|
|
@ -58,19 +58,19 @@ pnpm build
|
|||
onButtonClick={() => props.onNext(2)}
|
||||
>
|
||||
|
||||
在项目的 html 文件中，加入如下代码（需提前准备好 client ID 以及 authorization domain）
|
||||
Add the following code to your main html file. You may need client ID and authorization domain.
|
||||
在项目的 App.tsx 文件中，加入如下代码（需提前准备好 client ID 以及 authorization domain）
|
||||
|
||||
```tsx
|
||||
import { LogtoProvider, LogtoConfig } from '@logto/react';
|
||||
<pre>
|
||||
<code className="language-tsx">
|
||||
{`import { LogtoProvider, LogtoConfig } from '@logto/react';
|
||||
import React from 'react';
|
||||
|
||||
//...
|
||||
|
||||
const App = () => {
|
||||
const config: LogtoConfig = {
|
||||
clientId: 'foo',
|
||||
endpoint: 'https://your-endpoint-domain.com'
|
||||
clientId: '${props.appId}',
|
||||
endpoint: '${props.endpoint}',
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -91,8 +91,9 @@ const App = () => {
|
|||
</LogtoProvider>
|
||||
</BrowserRouter>
|
||||
);
|
||||
};
|
||||
```
|
||||
};`}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
</Step>
|
||||
|
||||
|
|
|
|||
|
|
@ -52,19 +52,21 @@ pnpm add @logto/vue
|
|||
|
||||
`import` and use `createLogto` to install Logto plugin:
|
||||
|
||||
```ts
|
||||
import { createLogto, LogtoConfig } from '@logto/vue';
|
||||
<pre>
|
||||
<code className="language-ts">
|
||||
{`import { createLogto, LogtoConfig } from '@logto/vue';
|
||||
|
||||
const config: LogtoConfig = {
|
||||
appId: '<your-application-id>',
|
||||
endpoint: '<your-logto-endpoint>'
|
||||
appId: '${props.appId}',
|
||||
endpoint: '${props.endpoint}',
|
||||
};
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(createLogto, config);
|
||||
app.mount("#app");
|
||||
```
|
||||
app.mount("#app");`}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
</Step>
|
||||
<Step
|
||||
|
|
|
|||
|
|
@ -52,19 +52,21 @@ pnpm add @logto/vue
|
|||
|
||||
`import` 并使用 `createLogto` 以插件的形式安装 Logto:
|
||||
|
||||
```ts
|
||||
import { createLogto, LogtoConfig } from '@logto/vue';
|
||||
<pre>
|
||||
<code className="language-ts">
|
||||
{`import { createLogto, LogtoConfig } from '@logto/vue';
|
||||
|
||||
const config: LogtoConfig = {
|
||||
appId: '<your-application-id>',
|
||||
endpoint: '<your-logto-endpoint>'
|
||||
appId: '${props.appId}',
|
||||
endpoint: '${props.endpoint}',
|
||||
};
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(createLogto, config);
|
||||
app.mount("#app");
|
||||
```
|
||||
app.mount("#app");`}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
</Step>
|
||||
<Step
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ const Guide = ({ app, isCompact, onClose }: Props) => {
|
|||
{GuideComponent && (
|
||||
<GuideComponent
|
||||
appId={appId}
|
||||
endpoint={window.location.origin}
|
||||
activeStepIndex={activeStepIndex}
|
||||
isCompact={isCompact}
|
||||
onNext={(nextIndex: number) => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue