uniapp之登录（短信验证码，账号密码，第三方登录）

uni.getProvider(OBJECT)uni.login(OBJECT)uni.getUserInfo(OBJECT)<template><view class="loginWrap "><view class="imgWrap"><imageclass="logo" style="width: 100upx;height: 100upx;" sr

Jocelyn_书

11043人浏览 · 2021-03-08 14:03:24

Jocelyn_书 · 2021-03-08 14:03:24 发布

uni.getProvider(OBJECT)

uni.getUserInfo(OBJECT)

------------2021/12/17更新----------------------------

注意：在小程序 withCredentials 为 true 时或是在 App 调用 uni.getUserInfo，要求此前有调用过 uni.login 且登录态尚未过期。微信基础库2.10.4版本对用户信息相关接口进行了调整，使用 uni.getUserInfo 获取得到的 userInfo 为匿名数据，建议使用 uni.getUserProfile 获取用户信息。

uni.getUserProfile(OBJECT)

<template>
	<view class="loginWrap ">
		<view class="imgWrap">
			<image  class="logo" style="width: 100upx;height: 100upx;" src="../../static/logo.png" mode=""></image>
		</view>
		
		<form v-if="loginWay == '短信验证登录'" class="loginForm" @submit="formSubmit">
			<view class="uni-form-item uni-column">
				<u-input placeholder="请输入登录账号" v-model="value" type="number" clearable />
			</view>
			<view class="uni-form-item uni-column">
				<u-input v-model="value" type="password"  password-icon="true" />
				<text class="forgetText">忘记密码</text>
			</view>
			<button form-type="submit" class="loginbtn" type="default">登录</button>
		</form>
		
		
		<u-form class="loginForm" v-if="loginWay == '账号密码登录'" :model="form" ref="uForm">
			<view class="uni-form-item uni-column">
				<u-input placeholder="请输入手机号码" type="number" v-model="form.name" />
			</view>
			<view class="uni-form-item uni-column">
				<u-input placeholder="请输入验证码" v-model="form.name" />
				<view class="wrap">
					<u-toast ref="uToast"></u-toast>
					<u-verification-code 
					:seconds="seconds" 
					@end="end" 
					@start="start" 
					ref="uCode" 
					@change="codeChange"
					></u-verification-code>
					<u-button type="success" @click="getCode">{{tips}}</u-button>
				</view>
			</view>
			<button class="loginbtn" type="default">登录</button>
		</u-form>
		
		<view class="action center">
			<text @click="changeLoginWay" style="color: #71B6F7;">{{loginWay}}</text>
		</view>
		<view class="wechatLogin center">
			<text>————社交账号登录————</text>
			<button class="wechatLoginBtn" open-type="getUserInfo"  @getuserinfo="wechatLogin" ></button>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				form:{
					name:''
				},
				value:'',
				loginWay:'短信验证登录',
				seconds:60,
				tips:''
			}
		},
		methods:{
			//登录提交
			formSubmit(){
				console.log("页面跳转")
			
			},
			//微信登录
			wechatLogin(){		
				let _that = this;
				uni.getSetting({
				 success(res) {
					console.log("授权：",res);
				   if (!res.authSetting['scope.userInfo']) {
						//这里调用授权
						console.log("当前未授权");
				   } else {
						//用户已经授权过了
						console.log("当前已授权");
						//#ifdef MP-WEIXIN
						uni.getProvider({
						  service: 'oauth',
						  success: function (res) {
							   console.log(res.provider)
							if (~res.provider.indexOf('weixin')) {
								uni.login({
									provider: 'weixin',
									success: (res2) => {
										
										uni.getUserInfo({
											provider: 'weixin',
											success: (info) => {//这里请求接口
												console.log("登录返回信息",res2);
												console.log("获取用户信息",info);
												
												_that.$store.commit('login',info.userInfo);
												uni.redirectTo({
												    url: '../index/index'
												});
											},
											fail: () => {
												uni.showToast({title:"微信登录授权失败",icon:"none"});
											}
										})
								
									},
									fail: () => {
										uni.showToast({title:"微信登录授权失败",icon:"none"});
									}
								})
								
							}else{
								uni.showToast({
									title: '请先安装微信或升级版本',
									icon:"none"
								});
							}
						  }
						});
						//#endif
						
						
						
				   }
				 }
			   })
				 
			},
			//点击切换登录方式
			changeLoginWay(){
				if(this.loginWay == '短信验证登录'){
					this.loginWay = '账号密码登录'
					console.log("222")
				}else if(this.loginWay == '账号密码登录'){
					console.log("111111")
					this.loginWay = '短信验证登录'
				}
				
			},
			//
			codeChange(text) {
				// console.log("codeChange",text)
				this.tips = text;
			},
			//点击获取验证码倒计时
			getCode(){
				console.log("aa")
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				console.log("aa1111111")
				this.$u.toast('倒计时开始');
			}
			
		}
	}
