微信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 相关文章推荐
jQuery 事件队列调整方法
Sep 18 Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
基于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简单静态页生成过程
2008/03/27 PHP
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
详解Python 中的容器 collections
2020/08/17 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
大学班级干部的自我评价分享
2014/02/10 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
2014年协会工作总结
2014/11/22 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
对学校的意见和建议
2015/06/04 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书