微信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 22 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
Javascript Promise用法详解
May 10 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 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语法(3)
2006/10/09 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
python购物车程序简单代码
2018/04/18 Python
Python中文件的读取和写入操作
2018/04/27 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
师德演讲稿范文
2014/05/06 职场文书
篝火晚会策划方案
2014/05/16 职场文书
实验室标语
2014/06/21 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
班主任2015新年寄语
2014/12/08 职场文书
督导岗位职责
2015/02/04 职场文书
四年级数学教学反思
2016/02/16 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers