微信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 开发规范要求(图文并茂)
Jun 11 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
javascript实现的简单计时器
Jul 19 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
详解Vue中的watch和computed
Nov 09 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
聊天室php&amp;mysql(五)
2006/10/09 PHP
Dedecms常用函数解析
2008/02/01 PHP
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
组合算法的PHP解答方法
2012/02/04 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
php生成图片缩略图的方法
2015/04/07 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
js Date概念详细介绍
2013/11/22 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
vue.config.js常用配置详解
2019/11/14 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
python 判断自定义对象类型
2009/03/21 Python
python开发之文件操作用法实例
2015/11/13 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
python3中确保枚举值代码分析
2020/12/02 Python
歌唱比赛主持词
2014/03/18 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
教师远程培训心得体会
2016/01/09 职场文书
小学毕业教师寄语
2019/06/21 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers