uniapp+后端egg.js 开发微信小程序获取用户手机号

前端

// login.vue

    手机号一键登录


// script

uniapp+后端egg.js 开发微信小程序获取用户手机号_第1张图片

 egg,js后端 wxopenid

async wxOpenid() {
        let { ctx, app } = this;

        let { js_code } = ctx.request.body;

        const { data } = await this.ctx.curl('https://api.weixin.qq.com/sns/jscode2session', {
            method: 'GET',
            rejectUnauthorized: false,
            data: {
                appid: app.config.mpWeixin.appid,//你的小程序的APPID  
			 	secret: app.config.mpWeixin.secret,//你的小程序的secret,  
			 	js_code, //wx.login 登录成功后的code
            },
            dataType: 'json'
        })
        ctx.apiSuccess({
            openid: data.openid,
            session_key: data.session_key,
        });
    }

前端打印结果

然后点击按钮"手机号一键登录"

 前端

//小程序 手机号码一键获取 解密 然后直接登录了
			async getPhoneNumber(e){
				if(e.detail.errMsg == "getPhoneNumber:ok"){
					//走后端api 
					uni.showLoading({title: '登录中~', mask: true})
					const res = await wxCryptPhone({
						session_key: this.session_key,
						iv:e.detail.iv,  
						encryptedData: e.detail.encryptedData 
					});
					// 登录成功
					console.log(res)
					//还没保存用户信息到vuex
					uni.navigateBack({
						delta: 1
					})
				}else{
					//console.log('用户点击了拒绝');  
					this.$u.toast('用户拒绝授权');
				}
			},

 egg.js后端部分wxCryptPhone

引入WXBizDataCrypt.js

const WXBizDataCrypt = require('../../extend/WXBizDataCrypt');

没有的下载,或者复制下面代码新建WXBizDataCrypt.js,前提是自己有npm过crypto

var crypto = require('crypto')

function WXBizDataCrypt(appId, sessionKey) {
  this.appId = appId
  this.sessionKey = sessionKey
}

WXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {
  // base64 decode
  var sessionKey = new Buffer(this.sessionKey, 'base64')
  encryptedData = new Buffer(encryptedData, 'base64')
  iv = new Buffer(iv, 'base64')

  try {
     // 解密
    var decipher = crypto.createDecipheriv('aes-128-cbc', sessionKey, iv)
    // 设置自动 padding 为 true,删除填充补位
    decipher.setAutoPadding(true)
    var decoded = decipher.update(encryptedData, 'binary', 'utf8')
    decoded += decipher.final('utf8')
    
    decoded = JSON.parse(decoded)

  } catch (err) {
    throw new Error('Illegal Buffer')
  }

  if (decoded.watermark.appid !== this.appId) {
    throw new Error('Illegal Buffer')
  }

  return decoded
}

module.exports = WXBizDataCrypt

后端代码我是直接解密出手机号 就顺便帮用户注册到用户表并完成登录了

// 微信小程序 手机号一键登录 解密手机号码 后 登录好 返回token 没注册过就帮助注册了
    async wxCryptPhone() {
        let { ctx, app } = this;

        let { session_key, iv, encryptedData } = ctx.request.body;

        let pc = new WXBizDataCrypt(app.config.mpWeixin.appid, session_key);
        //获取到微信用户的手机号码
		let { phoneNumber } = pc.decryptData(encryptedData, iv);  
        //如果获取失败
        if(!phoneNumber) {
            return ctx.apiFail('获取手机号码失败~');
        }
        //如果获取成功 直接加入到数据库 返回手机号 和 token给微信端
        //验证用户是否存在
        let users = await app.model.Users.findOne({
            where:{
                mobile:phoneNumber
            }
        })
        //不存在 帮他注册
        .....
        ctx.apiSuccess(users)
    }

可参考:

uniapp开发微信小程序获取用户手机号 - DCloud问答 

你可能感兴趣的:(egg,uniapp,javascript,后端,微信小程序)