asp.net获取浏览器的唯一标识_vue单页面应用如何在微信浏览器里进行网页授权获取用户信息
前言
在vue单页面应用比较流行的时代,如何把vue应用和微信公众号两者结合在一起也是比较常见的功能。如果仅仅是把一个vue应用放在公众号上,没有进行额外的微信功能开发,如:获取用户信息,支付,分享等功能。其实和放在普通浏览上没有任何区别,仅仅是把网页放在了浏览器显示而已。但现实往往是需要很多额外的功能开发,如一个很常见的功能:在微信浏览器中如果进行网页授权,而获取用户的信息。
下面就说一下笔者在开发这一功能的实现过程,当然,还有其它方式都可以实现,这里只是说一下个人的实现逻辑,如果有不好的地方请各位小伙伴们批评指正。
配置服务器和公众号信息
要想在微信浏览器里进行开发功能,首先要有一台服务器,没有的话可以去阿里去或者腾讯云购买。还需要有一个已经备案过的域名。以上材料都有了就需要注册一个微信公众号,这里笔者以服务号为例进行说明。具体的注册过程自行查阅资料,比较简单,这里不再缀述。
申请完公众号之后,需要进行网页授权域名配置
按上述提示配置好服务器文件和域名
这里假定都已经配置好所有的信息,如配置过程中出现问题需要多看文档,按步骤一步步来配置。
开发
这里说明一下这个微信授权地址具体的参数需查看官方文档:
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
说一下几个比较重要的点:
- appid: 公众号的唯一标识
- redirect_uri: 授权后重定向的回调链接地址,请使用 urlEncode 对链接进行处理
- scope: 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )
开发之前一定要仔细阅读官方文档~~~!!!!
开发之前一定要仔细阅读官方文档~~~!!!!
开发之前一定要仔细阅读官方文档~~~!!!!
创建一个vue项目,这里不多说,看一下主要的逻辑代码:
router.beforeEach((to, from, next) => { // 判断要跳转的页面是不是需要授权 if (noAuthPageList.includes(to.name)) { next() } else { // 判断当前页面是不是从微信回调回来的 if (location.search && location.search.indexOf('code') !== -1) { handlerWeixinAuth(next) } else { if (userInfo.isLogin()) { if (userInfo.state.unionid) { next() } else { if (isWeiXin) { window.location.href = urlPath.weixinAuthUrl } else { next() } } } else { autoLogin(next) } } }})
我把所有逻辑都放在了 vue-router里的 beforeEach 方法,当然也可以放在其它地方,看个人的心情~ 我比较喜欢这种方式。
说一下主要流程
- 判断是不是需要授权的页面,有些页面是不需要进行授权的,如 登录注册等页面,如果是不需要授权的页面则直接放过。
- 如果是进行需要授权的页面,则判断当前链接是不是从微信浏览器授权回调回来的,也就是说链接里面有否有code参数,如果有code则说明是从微信回调回来,则需要进行处理,把 code 发给后台,后台需要获取 access_token
- 如果链接里面没有code,但是需要登录信息,则判断是不是在微信浏览器中,这里判断是不是微信浏览器主要是防止应用以后可能不仅仅在微信浏览器中使用。如果确定以后只在微信浏览器中使用,则可不判断,直接进行微信授权就好。当用户同意获取信息之后,微信浏览器会主动回调链接中的地址,也就是 redirect_uri对应的参数地址。
总结
这里笔者只是简单介绍了一下如何在微信浏览器里面获取信息的步骤,具体实现可能还要很多代码要写。对于vue单页面应用来说,微信授权是比较绕的,需要大家要不断测试理解,这里可以用微信开发的测试工具 微信开发者工具 去测试。
好了,有什么不明白的地方可以私信我,大家一起学习交流
asp.net获取浏览器的唯一标识_vue单页面应用如何在微信浏览器里进行网页授权获取用户信息相关推荐
- 微信公众平台-测试号网页授权-获取openid方法
文章目录 1.创建自己的测试号 2.测试号管理信息填写(注意仔细一步步对照) 3.手动获取openid 4.使用SDK获取openid 1.创建自己的测试号 通过申请链接:https://mp.wei ...
- 第八篇 :微信公众平台开发实战Java版之如何网页授权获取用户基本信息
第一部分:微信授权获取基本信息的介绍 我们首先来看看官方的文档怎么说: 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权回调域 ...
- 网页授权获取用户基本信息
转自:https://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html eg:https://open.weixin.qq. ...
- 格式android id,android 获取APP的唯一标识applicationId的实例
使用getIdentifier()方法可以方便的获各应用包下的指定资源ID. 方式一 int indentify = getResources().getIdentifier("com.te ...
- Android app 标签,android 获取APP的唯一标识applicationId的实例
使用getIdentifier()方法可以方便的获各应用包下的指定资源ID. 方式一 int indentify = getResources().getIdentifier("com.te ...
- c#获取对象的唯一标识_DDD领域驱动设计实战 - 创建实体身份标识的常用策略
从简单到复杂依次为: 3.1.1 用户提供唯一标识 这时用户将输入一些可识别的数值或符号,或从已有标识中选其一,然后创建实体对象.这是一种非常简单方案,但也可能变得复杂. 由于需用户自己生成高质量的标 ...
- uni-app获取设备的唯一标识
uni-app根据不同手机平台获取设备的唯一标识,由于获取的方式是异步的,当前页面执行不一定能拿到.建议存缓存,其他页面可以用调用缓存的方式获取,不存在的话在执行一下方法获取,确保保证一定能获取的到. ...
- 【转载】设备唯一标识方法(Unique Identifier):如何在Windows系统上获取设备的唯一标识
设备唯一标识方法(Unique Identifier):如何在Windows系统上获取设备的唯一标识 原文地址:http://www.vonwei.com/post/UniqueDeviceIDfor ...
- iOS获取设备的唯一标识的方法总结以及最好的方法
各种获取设备唯一标识的方法介绍 一.UDID(Unique Device Identifier) UDID的全称是Unique Device Identifier,它就是苹果iOS设备的唯一识别码,它 ...
最新文章
- 财务需要学python-财务人要学Python吗?
- 【PC工具】N个直播录屏相关软件,手机投屏电脑,电脑显示手机摄像头图像,必须好用无广告!...
- STL源码剖析---vector
- 腾讯云linux系统结合nginx部署项目
- Vue2.0 传值方式
- 10-30SQLserver基础--(备份和还原、分离和附加数据库)、语句查询操作
- mysql-sql命令
- TCP 慢启动 拥塞控制
- sql 标量子查询_SQL Server 2017:标量子查询简化
- 大学生计算机应用论文,大学生计算机应用论文(共1178字).doc
- .NET Remoting学习笔记(二)激活方式
- 分享110个采集小偷PHP源码,总有一款适合你
- Math.floor cei round
- python微信群管理开禁言_怎么设置群禁言(微信群怎么禁言)
- jike1901666
- 身份证前两位对照省份表
- DP(Nietzsche)的hu测 T2(dp)
- 电阻何时取得最大功率
- docker 出现错误:no such file or directory. Are you trying to connect to a TLS-enabled daemon without TLS
- STM32超低功耗入门之睡眠模式