本文由图雀社区成员 pftom[1] 写作而成，欢迎加入图雀社区[2]，一起创作精彩的免费技术教程，予力编程行业发展。点击阅读原文查看本篇文章使用的 Authing 身份云技术网站。
欢迎继续阅读《Taro 小程序开发大型实战》系列，前情回顾：
熟悉的 React，熟悉的 Hooks[1]：我们用 React 和 Hooks 实现了一个非常简单的添加帖子的原型
多页面跳转和 Taro UI 组件库[2]：我们用 Taro 自带的路由功能实现了多页面跳转，并用 Taro UI 组件库升级了应用界面
实现微信和支付宝多端登录[3]：实现了微信、支付宝以及普通登录和退出登录
使用 Hooks 版的 Redux 实现大型应用状态管理（上篇）[4]：使用 Hooks 版的 Redux 实现了
user逻辑的状态管理重构使用 Hooks 版的 Redux 实现大型应用状态管理（下篇）[5]：使用 Hooks 版的 Redux 实现了
post逻辑的状态管理重构Taro 小程序开发大型实战（六）：尝鲜微信小程序云（上篇）[6]：
user逻辑接入微信小程序云Taro 小程序开发大型实战（七）：尝鲜微信小程序云（下篇）[7]：
post逻辑接入微信小程序云Taro 小程序开发大型实战（八）：尝鲜 LeanCloud Serverless 云服务[8]：
Taro 小程序开发大型实战（九）：打造企业级的用户系统（也就是这篇）
之前我们的小程序具有了一个简单博客必备的一些功能：
权限管理：发帖之前需要登录
登录：普通登录和微信登录等
发帖：帖子会自动带上用户信息
获取所有帖子和单个帖子
乍一看这个博客有点小完整了，但是一路跟下来的同学应该知道，我们之前的登录都是通过传入用户的 nickName 和 photo 来登录的，但是我们一般在生活中看到的一些比较正规的网站或者小程序，它们的登录一般都有类似手机+验证码登录，并且在一个标准的博客里面，可能还会涉及到诸如用户权限管理，用户登录状态查询等，刚刚我提到的种种关于用户的场景一般会被抽象为一个应用里的一个核心模块 -- 用户系统，即所有和用户注册/登录、信息更新、权限管理、鉴权等相关的内容。
为了让我们的博客看起来更加专业，我们打算给它也加上整上一个专业的用户系统，有了最为核心的用户系统在，我们博客之后的扩展都可以游刃有余，但是据统计，一个应用要想打造一个比较专业的用户系统，至少需要花费几个月时间，还需要花大量的精力去维护打造出来的用户系统，所在在做了一番调研之后，我们将目标放在了一个叫做 Authing 的通用云身份平台，它提供的服务就是帮应用快速集成一个高效、安全的用户系统，而我们这篇教程将会讲解如何借助 Authing 来给我们的之前的小程序博客武装一个专业的用户系统。
首先我们先来看一看完成的效果：
准备新版登录逻辑
如果你希望直接从这篇开始，那么可以 Clone 我们为你准备的代码，然后跟着教程补充剩下的部分：
git clone -b authing-start https://github.com/tuture-dev/ultra-club.git
# 或者下载 Gitee 上的仓库
git clone -b authing-start https://gitee.com/tuture/ultra-club.git
改进普通登录
首先我们来将之前普通登录的专业性提升一个档次，之前我们是让用户输入昵称和上传头像然后进行登录，现在我们打算切换到手机号+验证码的形式，立马现代化。
打开 src/components/LoginForm/index.jsx 文件，对其中的内容作出对应的修改如下：
import Taro, { useState, useRef, useEffect } from '@tarojs/taro'
import { View, Form } from '@tarojs/components'
import { AtButton, AtImagePicker } from 'taro-ui'
import { useDispatch } from '@tarojs/redux'
import { SET_IS_OPENED, SET_LOGIN_INFO } from '../../constants'
import CountDownButton from '../CountDownButton'
import './index.scss'
export default function LoginForm(props) {
// Login Form 登录数据
const [phone, setPhone] = useState('')
const [phoneCode, setPhoneCode] = useState('')
const countDownButtonRef = useRef(null)
const dispatch = useDispatch()
async function countDownButtonPressed() {
if (!phone) {
Taro.atMessage({
type: 'error',
message: '您还没有填写手机!',
})
return
}
countDownButtonRef.current.startCountDown()
// 处理发送验证码事件
}
async function handleSubmit(e) {
e.preventDefault()
// 鉴权数据
if (!phone || !phoneCode) {
Taro.atMessage({
type: 'error',
message: '您还有内容没有填写！',
})
return
}
// 处理登录和注册
}
return (
<View className="post-form">
<Form onSubmit={handleSubmit}>
<View className="login-box">
<Input
className="input-phone input-item"
type="text"
placeholder="输入手机号"
value={phone}
onInput={e => setPhone(e.target.value)}
/>
<View className="verify-code-box">
<Input
className="input-nickName input-item"
type="text"
placeholder="四位验证码"
value={phoneCode}
onInput={e => setPhoneCode(e.target.value)}
/>
<CountDownButton
onClick={countDownButtonPressed}
ref={countDownButtonRef}
/>
</View>
<AtButton formType="submit" type="primary">
登录
</AtButton>
<View className="at-article__info">
通过手机和验证码来登录，如果没有账号，我们将自动创建
</View>
</View>
</Form>
</View>
)
}
可以看到，上面的代码主要有如下几处更改：
删除了处理
avatar和nickName的useState逻辑删除了之前用于处理上传头像的
onImageClick和onChange函数，以及AtImagePicker组件改进和增加了两个输入框，一个用于输入手机号，一个用于输入验证码，同是增加了
phone和phoneCode的useState逻辑改进
handleSubmit，删除了原处理nickName和files的逻辑，以及删除了之前发起登录的dispatch逻辑接着我们增加了一个用于倒计时的
CountDownButton组件，以及获取ref的countDownButtonRef和处理按钮点击事件的countDownButtonPressed函数，在函数里面我们会做数据验证，如果用户填写了手机号，才允许执行倒计时逻辑，在接下来我们将在这个函数里面处理手机验证码发送逻辑。最后我们添加了提示用户使用手机和验证码登录的文案。
提示这里的 CountDownButton 是 Taro 官方物料市场提供的物料，可以访问 这个地址，下载物料，然后将 CountDownButton 的文件夹放到
src/compontents文件夹下面。我们还需要对这个组件的样式做一点修改，以适应我们现在的 UI 风格，我们将马上来讲解如何修改，读者先可以下载这个物料，然后放置到刚刚提到的项目目录下。
样式改进
上面我们改进了组件，为了让我们的新版登录样子看起来更加专业、统一，我们加点样式，打开 src/components/LoginForm/index.scss 文件，对其中的内容作出对应的修改如下：
.post-form {
margin: 0 30px;
padding: 30px;
}
.input-item {
border: 1px solid #eee;
padding: 10px;
font-size: medium;
margin-top: 40px;
margin-bottom: 40px;
}
.input-phone {
width: 100%;
}
.input-nickName {
width: calc(100% - 200px);
}
.verify-code-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.avatar-selector {
width: 200px;
margin: 0 auto;
}
使用 Taro 物料
我们上面用到的 CountDownButton 组件，就是 Taro 物料市场的一个物料, 简单的说物料就是一个能某方面功能完善的包或组件,帮助开发者快速完成某个逻辑而不需要重复造轮子,正如 Taro 物料市场官方的标语：
让每一个让每一个轮子产生价值
我们通过之前的步骤，应该已经下载好了物料，并放在了 src/components 文件夹下面了，可以看到组件中主要就是两个文件，一个逻辑文件 src/components/CountDownButton/index.js ，还有一个样式文件 src/components/CountDownButton/index.css是，这里我们要做个小修改就是逻辑文件里面引用的是 index.scss 文件，我们需要一下这个样式文件的后缀为 index.scss 。
接着为了和我们的现有的 UI 统一，我们还改了 src/components/CountDownButton/index.scss文件的 activeButtonStyle 和 buttonCommonStyle 样式，最后的文件内容如下：
/* 按钮默认展现样式 */
.buttonCommonStyle {
margin: 0;
width: 160px;
height: calc(1.4rem + 20px);
padding: 0;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
border-radius: 4px;
border: none;
outline: none;
}
/* 禁用时候的TouchableOpacity样式 */
.disableButtonStyle {
background-color: #f6f6f6 !important;
}
/* 可以点击时候的TouchableOpacity样式 */
.activeButtonStyle {
background-color: #02b875;
}
/* 文本默认样式 */
.txtCommonStyle {
font-size: 20px;
}
/* 禁用时Text样式 */
.disableTxtStyle {
color: #999;
}
/* 可以点击时候的Text样式 */
.activeTxtStyle {
color: #fff;
}
大功告成！????，我们成功的完成了新版普通登录的界面，当你保存代码，并在根目录下通过 npm run dev:weapp 开启微信小程序，并使用开发者工具打开我们的项目时，它的效果应该类型下面这样：
怎么样，是不是和你之前体验的各种专业 App 或者网站、小程序的登录注册界面和逻辑类似了呢？????，有了这样一个专业的登录界面之后，我们接下来将要把它整个从前端到后端的逻辑跑通&#
最低0.47元/天 解锁文章
1585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
