@cloudbase/ui-react v1.0.5

云开发 UI 组件

云开发 UI 组件 是云开发官方维护的 UI 组件库，提供基于云开发封装的一系列能力，目前已支持统一登录能力。

安装

npm install --save @cloudbase/ui-react

目前仅支持了 React + WEUI 组件库。

⚠️ UI 组件需结合 @cloudbase/js-sdk@1.5.4-alpha.0 及以上版本使用。

使用

推荐用法

import React from 'react';

import {
  CloudbaseAuthenticator,
  onAuthUIStateChange,
  AUTHSTATE,
  LOGINTYPE,
  CloudbaseSignOut, // 登出组件
  CloudbaseSignIn, // 登录组件
  CloudbaseSetUsername, // 更新用户名组件
  CloudbaseForgotPassword, // 忘记密码组件
  CloudbaseResetPassword, // 重置密码组件
  CloudbaseSignUp // 注册组件
} from '@cloudbase/ui-react';
import cloudbase from '@cloudbase/js-sdk';

const app = cloudbase.init({
  env: 'your envId'
});

function App() {
  const [authState, setAuthState] = React.useState(AUTHSTATE.SIGNIN);
  const [user, setUser] = React.useState({});

  React.useEffect(() => {
    return onAuthUIStateChange(app, (nextAuthState, authData) => {
      setAuthState(nextAuthState);
      setUser(authData);
    });
  }, []);

  return authState === AUTHSTATE.SIGNEDIN && user ? (
    <div className='App'>
      <header className='App-header'>
        Hello, {user.uid}
        <CloudbaseSignOut app={app}></CloudbaseSignOut> {/* 注册按钮*/}
        <CloudbaseSetUsername
          app={app}
          handleSubmit={() => {
            console.log('更新完成用户名');
            // TODO: 自定义业务逻辑
          }}
        ></CloudbaseSetUsername> {/* 更新用户名组件框*/}
      </header>
    </div>
  ) : (
    <div className='App'>
      <header className='App-header'>
        <CloudbaseAuthenticator userLoginType={LOGINTYPE.PHONE} app={app} />
      </header>
    </div>
  );
}

export default App;

属性

登录类型 LOGINTYPE

登录界面态 AUTHSTATE

自定义 CSS

暂不支持

子组件

CloudbaseSignIn

登录框组件

用法

<CloudbaseAuthenticator
  userLoginType={LOGINTYPE.PHONE}
  app={app}
  signIn={
    <CloudbaseSignIn
      app={app}
      userLoginType={LOGINTYPE.PHONE}
      submitButtonText={'登录按钮文案'}
    />
  }
/>

属性

OAuthConfig

FormFieldType

InputType

自定义 formFields

<CloudbaseAuthenticator
  userLoginType={LOGINTYPE.PHONE}
  app={app}
  signIn={
    <CloudbaseSignIn
      app={app}
      userLoginType={LOGINTYPE.PHONE}
      submitButtonText={'登录按钮文案'}
      formFields={[
        {
          type: 'phone_number',
          required: true,
          placeholder: '请输入手机号',
          inputProps: {
            maxlength: 11
          }
        },
        {
          type: 'password',
          required: true,
          placeholder: '请输入密码',
          inputProps: {
            minlength: 8,
            maxlength: 15,
            autoComplete: 'current-password', // 自动填充设置（HTML 标准属性）
            pattern: '[a-zA-Z0-9]+' // 正则校验，支持大小写字母及数字
          }
        }
      ]}
    />
  }
/>

CloudbaseSignUp

注册框组件

用法

<CloudbaseAuthenticator
  userLoginType={LOGINTYPE.PHONE}
  app={app}
  signUp={
    <CloudbaseSignUp
      app={app}
      submitButtonText={'注册按钮文案'}
      userLoginType={LOGINTYPE.PHONE}
    />
  }
/>

属性

自定义 formFields

