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}',
  appId: '${props.appId}',
});`}
</code>
</pre>

</Step>

<Step
  title="登录"
  subtitle="共 3 步"
  index={2}
  activeIndex={props.activeStepIndex}
  onButtonClick={() => props.onNext(3)}
>

<Alert>
  在如下代码示例中, 我们均先假设你的应用运行在 <code>http://localhost:3000</code> 上。
</Alert>

### 配置 Redirect URI

首先，我们来添加 redirect URI，如： `http://localhost:3000/callback`。

<UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="application_details.redirect_uri" />

### 实现登录按钮

返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮：

<pre>
<code className="language-html">
{`<button onclick="logtoClient.signIn('${props.redirectUris[0] ?? 'http://localhost:3000/callback'}')">
  登录
</button>`}
</code>
</pre>

### 处理重定向

马上就要大功告成！在上一步，我们将 `http://localhost:3000/callback` 用作 Redirect URI，现在我们需要对其妥善处理。

在你的 `/callback` 路由下插入如下代码：

```ts
try {
  await logtoClient.handleSignInCallback(window.location.href);
  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:3000` 添加至下面的输入框，并将其作为调用 `.signOut()` 的参数。

<UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="application_details.post_sign_out_redirect_uri" />

### 实现退出登录按钮

<pre>
<code className="language-html">
{`<button onclick="logtoClient.signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:3000'}')">
  退出登录
</button>`}
</code>
</pre>

</Step>

<Step
  title="延展阅读"
  subtitle="共 4 篇"
  index={4}
  activeIndex={props.activeStepIndex}
  buttonText="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>
