react移动端登录（第三方登录）和个人执行实现

react和antdMobile实现的移动端登录（第三方登录）和个人执行实现

部分代码展示：

效果展示

注意:发送的Ajax请求均为mock模拟生成，如需使用请在src/api/Ajax.js下统一修改请求链接。

部分代码展示：

import React, { Component } from 'react'
import { NavBar,Form, Input,Button,Toast} from 'antd-mobile'
import {reqVerifyCode,reqLogin} from '../../api/index'
import styles from './demo2.less'
import './index.less'
import github from './imgs/github-logo.png'
import wx from './imgs/wx.png'
import qq from './imgs/qq.png'
import {phoneReg,verifyCodeReg} from '../../utils/reg'export default class Login extends Component {state={phone:'',verifyCode:'',time:10,canClick:true}// 保存数据savaDate=(type)=>{return (value)=>{// 如果用户输入的数据符合要求，那么维护进状态if(type==='phone'&&phoneReg.test(value)) return this.setState({[type]:value})if(type==='verifyCode'&&verifyCodeReg.test(value)) return this.setState({[type]:value})else this.setState({[type]:''})}}// 获取验证码的回调getVerifyCode=async()=>{// 获取手机号const {phone,canClick}=this.stateif(!canClick) return // 更新状态让获取验证码按钮不可点击if(!phone) return Toast.show({icon: 'fail',content: '手机号输入不合法',})// 开启定时器更新倒计时this.setState({canClick:false})this.timer=setInterval(()=>{let {time}=this.statetime--// 若倒计时结束重置验证码按钮关闭定时器if(time<=0){clearInterval(this.timer)this.setState({canClick:true,time:10})return}this.setState({time})},1000)// 发送请求await reqVerifyCode(phone)Toast.show({icon: 'success',content: '验证码发送成功',})}// github授权登录githubLogin=()=>{window.location.href='https://github.com/login/oauth/authorize?client_id=e9238d1f8812d541f6cc'}// 登录的回调login=async ()=>{const {phone,verifyCode}=this.stateif(!(phone&&verifyCode)){return Toast.show({icon:"fail",content:'请检查手机号或验证码格式'})}const result=await reqLogin(phone,verifyCode)const {code,message}=resultif(code===20000){Toast.show({icon:"success",content:"登录成功"})this.props.history.push('/usercenter')}else{Toast.show({icon:"fail",content:'登录失败'+message})}}componentWillUnmount(){clearInterval(this.timer)}render() {const backArrow=falseconst {time,canClick,phone,verifyCode}=this.statereturn (<div className='login'>{/* 顶部导航去 */}<NavBar backArrow={backArrow}>手机验证码登录</NavBar>{/* 手机号输入框 */}<Form layout='horizontal'><Form.Item label='用户电话号码' name='username'><Input onChange={this.savaDate('phone')} placeholder='请输入用户名' clearable /></Form.Item>{/* 验证码输入框 */}<Form.Itemlabel='短信验证码'extra={<div className={styles.extraPart}><Button disabled={canClick} size='mini' onTouchStart={this.getVerifyCode}>发送验证码{canClick?'':`(${time})`}</Button></div>}><Input onChange={this.savaDate('verifyCode')} placeholder='请输入验证码' clearable /></Form.Item></Form>{/* 登录按钮 */}<Button  onTouchEnd={this.login} disabled={(phone&&verifyCode)?false:true}className='summitButton' block color='primary' size='large'>登录</Button>{/* 底部其他登录方式区 */}<footer className='footer'><span className='other'>其他登录方式</span><div className='login-type'><img src={github} onTouchEnd={this.githubLogin} alt="" /><img src={wx} alt="" /><img src={qq} alt="" /></div><span className='footer-text'>未注册的手机号，验证后会自动创建硅谷账号，登录即代表您同意：<a href='www.baidu.com'>《隐私政策》</a></span></footer></div>)}
}

usercenter.jsx

