H5页面实现微信授权登录

项目需求描述：

用户通过扫码海报携带活动二维码跳转到h5页面，并且完成微信授权，完成授权的用户进入小程序后不再进行授权操作。这里边涉及到了两个大问题，一是怎样在一个域名下部署两个项目，二是用户点击授权之后跳转当前页，获取到code值后，什么时候向服务端发送授权请求。

先讨论第一个问题?

首先第一个项目正常打包部署即可，生成的域名`www.xxx.xxx`;
第二个项目的域名必须是`www.xxx.xxx/h5/`；
对于前端来说需要做的是：

1. 增加请求前缀，如图1
2. 配置路由信息，如图2
3. 修改模板文件index.html，如图3
4. 最后通过nginx将项目部署到服务器。

图1：

图2：

图3：
注意：如果你是通过vue开发的h5页面那么你只需要配置router文件就行，如果是原生开发的h5那么你就得配置.html文件。

就<meta base=/h5/ >做一说明：

base标记定义了文档的基础URL地址，在文档中所有的相对地址形式的URL都是相对于这里定义的URL而言的。一篇文档中的<base>标记不能多于一个，必须放于头部，并且应该在任何包含URL地址的语句之前。

授权问题？

在h5页面点击授权后，重定向到当前项目 https://www.xxx.xxx/h5/

const jumpUrl = `https://www.xxx.xxx/h5/`window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxb20930d8128f9ba5&redirect_uri=${jumpUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
// location.herf 该url中除了重定向地址，其他的全是官方文档提供。// 重定向后的页面url地址会携带用户的code值，例如：`https://www.xxx.xxx/h5/?code=xxxxxxxxxxxxxxxxxxxxxxx` 这种形式

这样我们就能拿到用户code，再向服务端发送请求获取用户信息，在按照产品需求进行相应的操作。

以上是整个授权的流程，我在实现授权的过程中遇到了这样一个问题：

就是页面重定向之后是不会再去执行当前方法中后续代码的，所以不要在执行完window.location.href 这段代码后立马去获取url中的code值以及后续的请求操作。（原因浏览器重定向后会刷新页面，对于单页应用而言会发生组件卸载和重新渲染）应该在页面的根组件生命周期钩子中获取url中相应的值，去进行后续操作。（因为我当时使用vue开发的h5页面，所以当时是在`created`这个钩子中进行判断的），如果使用原生的话在`onload`函数中即可。

最近开发分享裂变需求，对开发过程遇到的问题做个小小的总结，阅读中如果发现有不正确或者不规范的地方及时指正，共同进步。

H5页面实现微信授权登录相关推荐

微信首页登录html页面,H5页面接入微信授权登录和分享
前期准备接入微信授权分静默授权和非静默授权两种静默授权: scope=snsapi_base,没有弹窗,只能获取用户的openId. 非静默授权: scope=snsapi_userinfo,有 ...
微信html5网站集成,H5页面接入微信授权
授权步骤用户同意授权,获取code 通过code换取网页授权access_token 拉取用户信息(需scope为 snsapi_userinfo) 项目依赖 SpringBoot:2.1.4.RE ...
H5网页获取微信授权登录
进入页面判断是否获取code, 有code 则直接拿code去调后端接口让后端返回token,进而再调用获取用户信息的接口 mounted() {this.code = this.getQueryVa ...
微信h5页面之微信授权、获取头像等
//js代码获取点击事件 var popupBox = document.querySelector('.popupBox') var showPopup = document.querySelect ...
uni-app开发的h5，使用微信授权登录（前置条件+具体代码）
微信内嵌浏览器运行H5版时,可以调起微信登录普通浏览器调起微信登陆是不开放的,只有个别开发者才有,比如京东前置条件在微信内嵌浏览器运行H5版时,调起微信登录,需要配置回调域名 (请注意,这里填写 ...
H5页面使用微信网页授权实现登录认证
在用H5开发微信公众号页面应用时,往往需要获取微信的用户信息,H5页面在微信属于访问第三方网页,因此通过微信网页授权机制,来获取用户基本信息,此处需要用户确认授权才能获取,用户确认授权后,我们可以认为 ...
浏览器打开微信公众号h5页面，增加cookie绕过微信授权登录
from selenium import webdriver from time import sleepdriver = webdriver.Chrome() #插入cookie需要与cookie相 ...
pc、h5微信授权登录
pc登录微信登录(通过后端返回一个qrcode重定向到页面上,进行扫码授权,获取code即可,再根据code获取登录信息) h5登录微信授权登录:(支持微信浏览器,其它浏览器无法拉起微信的授权): ...
uniapp开发h5微信授权登录(详细教程)
uniapp开发h5微信授权登录文章目录 uniapp开发h5微信授权登录前言一.前期准备--申请测试账号二.正式开发--前端代码三.打包发布总结前言我也是第一次做h5授权微信登录,网 ...
H5 微信授权登录功能实现
背景最近几周面试复习以前知识库,刚好博客从国外迁移到国内CSND,同步坐下笔记,梳理之前开发H5 微信授权登录功能获取用户信息数据. H5页面微信授权登录,使用微信官方JSSDK,微信网页授权较为复 ...

H5页面实现微信授权登录

项目需求描述：

H5页面实现微信授权登录相关推荐

最新文章

热门文章