mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
refactor(console): add vanilla js integration guide (#1309)
This commit is contained in:
Charles Zhao
GitHub
parent
cb889c8266
commit
427adc892a
5 changed files with 307 additions and 7 deletions
|
|
@ -79,7 +79,7 @@ const App = () => (
|
|||
|
||||
### 配置 Redirect URI
|
||||
|
||||
首先，我们来添加 Redirect URI，如：`http://localhost:1234/callback`
|
||||
首先，我们来添加 Redirect URI，如：`http://localhost:1234/callback`。
|
||||
|
||||
<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
|
||||
|
||||
|
|
@ -177,9 +177,9 @@ const SignOut = () => {
|
|||
onButtonClick={props.onComplete}
|
||||
>
|
||||
|
||||
- [Customize sign-in experience](https://docs.logto.io/zh-cn/docs/recipes/customize-sie)
|
||||
- [Enable SMS or email passcode sign-in](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-passcode-sign-in)
|
||||
- [Enable social sign-in](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-social-sign-in)
|
||||
- [Protect your API](https://docs.logto.io/zh-cn/docs/recipes/protect-your-api)
|
||||
- [自定义登录体验](https://docs.logto.io/zh-cn/docs/recipes/customize-sie)
|
||||
- [启用短信或邮件验证码登录](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-passcode-sign-in)
|
||||
- [启用社交登录](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-social-sign-in)
|
||||
- [保护你的 API](https://docs.logto.io/zh-cn/docs/recipes/protect-your-api)
|
||||
|
||||
</Step>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,148 @@
|
|||
import UriInputField from '@mdx/components/UriInputField';
|
||||
import Step from '@mdx/components/Step';
|
||||
import Tabs from '@mdx/components/Tabs';
|
||||
import TabItem from '@mdx/components/TabItem';
|
||||
import Alert from '@/components/Alert';
|
||||
|
||||
<Step
|
||||
title="Add Logto SDK as a dependency"
|
||||
subtitle="Please select your favorite package manager"
|
||||
index={0}
|
||||
activeIndex={props.activeStepIndex}
|
||||
onButtonClick={() => props.onNext(1)}
|
||||
>
|
||||
<Tabs>
|
||||
<TabItem value="npm" label="npm">
|
||||
|
||||
```bash
|
||||
npm i @logto/browser
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="yarn" label="Yarn">
|
||||
|
||||
```bash
|
||||
yarn add @logto/browser
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="pnpm" label="pnpm">
|
||||
|
||||
```bash
|
||||
pnpm add @logto/browser
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Init LogtoClient"
|
||||
subtitle="1 step"
|
||||
index={1}
|
||||
activeIndex={props.activeStepIndex}
|
||||
onButtonClick={() => props.onNext(2)}
|
||||
>
|
||||
|
||||
Import and init `LogtoClient` by passing config:
|
||||
|
||||
<pre>
|
||||
<code className="language-ts">
|
||||
{`import LogtoClient from '@logto/browser';
|
||||
|
||||
const logtoClient = new LogtoClient({
|
||||
endpoint: '${props.endpoint}',
|
||||
clientId: '${props.appId}',
|
||||
});`}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Sign In"
|
||||
subtitle="3 steps"
|
||||
index={2}
|
||||
activeIndex={props.activeStepIndex}
|
||||
onButtonClick={() => props.onNext(3)}
|
||||
>
|
||||
|
||||
<Alert>
|
||||
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:1234/callback`.
|
||||
|
||||
<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
|
||||
|
||||
### Implement a sign-in button
|
||||
|
||||
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')">
|
||||
Sign In
|
||||
</button>
|
||||
```
|
||||
|
||||
### Handle redirect
|
||||
|
||||
We're almost there! In the last step, we use `http://localhost:1234/callback` as the Redirect URI, and now we need to handle it properly.
|
||||
|
||||
Insert the code below in your `/callback` route:
|
||||
|
||||
```ts
|
||||
try {
|
||||
await logtoClient.handleSignInCallback();
|
||||
console.log(logtoClient.isAuthenticated); // true
|
||||
} catch {
|
||||
// Handle error
|
||||
}
|
||||
```
|
||||
|
||||
Now you can test the sign-in flow.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Sign Out"
|
||||
subtitle="1 step"
|
||||
index={3}
|
||||
activeIndex={props.activeStepIndex}
|
||||
onButtonClick={() => props.onNext(4)}
|
||||
>
|
||||
|
||||
Calling `.signOut()` will clear all the Logto data in memory and localStorage if they exist.
|
||||
|
||||
After signing out, it'll be great to redirect user back to your website. Let's add `http://localhost:1234` as the Post Sign-out URI below, and use it as the parameter when calling `.signOut()`.
|
||||
|
||||
<UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="Post Sign-out Redirect URI" />
|
||||
|
||||
### Implement a sign-out button
|
||||
|
||||
```html
|
||||
<button onclick="logtoClient.signOut('http://localhost:1234')">
|
||||
Sign Out
|
||||
</button>
|
||||
```
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Further readings"
|
||||
subtitle="4 articles"
|
||||
index={4}
|
||||
activeIndex={props.activeStepIndex}
|
||||
buttonText="admin_console.general.done"
|
||||
buttonType="primary"
|
||||
onButtonClick={props.onComplete}
|
||||
>
|
||||
|
||||
- [Customize sign-in experience](https://docs.logto.io/docs/recipes/customize-sie)
|
||||
- [Enable SMS or email passcode sign-in](https://docs.logto.io/docs/tutorials/get-started/enable-passcode-sign-in)
|
||||
- [Enable social sign-in](https://docs.logto.io/docs/tutorials/get-started/enable-social-sign-in)
|
||||
- [Protect your API](https://docs.logto.io/docs/recipes/protect-your-api)
|
||||
|
||||
</Step>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
import UriInputField from '@mdx/components/UriInputField';
|
||||
import Step from '@mdx/components/Step';
|
||||
import Tabs from '@mdx/components/Tabs';
|
||||
import TabItem from '@mdx/components/TabItem';
|
||||
import Alert from '@/components/Alert';
|
||||
|
||||
<Step
|
||||
title="将 Logto SDK 添加至依赖"
|
||||
subtitle="选择你熟悉的包管理工具"
|
||||
index={0}
|
||||
activeIndex={props.activeStepIndex}
|
||||
onButtonClick={() => props.onNext(1)}
|
||||
>
|
||||
<Tabs>
|
||||
<TabItem value="npm" label="npm">
|
||||
|
||||
```bash
|
||||
npm i @logto/browser
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="yarn" label="Yarn">
|
||||
|
||||
```bash
|
||||
yarn add @logto/browser
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="pnpm" label="pnpm">
|
||||
|
||||
```bash
|
||||
pnpm add @logto/browser
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="初始化 LogtoClient"
|
||||
subtitle="共 1 步"
|
||||
index={1}
|
||||
activeIndex={props.activeStepIndex}
|
||||
onButtonClick={() => props.onNext(2)}
|
||||
>
|
||||
|
||||
Import 并传入 config 以初始化 `LogtoClient`：
|
||||
|
||||
<pre>
|
||||
<code className="language-ts">
|
||||
{`import LogtoClient from '@logto/browser';
|
||||
|
||||
const logtoClient = new LogtoClient({
|
||||
endpoint: '${props.endpoint}',
|
||||
clientId: '${props.appId}',
|
||||
});`}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="登录"
|
||||
subtitle="共 3 步"
|
||||
index={2}
|
||||
activeIndex={props.activeStepIndex}
|
||||
onButtonClick={() => props.onNext(3)}
|
||||
>
|
||||
|
||||
<Alert>
|
||||
在如下代码示例中, 我们均先假设你的应用运行在 <code>http://localhost:1234</code> 上。
|
||||
</Alert>
|
||||
|
||||
### 配置 Redirect URI
|
||||
|
||||
首先，我们来添加 redirect URI，如： `http://localhost:1234/callback`。
|
||||
|
||||
<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
|
||||
|
||||
### 实现登录按钮
|
||||
|
||||
返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮：
|
||||
|
||||
```html
|
||||
<button onclick="logtoClient.signIn('http://localhost:1234/callback')">
|
||||
登录
|
||||
</button>
|
||||
```
|
||||
|
||||
### 处理重定向
|
||||
|
||||
马上就要大功告成！在上一步，我们将 `http://localhost:1234/callback` 用作 Redirect URI，现在我们需要对其妥善处理。
|
||||
|
||||
在你的 `/callback` 路由下插入如下代码：
|
||||
|
||||
```ts
|
||||
try {
|
||||
await logtoClient.handleSignInCallback();
|
||||
console.log(logtoClient.isAuthenticated); // true
|
||||
} catch {
|
||||
// 处理错误
|
||||
}
|
||||
```
|
||||
|
||||
现在可以测试登录流程了。
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="退出登录"
|
||||
subtitle="共 1 步"
|
||||
index={3}
|
||||
activeIndex={props.activeStepIndex}
|
||||
onButtonClick={() => props.onNext(4)}
|
||||
>
|
||||
|
||||
调用 `.signOut()` 将清理内存与 localStorage 中的所有 Logto 数据（如果有）。
|
||||
|
||||
在退出登录后，让你的用户重新回到你的网站是个不错的选择。让我们将 `http://localhost:1234` 添加至下面的输入框，并将其作为调用 `.signOut()` 的参数。
|
||||
|
||||
<UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="Post Sign-out Redirect URI" />
|
||||
|
||||
### 实现退出登录按钮
|
||||
|
||||
```html
|
||||
<button onclick="logtoClient.signOut('http://localhost:1234')">
|
||||
退出登录
|
||||
</button>
|
||||
```
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="延展阅读"
|
||||
subtitle="共 4 篇"
|
||||
index={4}
|
||||
activeIndex={props.activeStepIndex}
|
||||
buttonText="admin_console.general.done"
|
||||
buttonType="primary"
|
||||
onButtonClick={props.onComplete}
|
||||
>
|
||||
|
||||
- [自定义登录体验](https://docs.logto.io/zh-cn/docs/recipes/customize-sie)
|
||||
- [启用短信或邮件验证码登录](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-passcode-sign-in)
|
||||
- [启用社交登录](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-social-sign-in)
|
||||
- [保护你的 API](https://docs.logto.io/zh-cn/docs/recipes/protect-your-api)
|
||||
|
||||
</Step>
|
||||
|
|
@ -23,11 +23,15 @@ const Guides: Record<string, LazyExoticComponent<(props: MDXProps) => JSX.Elemen
|
|||
android: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/android.mdx')),
|
||||
react: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/react.mdx')),
|
||||
vue: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/vue.mdx')),
|
||||
vanilla: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/vanilla.mdx')),
|
||||
'android_zh-cn': lazy(
|
||||
async () => import('@/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx')
|
||||
),
|
||||
'react_zh-cn': lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx')),
|
||||
'vue_zh-cn': lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx')),
|
||||
'vanilla_zh-cn': lazy(
|
||||
async () => import('@/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx')
|
||||
),
|
||||
};
|
||||
|
||||
const Guide = ({ app, isCompact, onClose }: Props) => {
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@ export const applicationTypeI18nKey = Object.freeze({
|
|||
export enum SupportedSdk {
|
||||
iOS = 'iOS',
|
||||
Android = 'Android',
|
||||
Angular = 'Angular',
|
||||
React = 'React',
|
||||
Vue = 'Vue',
|
||||
Vanilla = 'Vanilla',
|
||||
Traditional = 'Traditional',
|
||||
}
|
||||
|
||||
export const applicationTypeAndSdkTypeMappings = Object.freeze({
|
||||
[ApplicationType.Native]: [SupportedSdk.iOS, SupportedSdk.Android],
|
||||
[ApplicationType.SPA]: [SupportedSdk.Angular, SupportedSdk.React, SupportedSdk.Vue],
|
||||
[ApplicationType.SPA]: [SupportedSdk.React, SupportedSdk.Vue, SupportedSdk.Vanilla],
|
||||
[ApplicationType.Traditional]: [SupportedSdk.Traditional],
|
||||
} as const);
|
||||
|
|
|
|||
Loading…
Reference in a new issue