微信小程序登录、获取用户信息的流程及实现

古儿

微信小程序登录、获取用户信息的流程及实现本篇文章将通过以下三步，让你了解到小程序登录、和用户信息获取的微信生态变迁，和流程上前后端技术实现。小程序登录流程小程序获取手机号小程序获取头像昵称小程序登录小程序登录是通过微信官方提供的登录能力,获取微信提供的用户身份标识。通俗一点，也就是获取openId,unionId。1.登录流程整体小程序登录可以分为两个阶段第一阶段：是小程序&开发服务器&微信服务器三端交互，获取微信的相关登录凭证。第二阶段：小程序&开发服务器交互，获取自定义的登录态，如cookie,或者JWT等。2.小程序登录流程小程序登录流程图图中的数据说明：code:当前用户的临时登录凭证code。session_key:会话密钥，是对用户数据加密签名的密钥。用于服务端解析微信加密回传的用户数据。用于解析前端通过小程序api获取的encryptedData。从流程图中我们可以看出，因为前端只调用了wx.login这个api，且这个api的调用不要用户授权，所以其实在不依赖于其他账号体系的情况下，当前这种流程就可以获取用户微信的登录状态。而用户也是无感知的（没有授权弹窗弹起）。3.代码实现下面，我们从代码层面实现一下获取openid的流程（代码技术栈采用，前端wepy，后端nestjs，只简单实现核心流程。）//前端代码openid：wxLogin...handleWxLogin(){wx.login({success(res){if(res.code){//发送code临时登录凭证到后端wx.request({url:'http://localhost:3000/wxLogin',data:{code:res.code}});}else{console.log('登录失败！'+res.errMsg);}}});}//后端代码asyncwxLogin(code){//这里我们请求了微信服务器登录凭证校验接口，constres=awaitaxios.get('https://api.weixin.qq.com/sns/jscode2session',{params:{appid:this.appid,secret:this.secret,js_code:code,grant_type:'authorization_code',},});returnres.data.openid;}//jscode2session接口返回示例如下{"openid":"xxxxxx","session_key":"xxxxx","unionid":"xxxxx","errcode":0,"errmsg":"xxxxx"}4.效果展示我们从下面的gif中看一下效果，后端正常返回了openid。5.市面上常见的两种登录形态：我们在使用小程序的时候，经常会遇到一下两种登录情况：两种登录形式在上面说登录的时候，有说到用户不用授权也可以做到登录。但其实实际的业务场景中，只有openid和unionid是不能完全满足小程序使用的。左边的小程序，它需要获取手机号，来关联用户在58平台上的账号体系，所以这种情况下，会用到手机号登录。右边的小程序，它虽然不用关联平台数据，但是在使用场景中，还是需要用户头像和昵称来给用户一个清晰的认知，告诉用户已经登录成功，如果直接放一个openid串，或者使用随机昵称，体验上会很不友好。那么接下来我们就来看一下，在小程序中怎么获取手机号和微信头像昵称的。小程序获取手机号获取手机号有两种方式：第一种1.流程描述前端通过wx.login获取用户的session_key,并通过button组件，open-type=getPhoneNumber获取加密数据传给后端，后端通过解密，获取用户数据。我们传给后端的加密数据，就是下图标注的部分：获取手机号2.代码实现我们从代码层面看一下具体的实现：//前端代码电话号码：解析加密数据...getPhoneNumber(e){wx.request({url:'http://localhost:3000/getUserProfile',data:{encryptedData:e.$wx.detail.encryptedData,iv:e.$wx.detail.iv}});}//后端代码asyncgetUserProfile(encryptedData,iv){//根据小程序appid、当前登录用户的sessionKey、前端获取的加密数据encryptedData、和向量iv解密获得手机号constpc=newWXBizDataCrypt(this.appid,this.sessionKey);constdata=pc.decryptData(encryptedData,iv);returndata;}//解密方法functionWXBizDataCrypt(appId,sessionKey){this.appId=appId;this.sessionKey=sessionKey;}WXBizDataCrypt.prototype.decryptData=function(encryptedData,iv){//base64decodeconstsessionKey=Buffer.from(this.sessionKey,'base64');encryptedData=Buffer.from(encryptedData,'base64');iv=Buffer.from(iv,'base64');try{//解密constcrypto=require('crypto');constdecipher=crypto.createDecipheriv('aes-128-cbc',sessionKey,iv);decipher.setAutoPadding(true);vardecoded=decipher.update(encryptedData,'binary','utf8');decoded+=decipher.final('utf8');decoded=JSON.parse(decoded);}catch(err){thrownewError('IllegalBuffer');}returndecoded;};module.exports=WXBizDataCrypt;3.效果展示我们从下面的gif中看一下效果，成功取到了手机号。重要：因为解密时需要用到登录时获取的sessionKey，所以这个方法一定要在wx.login服务端获取了session_key的情况才能使用。第二种1.流程描述前端通过button组件，open-type=getPhoneNumber获取code传给后端，后端通过调用凭据（access_token）和code去微信服务器请求。我们传给后端的code如下图标注：获取手机号22.代码实现我们从代码层面看一下具体的实现：//前端代码电话号码：code换取...getPhoneNumberByCode(e){wx.request({url:'http://localhost:3000/getUserProfileByCode',data:{code:e.$wx.detail.code}});}//后端代码asyncgetUserProfileByCode(code){//首先获取服务端与微信服务器交互的接口调用凭证if(!this.accessToken){constaccessTokenRes=awaitaxios.get(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${this.appid}&secret=${this.secret}`,);this.accessToken=accessTokenRes.data.access_token;}//然后根据前端获取的code去微信服务器做解析constres=(awaitaxios.post(`https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${this.accessToken}`,{code,},))asany;returnres.data.phone_info;}//正常返回数据结构如下{"errcode":0,"errmsg":"ok","phone_info":{"phoneNumber":"xxxxxx","purePhoneNumber":"xxxxxx","countryCode":86,"watermark":{"timestamp":1637744274,"appid":"xxxx"}}}3.效果展示我们从下面的gif中看一下效果，成功取到了手机号。小程序获取头像昵称小程序获取头像昵称的方案，可以分为三个阶段1、通过getUserInfo获取。2、回收getUserInfo，通过getUserProfile获取[1]。从微信公告中我们可以看到，因为getUserInfo会记录之前授权的状态，导致如果用户点击过不允许，那小程序后续就不会再调起微信授权，导致用户使用流程中断。所以提供了getUserProfile方法，每一次都会调起授权。下图为两个方法的流程图：getUserInfo回收之后，接口不需要再需要用户授权，统一返回昵称为微信用户，头像为灰色头像。**3、回收getUserProfile，「头像昵称填写能力」获取[2]**。近期（2022年11月8日）微信对于获取用户信息做了第二次改动，回收了getUserProfile接口，同样返回匿名数据，获取昵称和头像分别提供了新的交互形式。但因为微信头像昵称填写能力还有bug，所以getUserProfile的获取用户信息方法，在小程序sdk2.27.1以下（微信版本8.0.28）仍然生效。下面我们看一下原有的这两个接口的现在获取用户数据情况：我们再看一下，小程序sdk2.27.1一下，getUserProfile的返回数据：最后我们看一下「头像昵称填写能力」获取的方式：以上获取用户数据的方式代码如下：getUserInfo_获取用户信息getUserProfile_获取用户信息获取用户头像以上就是微信登录及获取用户信息的现有流程和实现。作者介绍于鹏：LBG脚腕子前端工程师参考资料[1]回收getUserInfo，通过getUserProfile获取:https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801[2]回收getUserProfile，「头像昵称填写能力」获取:https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01LBG开源项目推广：还在手写HTML和CSS吗？还在写布局吗？快用Picasso（毕加索）吧！一键生成高可用的前端代码，让你有更多的时间去沉淀和成长开源项目地址：https://github.com/wuba/Picasso（欢迎Star）官网地址：https://picassoui.58.com58同城北京总部