微信h5静默和非静默授权获取用户openId的方法和步骤


Posted in Javascript onJune 08, 2020

一、openId是什么?

openId是用户在当前公众号下的唯一标识(‘身份证'),就是说通过这个openId,就能区分在这个公众号下具体是哪个用户。

二、openId有什么用?

假如用户A在当前公众号下购买了一件商品,用户的下单信息肯定要存储到后台数据库,那根据什么进行存储呢?openId是用户在当前公众号下的唯一标识,通过openId和用户的下单购买信息进行键值对的数据绑定。那么我要查询该用户购买过什么商品,就能够通过openId去查询,并且数据是唯一的,不会和另外的用户数据有冲突。

拓展:UnionID:一个商家或公司可能会有多个公众号,假如用户A同时都关注了这个公司下面的三个公众号,那么这个用户就会有三个openId(一个公众号就对应一个openID)。如果作为开发者的我们,要对这个用户在这三个公众号下消费的数据进行汇总,我怎么获取到这三份数据(同一用户的)?答案是 UnionId,微信开发者文档:如果开发者拥有多个移动应用、网站应用和公众帐号,可通过获取用户基本信息中的unionid来区分用户的唯一性,因为同一用户,对同一个微信开放平台下的不同应用(移动应用、网站应用和公众帐号),unionid是相同的。就是说如果要获取用户在同一公司不同公众号下的数据,后台表结构不但要关联openId,还要关联UnionId。

三、怎么获取openId?

(一)登录微信公众平台后台获取公众号的AppId,设置回调地址。

微信h5静默和非静默授权获取用户openId的方法和步骤

回调地址设置页面向导:开发>接口权限>网页服务>网页授权>修改。开发的项目需要放到已经解析好服务器域名的服务器下,同时把Mp***.text文件放到服务器根目录下,此时你的服务器必须能联通外网也就是有公网IP,并且80端口是打开的,可以使用阿里云等服务器,默认配置就可以了。

微信h5静默和非静默授权获取用户openId的方法和步骤

(二)根据开发需要,静默授权还是非静默授权

   ① 静默授权:snsapi_base,没有弹窗,只能获取用户的openId。

   ②非静默授权:snsapi_userinfo,有弹框弹出需要用户手动点击确认授权。可以获取openId,用户的头像、昵称等

微信h5静默和非静默授权获取用户openId的方法和步骤

(三)前端代码,配置的参数要一一对应,获取code,并调用后台接口,把code传给后台

微信h5静默和非静默授权获取用户openId的方法和步骤

redirect_uri,这个的意思是:授权完成后再重新回到当前页面(又刷新了一次页面)

getUrlParam的方法,可以百度下,就是获取页面路径的某个字段所对应的参数。

微信h5静默和非静默授权获取用户openId的方法和步骤

微信h5静默和非静默授权获取用户openId的方法和步骤

如果配置参数一一对应,那么此时已经通过回调地址刷新页面后,你就会看到在地址栏中的code了。

微信h5静默和非静默授权获取用户openId的方法和步骤

(四)前端截取地址栏中的code后通过调接口把code传给后台,后台通过code获取openId和用户头像昵称等信息并返回给前端

为什么,前端不能一起把获取code和获取openId的操作一并做了,还要请求后台,让后台获取openId?

微信h5静默和非静默授权获取用户openId的方法和步骤

(五)后台通过 code、AppSecret(公众号平台后台取得)请求微信链接获取openId

微信h5静默和非静默授权获取用户openId的方法和步骤

微信h5静默和非静默授权获取用户openId的方法和步骤

微信h5静默和非静默授权获取用户openId的方法和步骤

前端具体代码如下,可复制(记得把文中的 window.APPID改为自己公众号的APPID)

<template>
 <div></div>
</template>
 
<script>
import GetUrlParam from '@/assets/js/util/getUrlParam.js'
export default {
 name: 'Index',
 data () {
  return {
  }
 },
 created () {
  this.getCode()
 },
 methods: {
  getCode () { // 非静默授权,第一次有弹框
   const code = GetUrlParam('code') // 截取路径中的code,如果没有就去微信授权,如果已经获取到了就直接传code给后台获取openId
   const local = window.location.href
   if (code == null || code === '') {
    window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + window.APPID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
   } else {
    this.getOpenId(code) //把code传给后台获取用户信息
   }
  },
  getOpenId (code) { // 通过code获取 openId等用户信息,/api/user/wechat/login 为后台接口
   let _this = this
   this.$http.post('/api/user/wechat/login', {code: code}).then((res) => {
    let datas = res.data
    if (datas.code === 0 ) {
     console.log('成功')
    }
   }).catch((error) => {
    console.log(error)
   })
  }
 }
}
</script>
 
<style lang="less" scoped>
 
</style>

(六)通过openId做用户的数据绑定或查询等操作

    前后端都获取了openId后,就能通过openId做用户数据的绑定和查询了。

(七)补充说明

   使用上述方法进行的微信授权,在手机端会有两次空白页跳转,时间虽然很短暂,但有些产品经理会觉得这种体验不好(实在很欠揍)。解决方法是:可以把跳转到微信获取code的这段链接拼接好直接复制到  微信公众平台 后台管理系统菜单列表里面。这样点击菜单,在回调页通过截取url中的code,就能直接获取到code了,就避免了多次跳转的情况。

微信h5静默和非静默授权获取用户openId的方法和步骤

微信h5静默和非静默授权获取用户openId的方法和步骤

(八)解决微信授权成功进入项目后,点击手机物理返回键或返回会出现空白页或者报错的情况,空白页是因为授权页就是空白页。可以参考我的另一篇文章:

解决微信授权成功后点击按返回键出现空白页和报错的问题
https://3water.com/article/188238.htm

到此这篇关于微信h5静默和非静默授权获取用户openId的方法和步骤的文章就介绍到这了,更多相关微信h5静默和非静默授获取openId内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
微信小程序实现日历签到
Sep 21 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 #Javascript
vue-router的hooks用法详解
Jun 08 #Javascript
Vue自定义render统一项目组弹框功能
Jun 07 #Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 #Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 #Javascript
vue路由权限校验功能的实现代码
Jun 07 #Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 #Javascript
You might like
IIS6的PHP最佳配置方法
2007/03/19 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
window.onresize 多次触发的解决方法
2013/11/08 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
用Python实现数据的透视表的方法
2018/11/16 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
新浪网技术部笔试题
2016/08/26 面试题
上海某公司.net方向笔试题
2014/09/14 面试题
销售找工作求职信
2013/12/20 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python