微信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 相关文章推荐
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 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通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
js实现iframe动态调整高度的代码
2008/01/06 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
python读取二进制mnist实例详解
2017/05/31 Python
Python反射用法实例简析
2017/12/22 Python
Apache部署Django项目图文详解
2019/07/30 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
详解Python中的分支和循环结构
2020/02/11 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
原装进口全世界:天猫国际
2016/08/03 全球购物
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
乡镇庆八一活动方案
2014/02/02 职场文书
yy司仪主持词
2014/03/22 职场文书
理财计划书
2014/08/14 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
校运动会广播稿300字
2014/10/07 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS