微信h5静默、非静默授权获取用户openId的方法和步骤
微信h5静默、非静默授权获取用户openId的方法和步骤:
一、openId是什么?
openId是用户在当前公众号下的唯一标识(‘身份证’),就是说通过这个openId,就能区分在这个公众号下具体是哪个用户。
二、openId有什么用?
假如用户A在当前公众号下购买了一件商品,用户的下单信息肯定要存储到后台数据库,那根据什么进行存储呢?openId是用户在当前公众号下的唯一标识,通过openId和用户的下单购买信息进行键值对的数据绑定。那么我要查询该用户购买过什么商品,就能够通过openId去查询,并且数据是唯一的,不会和另外的用户数据有冲突。
拓展:UnionID:一个商家或公司可能会有多个公众号,假如用户A同时都关注了这个公司下面的三个公众号,那么这个用户就会有三个openId(一个公众号就对应一个openID)。如果作为开发者的我们,要对这个用户在这三个公众号下消费的数据进行汇总,我怎么获取到这三份数据(同一用户的)?答案是 UnionId,微信开发者文档:如果开发者拥有多个移动应用、网站应用和公众帐号,可通过获取用户基本信息中的unionid来区分用户的唯一性,因为同一用户,对同一个微信开放平台下的不同应用(移动应用、网站应用和公众帐号),unionid是相同的。就是说如果要获取用户在同一公司不同公众号下的数据,后台表结构不但要关联openId,还要关联UnionId。
三、怎么获取openId?
(一)登录微信公众平台后台获取公众号的AppId,设置回调地址。
回调地址设置页面向导:开发>接口权限>网页服务>网页授权>修改。开发的项目需要放到已经解析好服务器域名的服务器下,同时把Mp***.text文件放到服务器根目录下,此时你的服务器必须能联通外网也就是有公网IP,并且80端口是打开的,可以使用阿里云等服务器,默认配置就可以了。
(二)根据开发需要,静默授权还是非静默授权
① 静默授权:snsapi_base,没有弹窗,只能获取用户的openId。
②非静默授权:snsapi_userinfo,有弹框弹出需要用户手动点击确认授权。可以获取openId,用户的头像、昵称等
(三)前端代码,配置的参数要一一对应,获取code,并调用后台接口,把code传给后台
redirect_uri,这个的意思是:授权完成后再重新回到当前页面(又刷新了一次页面)
getUrlParam的方法,可以百度下,就是获取页面路径的某个字段所对应的参数。
如果配置参数一一对应,那么此时已经通过回调地址刷新页面后,你就会看到在地址栏中的code了。
(四)前端截取地址栏中的code后通过调接口把code传给后台,后台通过code获取openId和用户头像昵称等信息并返回给前端
为什么,前端不能一起把获取code和获取openId的操作一并做了,还要请求后台,让后台获取openId?
(五)后台通过 code、AppSecret(公众号平台后台取得)请求微信链接获取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给后台获取openIdconst local = window.location.hrefif (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 = thisthis.$http.post('/api/user/wechat/login', {code: code}).then((res) => {let datas = res.dataif (datas.code === 0 ) {console.log('成功')}}).catch((error) => {console.log(error)})}}
}
</script><style lang="less" scoped></style>
(六)通过openId做用户的数据绑定或查询等操作
前后端都获取了openId后,就能通过openId做用户数据的绑定和查询了。
(七)补充说明
使用上述方法进行的微信授权,在手机端会有两次空白页跳转,时间虽然很短暂,但有些产品经理会觉得这种体验不好(实在很欠揍)。解决方法是:可以把跳转到微信获取code的这段链接拼接好直接复制到 微信公众平台 后台管理系统菜单列表里面。这样点击菜单,在回调页通过截取url中的code,就能直接获取到code了,就避免了多次跳转的情况。
(八)解决微信授权成功进入项目后,点击手机物理返回键或返回会出现空白页或者报错的情况,空白页是因为授权页就是空白页。可以参考我的另一篇文章:
解决微信授权成功后点击按返回键出现空白页和报错的问题
https://blog.csdn.net/qq_35430000/article/details/81505497
最后:这篇分享来源于我在实际项目中摸索和借鉴其他项目,有不对的地方希望大家多多指出,有不明白的地方可以给我留言.
卓越的云计算服务提供商,230万+用户正在享受阿里云"稳定,安全,低成本"的产品服务,金牌服务:免费体验,专业快速备案,7x24小时售后,服务器只选阿里云
微信h5静默、非静默授权获取用户openId的方法和步骤相关推荐
- 微信h5授权获取用户openId的方法和步骤,用于用户登录和注册
微信公众号的配置和专业名词就不介绍了,不懂的问度娘,我就直接上代码 点击下载完整demo 先说一下我的demo放的位置: 微信H5授权登录分两种: ① 静默授权:snsapi_base,没有弹窗,只 ...
- 公众号h5获取手机号权限_微信公众号h5获取用户openId的方法和步骤
微信h5静大享上.是发了概开程态间些告人屏果会区.默.非静默授权获取用户openId的方法和步骤微和二第说,班.都年很过过事发工开宗定据发指互数个遍前互就: 一.openId是什么? openId享. ...
- 微信公众号h5获取用户openId的方法和步骤
微信h5静默.非静默授权获取用户openId的方法和步骤: 一.openId是什么? openId是用户在当前公众号下的唯一标识('身份证'),就是说通过这个openId,就能区分在这个公众号下具体是 ...
- 微信公众号授权获取用户OpenID和UnionId然后发生消息通知
微信公众号授权获取用户OpenID和UnionId然后发生消息通知 1.获取微信公众号code 1.微信公众拿取公众号appid和appSecret 2.网页域名授权,这里的域名拼接上html所在位置 ...
- php把微信一键登录,PHP微信第三方实现一键登录及获取用户信息的方法(实例详解)...
这篇文章主要介绍了PHP版微信第三方实现一键登录及获取用户信息的方法,较为详细的分析了微信第三方登陆的相关注意事项与实现技巧,需要的朋友可以参考下 注意,要使用微信在第三方网页登录是需要"服 ...
- 微信公众号开发之授权获取用户信息
微信开发交流群:148540125 系列文章参考地址 极速开发微信公众号 欢迎留言.转发.打赏 项目源码参考地址 点我点我--欢迎Start 前几篇文章已讲完如何导入项目,如何启动配置项目,如何成为开 ...
- asp.net获取浏览器的唯一标识_vue单页面应用如何在微信浏览器里进行网页授权获取用户信息
前言 在vue单页面应用比较流行的时代,如何把vue应用和微信公众号两者结合在一起也是比较常见的功能.如果仅仅是把一个vue应用放在公众号上,没有进行额外的微信功能开发,如:获取用户信息,支付,分享等 ...
- 微信OAuth授权获取用户OpenId
https://open.weixin.qq.com/ 这个是授权登陆自己网站的和我的这个是有区别的. 博客最新更改在这里https://my.oschina.net/xshuai/blog/2934 ...
- 微信授权获取用户openid前端实现
近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活. 首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url https ...
最新文章
- php安装完成以后要复制php.ini文件
- 仅需10分钟:开启你的机器学习之路
- AutoX全无人驾驶出租车正式对公众开放试运营
- 重构风险程序员一定要遵守的规则
- Oracle 内存参数设置
- Flex4中的皮肤(2): Skin State
- MySQL 之 performance_schema
- 大数据学习笔记57:Java代码操作HBase
- “iQOO”怎么读?vivo官宣“发音”视频
- 图卷积神经网络入门详解
- MYSQL的用户变量(@)和系统变量(@@)
- 几校联考——day1题解
- 算法:258. Add Digits 各位相加
- Java学习笔记之设计模式(3)抽象工厂模式
- VSCode解决中文乱码问题最详解
- ❤️肝下25万字的《决战Linux到精通》笔记,你的Linux水平将从入门到入魔❤️【建议收藏】
- mysql数据库增左右连接_Nodejs连接MySQL数据库 增、删、改、查等操作
- 【MySQL连接】MySQLdb安装与使用
- 1.3 项目经理的知识和技能
- Windows-dos命令