微信小程序登录及授权获取手机号

这篇博客讲述了在微信小程序中遇到的获取手机号授权失败的问题,原因是公众号未进行企业认证。详细流程包括登录获取sessionKey,授权获取手机号,以及使用CryptoJS解码加密数据。同时提供了解码函数的实现,并提到了可以将解码工作交给后端处理。此外,还介绍了所使用的第三方库crypto-js和js-base64。
摘要由CSDN通过智能技术生成

一、遇到的问题
1、获取手机号授权时报错:getPhoneNumber:fail no permission

原因是公众号没有进行企业认证

2、流程
1)登录拿session并保存

    var that = this
    wx.login({
      success: async function (res) {
        const res2 = await loginStart({
          method: "POST",
          query: {
            code:res.code
          },
          headerType: "application/json",
        });
        var sessions = res2.datas.sessionKey
        that.setData({
          sessionkey:sessions
        })
      }})

2)授权拿手机号

  <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
  async getPhoneNumber(e){
    var phone = this.decryptData(this.data.sessionkey,e.detail.encryptedData,e.detail.iv)
    // 用获取的手机号来进行其他操作
    const res2 = await loginGet({
      method: "get",
      suffix:'?phone='+phone.phoneNumber,
      query: {},
      headerType: "application/json",
    });

    this.setData({
      position:res2.datas. position,
      shopAddr:res2.datas.shopAddr,
      shopName:res2.datas.shopName,
      userId:res2.datas.userId,
      userName:res2.datas.userName
    })
    
  },

3)解码

import CryptoJS from 'crypto-js'
import {Base64} from 'js-base64'

  decryptData(sessionKey, encryptedData, iv) {
    let key = CryptoJS.enc.Base64.parse(sessionKey)
    let ivv = CryptoJS.enc.Base64.parse(iv)
    let decrypt = CryptoJS.AES.decrypt(encryptedData, key,  {
      iv: ivv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7
    })
    return JSON.parse(Base64.decode(CryptoJS.enc.Base64.stringify(decrypt)))
  },
用到的两个包引入
在终端里安装:
npm install crypto-js
npm install js-base64
另外,也可以把参数传给后端解析(sessionKey, encryptedData, iv))
以下是使用uniapp框架开发微信小程序进行授权登录获取用户手机号的代码: 1. 在项目根目录下的 `manifest.json` 文件中添加微信小程序授权登录的配置: ```json "mp-weixin": { "appid": "你的小程序appid", "scope": "scope.userInfo,scope.userPhoneContact", "settings": { "authSetting": { "scope.userInfo": true, "scope.userPhoneContact": true } } } ``` 2. 在需要进行授权登录的页面中添加以下代码: ```html <template> <button type="primary" @click="getUserInfo">授权登录</button> </template> <script> export default { methods: { getUserInfo() { uni.getUserProfile({ desc: '用于完善会员资料', lang: 'zh_CN', success: (res) => { uni.login({ success: (loginRes) => { uni.request({ url: 'https://api.weixin.qq.com/sns/jscode2session', data: { appid: '你的小程序appid', secret: '你的小程序secret', js_code: loginRes.code, grant_type: 'authorization_code' }, success: (sessionRes) => { const { openid, session_key } = sessionRes.data uni.request({ url: 'https://api.weixin.qq.com/wxa/getphoneNumber', data: { encryptedData: res.encryptedData, iv: res.iv, sessionKey: session_key }, success: (phoneRes) => { console.log(phoneRes.data.phoneNumber) } }) } }) } }) } }) } } } </script> ``` 说明: - `getUserProfile` 方法用于获取用户信息,包括手机号。 - `uni.login` 方法用于获取临时登录凭证code。 - `uni.request` 方法用于向微信服务器发送请求,获取用户手机号。 - 在 `getUserProfile` 方法中,`desc` 参数用于描述授权窗口的文案,`lang` 参数用于设置授权窗口的语言。 - 在 `uni.request` 方法中,`encryptedData` 参数为加密数据,`iv` 参数为加密算法的初始向量,`sessionKey` 参数为临时登录凭证的会话密钥。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值