import React, { Component } from 'react'
import { NavBar,Toast,Button} from 'antd-mobile'
import {reqVerifyToken,reqLogout} from '../../api/index'
import './index.less'
export default class UserCenter extends Component {state={nickName:'',phone:'',avatar:"",_id:""}logout=async ()=>{await reqLogout(this.state._id)this.props.history.replace('/login')}async componentDidMount(){const result=await reqVerifyToken()const {code,message,data,_id}=resultif(code!==20000){Toast.show({icon:"fail",content:message})this.props.history.replace('/login')}else{const {nickName,phone,avatar}=datathis.setState({nickName,phone,avatar,_id})} }render() {const {nickName,phone,avatar}=this.stateconst backArrow=falsereturn (<div className='user-info'><NavBar backArrow={backArrow}>个人中心</NavBar><img className='avatar' src={avatar} alt="" /><div>昵称：{nickName}</div><div>电话号码：{phone}</div><Button color='primary' size='large' blockonTouchEnd={this.logout}>退出登录</Button></div>)}
}

完整项目github地址：https://github.com/Emiria486/reactMobile-login-and-userCenter-pages

react移动端登录（第三方登录）和个人执行实现相关推荐

React Native 集成分享第三方登录功能分享第三方登录模块开发(iOS)
期待已久的新课上线啦!解锁React Native开发新姿势,一网打尽React Native最新与最热技术,点我Get!!! 在我们常用的App中经常会看到分享与第三方登录的功能,可以说分享与第三方 ...
CAS单点登录-第三方登录[QQ、微信、CSDN、GitHub]（十四）
CAS单点登录-第三方登录[QQ.微信.CSDN.GitHub](十四) 注: 目前博文使用cas版本为5.1.5,由于5.2.x与5.1.x构建模式有差异,所以部分配置会有些偏差. 本章内容简答介 ...
php用户第三方登录失败,php 实现网站端qq第三方登录接口及一些注意事项【原创】...
最近工作中使用到了网站端QQ 微信以及新浪微博的第三方登录,以及获取用户的基本信息,在各自开放平台的官方文档上都有详细的介绍然而QQ登录的部分接口返回值却与其他的不同所以这里我就完整的介绍一下网 ...
SpringSecurity+Oauth+短信登录+第三方登录认证+Session管理
目录: 零.前言一.SpringSecurity 简介二.标准登录三.用户认证代码实现零.前言在开始本文之前,底层这块已经有了很大的调整,主要是SpringBoot由之前的 1.5.9.RE ...
【QQ登录------第三方登录的实现流程】
QQ互联:https://wiki.connect.qq.com/%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C_oauth2-0 大致逻辑: 有一个网站,且已备案.网站需要 ...
微信登录/第三方登录
微信登录 1.二维码 2.授权成功 3.题外 4.本篇用到的发送get请求的工具类微信登录官网: https://developers.weixin.qq.com/doc/oplatform/Web ...
业务复习-微信登录/第三方登录实现
技术点:HttpClient(模拟浏览器的请求),Json转换工具第一步:密钥ID的配置 wx.open.app_id=wxed9954c01bb89b47wx.open.app_secret=a7 ...
关于Facebook Web端第三方登录
1.集成并测试facebook 1.注册开发者账号 2.创建应用 2.代码块 3.测试结果 1.注册开发者账号登陆facebook开发者平台 (https://developers.facebook ...
微信第三方登录 -- (PC端+移动端)
微信第三方登录 -- (PC端+移动端) 一.前言一. 什么是第三方登录所谓的第三方登录,是说基于用户在第三方平台上已有的账号和密码来快速完成己方应用的登录或者注册的功能.而这里的第三方平台,一般 ...
选择华为账号第三方登录，让你无法拒绝的3个理由
什么是第三方登录第三方登录是基于OAUTH协议向应用提供除用户名和密码等信息以外的用户ID授权:应用接入第三方平台的Open API,让用户快速完成登录:用户无需注册新的帐号即可在应用拥有唯一ID并 ...

react移动端登录（第三方登录）和个人执行实现

react和antdMobile实现的移动端登录（第三方登录）和个人执行实现

部分代码展示：

react移动端登录（第三方登录）和个人执行实现相关推荐

最新文章

热门文章