</script>

<style lang="less">
		
	.loginWrap{
		.imgWrap{
			text-align: center;
			padding: 50upx;
		}
		.loginForm{
			padding: 30upx;
			.uni-form-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1upx solid #DCDCDC;
				padding: 10upx 30upx;
				margin: 20upx;
				u-input{
					flex: 1;
				}
				.forgetText{
					color: #C8C7CC;
				}
				
			}
				
			.wrap{
				height: auto;
			}
			.loginbtn{margin: 20upx; margin-top: 60upx;background: #2CA800;color: #fff;}
		}
		.wechatLogin{
			margin-top: 60upx;
			text{
				color: #CCCCCC;
			}
			.wechatLoginBtn{
				background-image: url(../../static/img/wechat.png);
				border: none;
				width: 32px;
				height: 32px;
				&::after{
					border: none;
				}
			}
			image{
				width: 54upx;
				height: 54upx;
				margin-top: 30upx;
			}
		}
	}
</style>

微信登录成功页面

<template>
	<view class="content-wrapp">
		<view v-if="loginStatus" class="content">
			<image class="logo" :src="userInfo.avatarUrl"></image>
			<view class="text-area">
				<text class="title">{{userInfo.nickName}}</text>
			</view>
		</view>
		<view class="content" v-else>
				<button @click="tapLoginBtn" type="default">请先登录</button>
		</view>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		computed:{
			...mapState({
				loginStatus:state=>state.loginStatus,
				userInfo:state=>state.userInfo
			})
		},
		onLoad() {
		
		},
		onShow(){
			console.log("打印登录状态",this.loginStatus)
			console.log("打印登录后的用户信息",this.userInfo)
		},
		methods: {
			tapLoginBtn(){
				uni.navigateTo({
					url:'../login/index'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

202年12月17号更新

新增获取微信手机号功能

实现步骤：

1.通过uni.login获取code

3.un.checkSession()检测session_key是否过期

2.通过特定获取电话号码按钮，getPhoneNumber方法获取加了密手机号（需后端解密返回）

一定要先获取code再获取电话号码，否则可能会出现后端解密失败获取不到电话号码

<template>
    <view class="login-btn">
		<button v-if="type === 'phone'" type="default" class="cusomter-button" hover-class="customer-button-hover" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信用户快捷登录
        </button>
    </view>
</template>
<script>
data(){
    retrun:{
        code:''
    }
},
onLoad(){
    this.getCode();
},
methods:{
    getCode(){
        uni.login({
		//返回的code小程序专有，用户登录凭证。开发者需要在开发者服务器后台，使用 code 换取 openid 和 session_key 等信息
	    provider:'weixin',
		success(res){
			console.log("获取微信的code",res)
			this.code = res.code
		},  
		fail(err){
			resolve(false);
		}
	})
    },
    getPhoneNumber(e){
        //e参数里就有对应的iv和encryptedData值
        uni.checkSession({//因为先请求的code 
				success() {
					//这里就可以做对应的请求处理拉
                    将后端需要的参数code ,iv ,encryptedData等参数传给后端
				},
				fail() {
					resolve(false)
				}
		})
        
    }
    
}
</script>

效果图：