云开发Cloudbase推出登录组件

开发「用户登录模块」是 Web 应用开发者最关心的事项之一，继云开发 CloudBase 原生支持短信验证码登录后，目前云开发已支持短信验证码、邮箱等多种登录鉴权方式，供不同的用户场景使用。

为了进一步优化开发者的使用体验，云开发 CloudBase 全新推出了自带云开发登录能力的 UI 组件——@cloudbase/ui-react，封装了邮箱登录、短信验证码登录、用户名登录、微信授权登录等能力，基本覆盖了云开发已有的用户登录场景。

对比之前需要开发者引入 SDK 并使用相关 API 才能实现登录鉴权，现在只需几行核心代码，直接引入组件进行开发即可！

如何使用 @cloudbase/ui-react UI 组件？

1、前往云开发控制台，在 环境-登录授权 中，开启相应的登录授权开关，如“短信验证码登录”。

2、安装依赖

npm install --save @cloudbase/ui-react

• 目前仅支持了 React + WEUI 组件库
• UI 组件需结合 @cloudbase/js-sdk@1.5.4-alpha.0 及以上版本使用

3、React 示例Demo

App.js

import {
AUTHSTATE,
LOGINTYPE,
CloudbaseAuthenticator,
CloudbaseSignOut,
createAuthHooks,
} from "@cloudbase/ui-react"
import cloudbase from "@cloudbase/js-sdk"

const app = cloudbase.init({
env: "your envid"
})
const { useAuthData } = createAuthHooks(app)

function App() {
const { authState, user } = useAuthData()
return authState === AUTHSTATE.SIGNEDIN && user ? (
<>
Hello, {user.uid}
<CloudbaseSignOut app={app} />
</>
) : (
<CloudbaseAuthenticator
userLoginType={LOGINTYPE.PHONE}
app={app}
/>
)
}

export default App

文档： 云开发IU组件