<CloudbaseAuthenticator
  userLoginType={LOGINTYPE.PHONE}
  app={app}
  signUp={
    <CloudbaseSignUp
      app={app}
      userLoginType={LOGINTYPE.PHONE}
      submitButtonText={'注册按钮文案'}
      formFields={[
        {
          type: 'phone_number',
          required: true,
          placeholder: '请输入手机号',
          inputProps: {
            maxlength: 11
          }
        },
        {
          type: 'code',
          required: 'true',
          placeholder: '请输入验证码'
        },
        {
          type: 'password',
          required: true,
          placeholder: '请输入密码',
          inputProps: {
            minlength: 8,
            maxlength: 15,
            autoComplete: 'current-password', // 自动填充设置（HTML 标准属性）
            pattern: '[a-zA-Z0-9]+' // 正则校验，支持大小写字母及数字
          }
        }
      ]}
    />
  }
/>

CloudbaseForgotPassword

忘记密码组件

⚠️ CloudbaseForgotPassword 组件暂只支持邮箱登录场景。

用法

<CloudbaseAuthenticator
  userLoginType={LOGINTYPE.EMAIL}
  app={app}
  forgotPassword={
    <CloudbaseForgotPassword
      app={app}
      userLoginType={LOGINTYPE.EMAIL}
      submitButtonText={'忘记密码按钮文案'}
    />
  }
/>

属性

自定义 formFields

<CloudbaseAuthenticator
  userLoginType={LOGINTYPE.EMAIL}
  app={app}
  forgotPassword={
    <CloudbaseForgotPassword
      app={app}
      userLoginType={LOGINTYPE.EMAIL}
      submitButtonText={'忘记密码按钮文案'}
      formFields={[
        {
          type: 'email',
          required: true,
          placeholder: '请输入邮箱',
          inputProps: {
            maxlength: 11
          }
        }
      ]}
    />
  }
/>

CloudbaseResetPassword

重置密码组件

用法

<CloudbaseAuthenticator
  userLoginType={LOGINTYPE.PHONE}
  app={app}
  resetPassword={
    <CloudbaseResetPassword
      app={app}
      userLoginType={LOGINTYPE.PHONE}
      submitButtonText={'重置密码按钮文案'}
    />
  }
/>

属性

自定义 formFields

<CloudbaseAuthenticator
  userLoginType={LOGINTYPE.PHONE}
  app={app}
  resetPassword={
    <CloudbaseResetPassword
      app={app}
      userLoginType={LOGINTYPE.PHONE}
      submitButtonText={'重置按钮文案'}
      formFields={[
        {
          type: 'phone_number',
          required: true,
          placeholder: '请输入手机号',
          inputProps: {
            maxlength: 11
          }
        },
        {
          type: 'code',
          required: 'true',
          placeholder: '请输入验证码'
        },
        {
          type: 'oldPassword',
          required: true,
          placeholder: '请输入旧密码',
          inputProps: {
            minlength: 8,
            maxlength: 15,
            autoComplete: 'current-password', // 自动填充设置（HTML 标准属性）
            pattern: '[a-zA-Z0-9]+' // 正则校验，支持大小写字母及数字
          }
        },
        {
          type: 'newPassword',
          required: true,
          placeholder: '请输入新密码',
          inputProps: {
            minlength: 8,
            maxlength: 15,
            autoComplete: 'new-password', // 自动填充设置（HTML 标准属性）
            pattern: '[a-zA-Z0-9]+' // 正则校验，支持大小写字母及数字
          }
        }
      ]}
    />
  }
/>

CloudbaseSignOut

登出组件

用法

参考推荐用法，需在状态判断为已登录后使用。

属性

CloudbaseSetUsername

更新用户名组件

用法

参考推荐用法，需在状态判断为已登录后使用。

属性

自定义 formFields

<CloudbaseSetUsername
  app={app}
  userLoginType={LOGINTYPE.PHONE}
  submitButtonText={'更新用户名文案'}
  formFields={[
    {
      type: 'username',
      required: true,
      placeholder: '请输入用户名',
      inputProps: {
        maxlength: 11
      }
    }
  ]}
/>

工具方法

onAuthUIStateChange(app, handleStateChange)

状态监听器

输入参数