SBTAuth 轻量接入

本文档帮助您快速将 SBTAuth 接入到您的应用。 SBTAuth 接入是非常容易的，您可以使用我们的服务实现登录功能。

Play on StackBlitz

您可以通过以下四步快速实现连接至 SBTAuth Wallet。

1. 安装 SBTAuth Wallet

Yarn
yarn add @sbtauth/sbtauth-wallet
NPM
npm install @sbtauth/sbtauth-wallet

2. 初始化 SBTAuth Wallet

如果 developMode 为 true，则连接至测试服务，测试服务邮箱登录无需验证码，同时测试服务仅可连接至测试网。请在正式发布时确保 developMode 为 false 。
您可以通过 SbtAuthWallet.icon 获取 SBTAuth logo。

SBTAuth Wallet 目前支持网络包括 Ethereum Polygon BNB Smart Chain。

// Initialize sbtauthconst sbtauth = new SbtAuthWallet({  developMode: true,  defaultChainId: '0x5',  uiConfig: {    /** 语言设置 */    locale: 'zh-TW',    /** 是否显示悬浮窗 */    showFloatBubble: false  },})

3. 插入 SBTAuth login 组件

从 sbtauth.provider 获取 login 组件，然后插入到 document tree 中。

// Insert sbtauth login component into document treeconst loginWidget = sbtauth.provider?.loginWidget()if (loginWidget) {    document.querySelector('#sbtauth-login')?.append(loginWidget)}

SBTAuth login 组件支持通过 CSS 变量修改主题。

:root{    --sbtauth-height: 400px;   --sbtauth-width: 400px;  --sbtauth-padding: 20px;  --sbtauth-border-radius: 20px;  --sbtauth-primary: #5f69ea;  --sbtauth-background: #fff;  --sbtauth-onbackground: #000;  --sbtauth-border-radius: 20px;  /** 设置悬浮窗初始化位置 */  --sbtauth-bubble-left: 20px;  --sbtauth-bubble-bottom: 20px;}

当用户登录到 sbtauth 后，可以通过监听 accountsChanged 事件获取用户登录状态。

sbtauth.provider.on('accountsChanged', async (data: string[] | undefined) => {    if (data && data.length > 0) {        console.log('returned result', { result })    }})

通过监听 disconnect 事件监听用户断开连接或退出登录。

sbtauth.provider.on('disconnect', async () => {    const loginWidget = sbtauth.provider?.loginWidget()    if (loginWidget) {        walletLogin?.replaceChild(walletLogin.firstChild!, loginWidget)    }})

4. 获取用户信息

// Get user infoconst user = sbtauth.getUserInfo()

5. 使用 SBTAuth Wallet

SBTAuth 提供标准的 EIP1193 Provider API。建议通过 ethersjs 方便的使用 SBTAuth Provider，快速了解。

Table of Contents