uniapp 微信,支付宝登录

1.获取手机号2.获取个人信息（头像,昵称）

<template>
	<!-- #ifdef MP-WEIXIN -->
	<uni-popup ref="popup" type="center">
		<view class="center" v-if="type == 1">
			<view class="text">
				<span></span>
				<text style="color: #333333;">授权微信登录</text>
			</view>
			<image src="https://km-hz-test.oss-cn-hangzhou.aliyuncs.com/uni_mini/images/icon/wechart.png" mode=""></image>
			<button class='phone-bottom' type='primary' open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信用户一键登录</button>
		</view>
		<view v-if="type == 2" class="center">
			<view class="text">
				<span></span> 
				<text style="color: #333333;">授权微信头像,昵称</text>
			</view>
			<image src="https://km-hz-test.oss-cn-hangzhou.aliyuncs.com/uni_mini/images/icon/wechart.png" mode=""></image>
			<button class='phone-bottom' type='primary' @tap="getUserInfo()">授权微信头像,昵称</button>
		</view>
	</uni-popup>
	<!-- #endif -->
	
	
	<!-- #ifdef MP-ALIPAY -->
	<uni-popup ref="popup" type="center">
		<view class="center" v-if="type == 1">
			<view class="text">
				<span style="background-color: #1568dd;"></span> 
				<text style="color: #333333;">授权支付宝登录</text>
			</view>
			<image src="https://km-hz-test.oss-cn-hangzhou.aliyuncs.com/uni_mini/images/icon/alipay.png" mode="widthFix"></image>
			<button class='alipay-buttom' open-type="getAuthorize" @getAuthorize="getAlPhoneNumber" @error="onAuthError" scope="phoneNumber">支付宝用户一键登录</button>
		</view>
		<view v-if="type == 2" class="center">
			<view class="text">
				<span style="background-color: #1568dd;"> 1</span> 
				<text style="color: #333333;">授权支付宝头像,昵称</text>
			</view>
			<image src="https://km-hz-test.oss-cn-hangzhou.aliyuncs.com/uni_mini/images/icon/alipay.png" mode="widthFix"></image>
			<button
			    size="default"
			    open-type="getAuthorize"
			    scope="userInfo"
			    @getAuthorize="onGetAuthorize"
			    @error="onAuthError"
				class='alipay-buttom'
			  >
				授权支付宝头像,昵称
			  </button>
		</view>
	</uni-popup>
	<!-- #endif -->
	
</template>

引入弹框组件，VUEX。vuex 的作用是储存uni.login获取的code 用来做全局的判断，省略反复调用

import { mapState, mapMutations } from 'vuex';
import { uniPopup } from '../../uni_modules/uni-popup/uni-popup.vue';

components: {
			uniPopup
},
data () {
	return {
		type: 1,   // 判断是授权手机号还是用户信息
		userId: '',
	}
},
computed: {
	...mapState(['codeResult'])
},
methods: {
	...mapMutations(['setCodeResult']),
}

登录弹框开启，关闭

open () {
	this.$refs.popup.open()
},
close() {
	this.$refs.popup.close();
},

微信，支付宝登录获取code 存入全局

getCode () {
	// #ifdef MP-ALIPAY
	uni.login({
		provider: 'alipay',
		success: ( res ) => {
			let { code } = res;
			this.getUnionldAlipay(code);
		},
	});
	// #endif
	
	// #ifdef MP-WEIXIN
	uni.login({
		provider: 'weixin',
		success: ( res ) => {
			let { code } = res;
			this.getUnionldWx(code);
		},
	});
	// #endif
},
getUnionldWx (code) {
	this.$request('/code2session', {code,clientSource:4301}).then((res)=>{
		res.resultData.code = code;
		this.setCodeResult(res.resultData);
	})
},
getUnionldAlipay (code) {
	this.$request('/oauthToken', {code,clientSource:4293}).then((res)=>{
		res.resultData.code = code;
		this.setCodeResult(res.resultData);
	})
},

微信，支付宝获取个人手机号或个人信息，得到需要的token 和其他一些信息存入localStorage。this.$emit(‘callback’) 执行登录成功回调

// 支付宝登录
onGetAuthorize() {
	let _this = this;
	my.getOpenUserInfo({
		fail: res => {
		console.log(res);
		},
		success: res => {
			const userInfo = JSON.parse(res.response).response; // 以下方的报文格式解析两层 response
			console.log('支付宝获取用户信息', userInfo)
			let faceLink = userInfo.avatar;
			let name = userInfo.nickName;
			let userId = _this.userId;
			_this.$request('addUserInfo', {faceLink, name, userId}).then((res)=>{
				_this.$refs.popup.close()
				this.type = 1;
				this.$emit('callback')
			})
		
		},
  });
},
getAlPhoneNumber() {
	my.getPhoneNumber({ 
		scopes: "auth_user",
		success: result => {
			var resData = JSON.parse(result.response);
			console.log('result',resData)
			this.$request('/phoneLogin',{content: resData.response,clientSource:4293,alipayUserId: this.codeResult.userId }).then((res)=>{
				uni.setStorageSync('km_openId',this.codeResult.userId)
				uni.setStorageSync('km_phone',res.resultData.phone)
				uni.setStorageSync('km_userId', res.resultData.userId)
				uni.setStorageSync('Authorization',res.resultData.auth.accessToken);
				
				this.$emit('callback')
				// res.resultData.needAddInfo
				
				if (res.resultData.needAddInfo) {
					this.userId=res.resultData.userId;
					this.type = 2;
				} else {
					this.$refs.popup.close();
				}
			})
		},
		fail: res => {
			uni.showToast({
				title: "需要您授权手机号码",
				icon: 'none',
				duration: 2000
			})
		}
	});
},






// 微信登录
getUserInfo () {
	let _this = this;
	uni.getUserProfile({
	    desc:'Wexin',     // 这个参数是必须的
		success:res=>{
			console.log(res)
			let faceLink = res.userInfo.avatarUrl;
			let name = res.userInfo.nickName;
			let userId = _this.userId;
			_this.$request('/addUserInfo', {faceLink, name, userId}).then((res)=>{
				_this.$refs.popup.close()
				this.type = 1;
				this.$emit('callback')
			})
		},
	    fail:err=>{
		    console.log(err)
	    }
    })
},

getPhoneNumber(val){
	let _this = this;
	console.log('授权手机号获取到的数据', val)
	let {code, openId, sessionKey, unionId } = this.codeResult;
	let { encryptedData, iv } = val.detail;
	
	this.$request('/wx-agent/userInfo2/wx/phoneLogin',{code, openId, sessionKey, unionId,encryptedData, iv,clientSource:4301 }).then((res)=>{
		uni.setStorageSync('km_openId',openId)
		uni.setStorageSync('km_phone',res.resultData.phone)
		uni.setStorageSync('km_userId', res.resultData.userId)
		uni.setStorageSync('Authorization',res.resultData.auth.accessToken);
		this.$emit('callback')
		// res.resultData.needAddInfo
		if (res.resultData.needAddInfo) {
			this.userId=res.resultData.userId;
			this.type = 2;
		} else {
			this.$refs.popup.close();
		}
	})
},

组件使用方法

import loginModule from '@/components/loginModule/index.vue'

components:{
	loginModule,
},

<loginModule ref="loginModule" @callback="callback"></loginModule>

methods: {
	open(){
		this.$refs.loginModule.open();
	}
}