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

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

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,
        })
      }
    })
  }
})
相关文章
|
9月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
2836 12
|
小程序 前端开发 算法
|
移动开发 前端开发 Android开发
开发指南059-App实现微信扫描登录
App是用uniapp开发的,打包为apk,上传到安卓平板中使用
|
小程序 算法 前端开发
微信小程序---授权登录
微信小程序---授权登录
301 0
|
2月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
3月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
160 0
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
|
9月前
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
6月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
1357 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
5月前
|
监控 数据可视化 数据处理
微信养号脚本,全自动插件,AUTOJS开发版
这是一套自动化微信养号工具,包含主脚本`wechat_auto.js`与配置文件`config.json`。主脚本实现自动浏览朋友圈、随机阅读订阅号文章及搜索指定公众号三大功能,支持自定义滚动次数、阅读时长等参数。代码通过随机化操作间隔模拟真实用户行为,具备完善的错误处理和日志记录功能。配套UI模块提供可视化操作界面,可实时监控任务状态与运行日志,便于调整参数设置。控制器部分扩展了批量数据处理能力,如学生信息的增删改查操作,适用于多场景应用。下载地址:https://www.pan38.com/share.php?code=n6cPZ 提取码:8888(仅供学习参考)。
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
2915 7

热门文章

最新文章