微信小程序授权登录(含获取基本信息及绑定的手机号)

简介: 微信小程序授权登录(含获取基本信息及绑定的手机号)

1、授权获取微信个人信息

wx.getUserProfile({
  desc: '展示用户信息',
  success: (res) => {
    this.setData({
      nickName: res.userInfo.nickName,
      avatarUrl: res.userInfo.avatarUrl
    })
  },
  fail: res => {
    wx.showToast({
      title: '您已拒绝授权,请重新点击并授权',
      icon:'none'
    })
  }
})

2、调用wx.login()获取临时登录凭证code

wx.login({
    success: res => {
       this.setData({
          jsCode: res.code
       })
  }
})

3、用code调用接口换取用户唯一标识openId、用户在微信开放平台账号下的唯一标识unionId和会话密钥session_key
(1)前端获取

wx.request({
//微信开发者工具勾选-不校验合法域名
    url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appId + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code',
    data:{},
    header:{
      'content-type':'json'
    },
    success:function(res) {
      console.log(res);
    }
})

注意点:正常开发中不会通过这种方法获取,会通过后台获取调用微信公众平台接口获取openid,为了保护一些敏感信息如appid,secret密钥不被泄露。前端可以用来在测试中使用从而达到效果。
(2)调用后台接口获取

getOpenId({jsCode:this.data.jsCode}).then(res => {
  if (res.data.code === 1) {
    this.setData({
       openid: res.data.data.openid,
       sessionKey: res.data.data.sessionKey,
       unionid: res.data.data.unionid
     })
  }
})

4、授权获取手机号
(1)使用button按钮触发授权弹窗

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号码</button>
getPhoneNumber(e){
    console.log(e.detail.iv);//加密算法的初始向量
    console.log(e.detail.encryptedData);//完整用户信息的加密数据
    console.log(e.detail.code);//手机号获取凭证
}

(2)通过参数encryptedDataivsessionKey或者是codesessionKey请求后端接口,后端进行解密然后返回用户手机号
注意:如果通过code来获取,用微信开发者工具测试的时候,可能会显示不出code,这是调试基础库的原因,在真机调试上不会出现问题。本地调试的时候将调式基础库修改为2.22.1版本即可。
在这里插入图片描述
5、绑定微信
只需授权然后使用获取的openidunionidsessionKey调用后端接口

wx.getUserProfile({
  desc: '展示用户信息',
  success: (res) => {
    let data = {}
    data.openid = this.data.openid
    data.unionid = this.data.unionid
    data.sessionKey = this.data.sessionKey
    miniBind(data).then(res => {
      if (res.data.code === 1) {
        wx.showToast({
          title: '授权成功!'
        }) 
      } else {
        wx.showToast({
          icon: "none",
          title: res.data.msg,
        })
      }
    })
  }
})
相关文章
|
24天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
2月前
|
小程序 Devops 开发工具
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
32 0
|
3月前
|
小程序 JavaScript
小程序授权获取昵称
小程序授权获取昵称
|
3月前
|
小程序 JavaScript
小程序授权获取头像
小程序授权获取头像
|
2月前
|
JSON 小程序 C#
微信网页授权之使用完整服务解决方案
微信网页授权之使用完整服务解决方案
|
3月前
|
小程序 JavaScript
微信小程序授权登录?
微信小程序授权登录?
|
3月前
|
小程序 IDE 开发工具
社区每周丨预授权支付新增线下场景及支付宝小程序开发者大赛启动(9.4-9.8)
社区每周丨预授权支付新增线下场景及支付宝小程序开发者大赛启动(9.4-9.8)
33 1
|
3月前
|
缓存 小程序 数据可视化
【社区每周】小程序授权弹层和菜单支持长辈版、无障碍版;AMPE情景智能新增widget卡片能力(2022年6月第一期)
【社区每周】小程序授权弹层和菜单支持长辈版、无障碍版;AMPE情景智能新增widget卡片能力(2022年6月第一期)
20 0
|
14天前
|
存储 编解码 小程序
抖音小程序开发中遇见的坑点
在抖音小程序开发中,需注意10大坑点:遵守小程序限制与规范;解决兼容性问题;优化数据加载速度;适应分享功能限制;处理视频播放挑战;优化图片加载显示;管理资源文件;提升用户体验;考虑安全性;及时更新维护。通过测试、优化和遵循官方文档,可克服这些问题,打造优质小程序。
|
24天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。

热门文章

最新文章