微信小程序 - 登录获取openid和用户信息(适配getUserProfile)
GitHub Demo 地址:
jh-weapp-demo
实现一些常用效果、封装通用组件和工具类
小程序码
微信小程序中如果需要使用微信的用户信息建立自己的用户体系,需拿到唯一标识
openid
,然后通过getUserProfile
(基础库2.10.4以上可用)或者getUserInfo
(基础库2.10.4以下可用)获取用户信息,进而通过微信的用户信息建立自己的用户体系。
如果不需要登录体系,只是单纯展示用户头像昵称,可直接通过开放能力的open-data获取
注意:
·2022年5月9日发布了新的公告
小程序用户头像昵称获取规则调整公告·
1、获取openid
1.1、通过云函数获取
openid
通过云函数获取比较简单方便,我起的云函数方法名为login
,代码实现记得文件夹右击选择 “创建并部署”
小程序云函数获取用户唯一标识官方文档
云函数代码
// 云函数模板
// 部署:在 cloud-functions/login 文件夹右击选择 “上传并部署”const cloud = require('wx-server-sdk')// 初始化 cloud
cloud.init({// API 调用都保持和云函数当前所在环境一致env: cloud.DYNAMIC_CURRENT_ENV
})/*** 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端* * event 参数包含小程序端调用传入的 data* */
exports.main = async (event, context) => {console.log(event)console.log(context)// 可执行其他自定义逻辑// console.log 的内容可以在云开发云函数调用日志查看// 获取 WX Context (微信调用上下文),包括 OPENID、APPID、及 UNIONID(需满足 UNIONID 获取条件)等信息const wxContext = cloud.getWXContext()return {event,openid: wxContext.OPENID,appid: wxContext.APPID,unionid: wxContext.UNIONID,env: wxContext.ENV,}
}
云函数调用
res中返回
openid
,unionid
,env
等信息
//云函数登录cloudLogin() {return new Promise((resolve, reject) => {wx.cloud.callFunction({name: 'login'}).then(res => {return resolve(res)}).catch(err => {return reject(err)});})},
1.2、调用微信接口获取微信用户唯一标识
按照下面流程说明的2步骤,即可获取用户唯一标识
官方流程文档
流程说明:
1.调用
wx.login()
获取 临时登录凭证code
,并回传到开发者服务器。
2.调用auth.code2Session
接口,换取 用户唯一标识OpenID
、用户在微信开放平台帐号下的唯一标识UnionID
(若当前小程序已绑定到微信开放平台帐号) 和 会话密钥session_key
。
之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。
注意事项:
1.会话密钥
session_key
是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。
2.临时登录凭证code
只能使用一次
相关接口官方文档:
获取临时登录凭证code,有效期五分钟(可调用wx.checkSession检查登录态是否过期)
登录凭证校验(成功返回用户唯一标识 OpenID)
2、小程序端获取用户相关信息
获取用户信息(包含:微信名、性别、头像、省市区,国家)官方文档
2021年04月15日,微信发布了一条公告:小程序登录、用户信息相关接口调整说明,推出了新的获取用户信息的接口getUserProfile
(基础库2.10.4以上可用),2021年4月28日24时后发布的小程序新版本需要进行适配
因此获取用户信息需要使用两个方法:
基础库2.10.4以上使用:getUserProfile
基础库2.10.4以下使用:getUserInfo
注意事项:
1.需要配合button按钮调用
2.需要做版本适配,基础库 2.10.4以上使用wx.getUserProfile
,以下使用wx.getUserInfo
3.getUserProfile
调用必须为直接调用,不能通过其他函数回调调用
否则会报getUserProfile:fail can only be invoked by user TAP gesture.错误
调用时机处理:
getUserProfile
每次调用会有一个获取用户信息弹框,因此关于获取用户信息的时机,博主的做法是在需要登录时,弹出登录弹框,里面有登录按钮,用户点击按钮,调用获取openid
和用户信息的方法,然后把返回的openid
和用户信息存到数据库中,下次登录重复此操作`
wxml关键代码:
<block wx:if="{{canIUseGetUserProfile}}"><button class="loginBtn" type="primary" size="default" bindtap="getUserProfile">微信一键登录</button></block><block wx:else><button class="loginBtn" type="primary" size="default" open-type="getUserInfo" lang="zh_CN"bindgetuserinfo="getUserInfo">微信一键登录</button></block>
js关键代码:
// 页面创建时执行this.setData({canIUseGetUserProfile: wx.getUserProfile ? true : false})
//点击一键登录,基础库2.10.4 以上使用getUserProfile: function () {console.log('点击一键登录,基础库2.10.4 以上使用');let that = this;let p1 = this.cloudLogin()let p2 = this.promiseGetUserProfile()Promise.all([p1, p2]).then((res) => {if (res && res[0] && res[1]) {that.successHandle(res[0].result.openid, res[1].userInfo)} else {that.failHandle()}}).catch((err) => {that.failHandle(err)})},//获取用户的当前设置getSetting() {return new Promise((resolve, reject) => {wx.getSetting({withSubscriptions: true,success: function (res) {return resolve(res)},fail: function (err) {return reject(err)}})})},//云函数登录cloudLogin() {return new Promise((resolve, reject) => {wx.cloud.callFunction({name: 'login'}).then(res => {return resolve(res)}).catch(err => {return reject(err)});})},//获取用户信息 - 基础库2.10.4 以上使用promiseGetUserProfile() {return new Promise((resolve, reject) => {wx.getUserProfile({lang: 'zh_CN',desc: '获取您的昵称、头像、地区及性别', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写success: (res) => {return resolve(res)},fail: (err) => {return reject(err)},})})},//点击一键登录,基础库2.10.4 以下使用getUserInfo: function (e) {console.log('点击一键登录,基础库2.10.4 以下使用');// console.log(e.detail.userInfo);// console.log("用户信息--" + JSON.stringify(e.detail.userInfo))let that = this;that.cloudLogin().then(res => {that.getSetting().then(res2 => {if (res2.authSetting['scope.userInfo']) {that.successHandle(res.result.openid, e.detail.userInfo)} else {wx.showToast({title: '未授权',icon: 'none'})}}).catch(err => {that.failHandle(err)});}).catch(err => {that.failHandle(err)});},
然后在successHandle
中把数据存到本地和数据库中即可
微信小程序 - 登录获取openid和用户信息(适配getUserProfile)相关推荐
- 微信小程序登录获取不到头像和昵称解决办法!
微信小程序登录获取不到头像和昵称主要原因是:小程序wx.getUserProfile接口被收回! 大家可以按照文档操作↓ PS: 针对小程序wx.getUserProfile接口将被收回后做出的授权调 ...
- 微信小程序登录获取Token以及微信支付
微信小程序登录获取Token 在调用登录接口api之前,要先获取以下五个参数 后四个参数获取:通过为button按钮添加 open-type="getUserInfo" (固定写法 ...
- PHP小程序登录获取openid
/** code 客户端登录时获取到的code* appid 小程序 appId* secret 小程序 appSecret* param 请求微信小程序登录API必须参数* */public fun ...
- php获取微信uninoid_PHP微信小程序之获取并解密用户数据获取openId和unionId,,小程序登陆...
前言 微信小程序API文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html 在实际的小程序开发中,往往需要用户授权登陆并获取用 ...
- java登入ajxs_微信小程序之获取并解密用户数据(获取openid,nickName等)
本文主要总结微信小程序通过后台请求访问微信用户信息 创建一个微信小程序工程(自行百度) 微信小程序index.js代码 //index.js //获取应用实例 const app = getApp() ...
- 微信小程序联盟:微信小程序之获取并解密用户数据(获取openId、unionId)
前言 微信小程序API文档:开放接口 · 小程序 在实际的小程序开发中,往往需要用户授权登陆并获取用户的数据,快速对接用户系统. openId : 用户在当前小程序的唯一标识 unionId : 如果 ...
- Java实现微信小程序登录 获取用户信息
小程序比公众号授权登录 更加简单 其实没什么是后台需要处理的 前端传过来一个code 我们保存以下通过code获取过来的openid就可以 其他的用户信息 前端小程序那边可以获取. 首先既然是小程序登 ...
- PHP微信小程序之获取并解密用户数据获取openId和unionId
前言 微信小程序API文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html 在实际的小程序开发中,往往需要用户授权登陆并获取用 ...
- uniapp:微信小程序,获取定位省市区街道信息
关于微信小程序定位省市区信息,超详细教程,傻瓜式操作,根据我的文章一步一步操作即可实现定位. 准备工作,申请腾讯位置服务微信小程序JavaScript SDK 1.第一步先申请密匙,进入key设置 2 ...
最新文章
- 数据库常用sql语句
- 滴滴算法大赛算法解决过程 - 方案设计
- 祝贺王远当选为中国区第二位 Teams MVP
- aws部署ssh_将Quarkus应用程序部署到AWS Elastic Beanstalk
- gitlab 修改HTTP连接方式中的IP和端口
- linux 批量选中文本删除,教程 | 【七牛云】Qshell Linux下批量删除文件教程
- javascript 模拟滚动 隐藏滚动条
- Swift之动画总结
- STM32串口通信实验(学习笔记)
- 如何使用 OpManager 进行磁盘空间监控?
- Java ques: Exception in thread “main“ java.lang.ClassNotFoundException
- excel随机数_利用excel快速凭空制造大量随机数据?想要制造什么数据都可以
- C#使用NPOI的方式操作Excel复制行
- informix mysql 语法_Informix SQL 语句详解
- Cubase10自编曲平台,享受音乐带来的快乐!
- zigbee设备类型
- 全民都是评选专家,提前一天泄露 2020 博客之星最终结果
- RabbitMQ学习笔记:惰性队列(Lazy Queues)
- 如何看待中通讯42岁员工坠楼事件?背后深层原因剖析!
- Java提供的进制转换
热门文章
- AMM算法简要理解(Adleman-Mander-Miller Method)
- 数据分析 之 渠道质量分析
- 趋势科技2014年暑期实习生笔试题
- 亲子编程玩Micro:bit-动力小车“麦昆”
- 我去,脸皮厚啊,你竟然使用==比较浮点数?
- android MTK平台驱动设置
- 小米3电信版 无服务
- 业余LaTeX学习笔记(一)-引言
- Java项目:汽车配件销售管理系统(java+SpringBoot+layui+html+maven+mysql)
- 1293 夏洛克和他的girl friend(二分图、线性筛)