微信小程序 实现登录流程

一、背景

开发微信小程序时，用户登录是很重要的一个环节，记录下微信小程序登录流程

二、登录流程

2.1、微信官方文档登录流程图

官网地址👉👉：小程序登录 | 微信开放文档

说明

1、调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。

2、调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、 用户在微信开放平台账号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台账号） 和 会话密钥 session_key。

之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

2.2、认识code，OpenID，UnionID

①code

临时登录凭证 code：用户使用微信登录小程序时，小程序后台会生成一个临时登录凭证 code。

注意：每个code只能使用一次，具有一定的有效期，一般为5分钟左右。需要将该凭证发送到微信服务器进行验证和换取用户唯一标识。

②OpenID

用户唯一标识 OpenID：用户唯一标识 OpenID 是在用户授权登录后，通过临时登录凭证 code 换取的。

注意：每个微信用户在同一个小程序中的 OpenID 是唯一的，不同的小程序之间的 OpenID 是不同的。可以根据用户的 OpenID 进行用户数据的存储和管理。

③UnionID

唯一标识 UnionID：UnionID 是一个在同一个开放平台账号下的多个关联公众号、小程序和移动应用中，对一个用户的唯一标识。

注意：如果一个用户在多个公众号、小程序和移动应用中都授权登录过，并且在开放平台账号中将这些应用绑定到同一个开放平台账号下，那么这些应用就可以通过 UnionID 来进行用户数据的互通与关联。

三、具体实现

3.1、获取code

在登录页面点击按钮，利用wx.login()获得code

<template>
	<view class="login">
		<view @click="wexin_login">
			<button>手机号快捷登录</button>
		</view>
	</view>
</template>

<script>
export default{
	methods: {
		wexin_login(){
			wx.login({
				success: (res) =>{
					console.log(res.code,'code')
				}
			})
		}
	},
}
</script>

<style scoped lang="scss">
 .login{
	padding: 40rpx;
	button{
		color: #FFFFFF;
		background: #17c7a1;
		border-radius: 50rpx;
	}
 }
</style>

3.2、将code传递给服务器

<template>
	<view class="login">
		<view @click="wexin_login">
			<button>手机号快捷登录</button>
		</view>
	</view>
</template>

<script>
  import {
  	getBindSocial,wxLogin_api
  } from "@/action/action";
  import {
    MINITYPE
	} from '@/constants/hostConfig';
export default{
	data() {
		return {
			phone: '', 
		}
	},
	methods: {
		wexin_login(){
			wx.login({
				success: (res) =>{
					console.log(res.code,'code')
					let userCode = res.code
					//将code传递给服务器
					getBindSocial({
						jscode: userCode,
						type: MINITYPE,
					}).then(res =>{
						console.log('res',res);
					})
				}
			})
		}
	},
}
</script>

备注：

getBindSocial()是封装的api接口，将code传递给接口之后，会得到openid，unionid，phone等。如下图👇

3.3、将获得的unionid传递给接口获得token

<template>
	<view class="login">
		<view @click="wexin_login">
			<button>手机号快捷登录</button>
		</view>
	</view>
</template>

<script>
  import {
  	getBindSocial,wxLogin_api
  } from "@/action/action";
  import {
    MINITYPE
	} from '@/constants/hostConfig';
export default{
	data() {
		return {
			phone: '', 
		}
	},
	methods: {
		wexin_login(){
			wx.login({
				success: (res) =>{
					console.log(res.code,'code')
					let userCode = res.code
					//将code传递给服务器
					getBindSocial({
						jscode: userCode,
						type: MINITYPE,
					}).then(res =>{
						console.log('res',res);
						if (res.code == 0){
							// 是否绑定了已经
							if (res.data.binding == 1){
							this.phone = res.data.phone;
							this.login(res.data.unionid, res.data.openid)
							}
						}
					})
				}
			})
		},
		login(unionid, openid){
			let _this = this;
			wxLogin_api({
				openId: unionid,
      			projectId: ''
			}).then(respon=>{
				console.log(respon,'登录');
			})
		}
	},
}
</script>

备注：

wxLogin_api()是封装的api接口，传递unionid之后后端会返回一个token，这个token将作为身份的唯一标识。如下图👇

3.4、存储token，跳转到首页

		login(unionid, openid){
			wxLogin_api({
				openId: unionid,
      			projectId: ''
			}).then(respon =>{
                //如果返回的token不是undefined
				if(respon.access_token != 'undefined'){
                    //整理接口返回的数据
					let loginInfo = {
      				access_token: respon.access_token,
      				expires_in: respon.expires_in,
      				phone: this.phone,
      				projectIndex: 0,
      				houseIndex: 0,
      				houseData: [],
      				openid: openid,
      				unionid: unionid,
      				refresh_token: respon.refresh_token,
      				userId: respon.user_id
      			};
				  //持久化存储
				  wx.setStorageSync('loginInfo', loginInfo);
				  wx.showToast({
					title: '授权成功',
					icon: 'success',
					duration: 3000,
				  })
				  //跳转到首页
				  setTimeout(() => {
					wx.reLaunch({
					url:'/pages/index/index'
				  })
				  }, 2000);
				}
			})
		}

3.5、登录流程总结

1、获得code：通过wx.login()获取code

2、获得token：将code传递给后端接口获得openid和unionid，再将unionid传递给后端接口获得token

3、本地存储token：将token通过wx.setStorageSync()保存在本地存储

4、用户进入页面判断token值：用户下次进入页面时，会先通过wx.getStorageSync() 方法判断token是否有值；如果有值，则可以请求其它数据，如果没有值，则进行登录操作。

最后，👏👏 😀😀😀 👍👍