微信小程序授权登录(含获取基本信息及绑定的手机号)
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)通过参数encryptedData
,iv
,sessionKey
或者是code
,sessionKey
请求后端接口,后端进行解密然后返回用户手机号
注意
:如果通过code
来获取,用微信开发者工具测试的时候,可能会显示不出code
,这是调试基础库的原因,在真机调试上不会出现问题。本地调试的时候将调式基础库修改为2.22.1版本即可。
常见的报错信息如下:getPhoneNumber:fail no permission
说明没有进行微信认证
问题描述及相关讨论: https://developers.weixin.qq.com/community/develop/doc/000604480f0470b458364596051800
登录小程序后台:微信公众平台,找到设置中的基本设置,在基本信息中有微信认证
关于认证的费用问题:
1、独立申请的小程序账号认证费用是只收取一次300元永久认证费用,第二年以后每年都不会收取认证费用。因为小程序账号认证不需要年审。
2、如果是通过微信公众号注册认证的小程序账号绑定了公众号,是每年需要收取微信公众号的认证费用,也是不收取小程序账号的认证费用。
5、绑定微信
只需授权然后使用获取的openid
,unionid
,sessionKey
调用后端接口
wx.getUserProfile({desc: '展示用户信息',success: (res) => {let data = {}data.openid = this.data.openiddata.unionid = this.data.unioniddata.sessionKey = this.data.sessionKeyminiBind(data).then(res => {if (res.data.code === 1) {wx.showToast({title: '授权成功!'}) } else {wx.showToast({icon: "none",title: res.data.msg,})}})}
})
微信小程序授权登录(含获取基本信息及绑定的手机号)相关推荐
- uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码 弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
- uniapp微信小程序授权登录并获取手机号
新版:前端要授权两次,一次获取用户信息授权码code,另外一次获取用户手机授权码code,全部传给后端.后端通过用户信息授权码获取openid,通过手机授权码获取手机号码.老版:前端传给后端授权码co ...
- 微信小程序授权登录(获取手机号及用户信息)
目录 1.开放平台绑定微信小程序 2.小程序AppID/AppSecret获取 3.获取授权信息 4.获取用户信息
- 微信小程序授权登录和获取手机号功能(详细)
总结,新增获取用户手机号功能,里面用到了关于获取用户信息和用户手机号的功能,一开始写的时候发现我把两个按钮写在一个登录页面上,获取手机号逻辑是当用户点击授权之后跳转到首页,当点击拒绝弹窗提示,最后发现 ...
- SpringCloud 微信小程序授权登录 获取openId SessionKey【SpringCloud系列13】
SpringCloud 大型系列课程正在制作中,欢迎大家关注与提意见. 自我提升方法推荐:神奇的早起 早上 5:00 -5:20 起床刷牙 5:30-6:00 晨练(跑步.跳绳.骑自行车.打球等等) ...
- 微信登录小程序授权显示服务器出错,微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)...
本文实例为大家分享了微信小程序授权登录解决方案的具体代码,供大家参考,具体内容如下 getUserInfoF:function(){ var that = this; wx.getSetting({ ...
- 微信小程序授权登录+获取手机号
微信小程序授权登录+获取手机号 一.官方文档背景: 小程序登录的链接: 微信小程序获取手机号的链接: 二.微信小程序授权登录+获取手机号 1.简单说明官方文档的操作:先授权登录后拿手机号 2.前端代码 ...
- 微信小程序授权登录 组件的封装
微信小程序授权登录 组件的封装 新建components文件 写wxml文件 wxss部分 js部分 json引用 页面使用 页面js 授权登录 流程如下: 因为多个页面功能需要登录状态 所以做了个组 ...
- SpringBoot微信小程序授权登录
SpringBoot微信小程序授权登录 一.appId 1.1.自己是管理者:微信公众平台,申请或登录自己的微信小程序,在开发者管理中即可看到 2.2.自己是开发者:让管理员将自己加入到小程序开发者管 ...
最新文章
- 访问数据库_如何访问虚拟主机中的数据库
- 虚拟目录和应用程序的区别
- NASA 悬赏 10 万招编程高手 世界最令人头疼的编程语言
- Longest Substring with At Most Two Distinct
- javaWEB总结(9):自定义HttpServlet
- nodejs-- vuex中mapActions
- Java类类getComponentType()方法与示例
- java实现qq自动添加好友
- 程序员生涯之我见 找到自己的兴趣所在 (zz)
- Ice-E(Embedded Internet Communications Engine)移植到s3c2440A(arm9)linux(2.6.12)上的 -转
- 3G应用需要所有的网友共同创造
- 自动驾驶算法-滤波器系列(一)——详解卡尔曼滤波原理
- showDialog 必须Stateful
- 项目分析-纷享车链AutoChain的数据保险柜解读
- 连享会新命令 lxh:随时查看 Stata 资源
- css 固定定位失效问题 position: fixed
- HaaS EDU K1 快速搭建Python开发环境
- Kahan's summation Formula
- 【物联网智能网关-01】通过AD采集获取温湿度
- 高中信息技术c语言编程题,高中信息技术招聘C语言编程题精选.doc