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

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

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,
        })
      }
    })
  }
})
相关文章
|
12月前
|
API 数据安全/隐私保护 开发者
企业微信自动加好友软件,导入手机号批量添加微信好友,python版本源码分享
代码展示了企业微信官方API的合规使用方式,包括获取access_token、查询部门列表和创建用户等功能
|
12月前
微信养号脚本,导入手机号自动添加,autojs代码分享
这段代码实现了基本的微信自动添加好友功能,包括读取手机号文件、启动微信、搜索用户和发送
企业微信批量加好友脚本,企业微信自动加手机号好友软件,自动同意群发消息自动回复
这是一款为企业微信设计的自动化营销工具,能够一键批量加好友并自动回复消息。通过模拟操作实现自动化流程,提升网络营销效率。
|
安全 Go 开发工具
HarmonyOS5云服务技术分享--手机号登录教程
本文详细讲解了在HarmonyOS中集成手机号认证功能的全流程。首先分析了手机号认证的优势,如用户友好、安全性强及快速接入。接着介绍了环境准备步骤,包括集成AGC认证SDK、开启手机认证能力及添加必要权限。核心功能实现部分提供了新用户注册、密码登录和验证码登录的代码示例。此外,还涵盖了账号管理技巧,如修改绑定手机号、重置密码等,并提供了避坑指南和扩展能力建议,帮助开发者轻松实现安全高效的认证系统。
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
3988 12
|
存储 NoSQL 前端开发
美团面试:手机扫描PC二维码登录,底层原理和完整流程是什么?
45岁老架构师尼恩详细梳理了手机扫码登录的完整流程,帮助大家在面试中脱颖而出。该过程分为三个阶段:待扫描阶段、已扫描待确认阶段和已确认阶段。更多技术圣经系列PDF及详细内容,请关注【技术自由圈】获取。
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
575 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
Android开发 数据安全/隐私保护 虚拟化
安卓手机远程连接登录Windows服务器教程
安卓手机远程连接登录Windows服务器教程
3962 5
|
网络协议 Android开发 数据安全/隐私保护
Android手机上使用Socks5全局代理-教程+软件
Android手机上使用Socks5全局代理-教程+软件
13275 2
|
监控 安全 Android开发
【新手必读】Airtest测试Android手机常见的设置问题
【新手必读】Airtest测试Android手机常见的设置问题
1010 0

热门文章

最新文章