微信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 相关文章推荐
javascript 学习之旅 (3)
Feb 05 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
canvas实现探照灯效果
Feb 07 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
基于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
PHP5 面向对象(学习记录)
2009/12/02 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
js验证上传图片的方法
2015/05/12 Javascript
jquery密码强度校验
2015/12/02 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
Vue组件化开发思考
2018/02/02 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
python读写ini文件示例(python读写文件)
2014/03/25 Python
Python中subprocess的简单使用示例
2015/07/28 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
浅析Python四种数据类型
2018/09/26 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
班级口号大全
2014/06/09 职场文书
拆迁委托协议书
2014/09/15 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL