H5网页微信授权登录

最近项目做了一个简单的H5在线点酒，运行在微信环境，涉及到微信授权登录，jssdk的使用，微信支付等功能。前端用的vue-cli脚手架搭建，路由用的是history模式，因为hash模式的话，在做微信支付时会有很多坑。history模式的话前端只要设置下路由模式就好，然后后端配合设置下服务器即可（官网配置传送门），配置完后在浏览器能直接访问某个内页就算成功。现记录下一些流程，以便后续自己查阅。微信开发文档传送门

一、微信H5网页授权登录

授权登录流程微信开发文档已经写的很清楚了，如下：

1 第一步：用户同意授权，获取code

2 第二步：通过code换取网页授权access_token

3 第三步：刷新access_token（如果需要）

4 第四步：拉取用户信息(需scope为 snsapi_userinfo)

5 附：检验授权凭证（access_token）是否有效

我这边用的是vue来开发的，所以写下前端具体的流程。首先是在app.vue里面用watch做全局的路由监听（也可以用router.beforeEach来做拦截，为什么不在app.vue生命周期里面获取呢，因为授权成功后query参数里的code在这边获取不到），然后在监听里面判断本地是否有缓存用户信息，没有的话就直接跳转微信的授权链接；授权成功后，会重新跳回h5网页，这时就可以在watch的路由监听里面获取到query参数里面的code，然后通过code调用后端的登录接口获取用户的信息并缓存即可。

app.vue完整代码：

<template><div id="app"><router-view /></div>
</template><script>
import { authorize } from "@/assets/js/authorize";
import { userInfoKey } from "@/assets/js/config";
import wx from "weixin-js-sdk";
export default {name: "App",data() {return {firstRender: true};},mounted() {this.getJssdkConfig(); // 获取jssdk配置},watch: {$route(to, from) {if (this.firstRender) {// 缓存桌号，在线点酒要用，没有桌号需要跳转扫一扫页面this.firstRender = false;let query = this.$route.query;if (query && query.table) {window.localStorage.setItem("table", query.table);}}let userInfo = window.localStorage.getItem(userInfoKey);if (!userInfo) {// 没有用户信息的话跳转微信授权let query = this.$route.query;if (query && query.code) {//  获取code调取后端登录接口获取用户信息this.login(query.code);return;}authorize();}}},methods: {getJssdkConfig() {// 调接口获取jssdk配置this.request({url: "/api/v1/user/get_jssdk",data: {url: window.location.href.split("#")[0]},successFn: res => {let data = res.data;wx.config({//debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: data.appid, // 必填，公众号的唯一标识timestamp: data.timestamp, // 必填，生成签名的时间戳nonceStr: data.noncestr, // 必填，生成签名的随机串signature: data.signature, // 必填，签名，见附录1jsApiList: ["scanQRCode", "openLocation", "chooseWXPay"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});/* wx.error(re => {console.log(re, "jssdk配置失败");}); */}});},login(code) {// 调用登录接口let that = this;this.request({url: "/api/v1/user/getUserInfoByCode",data: {code: code},successFn(res) {window.localStorage.setItem(userInfoKey, JSON.stringify(res.data));if (res.data.mobile === "") {that.$router.push("/bind-phone");}}});}}
};
</script><style></style>

授权代码：

export function authorize() {// 微信授权登录let redirect_uri = encodeURI(window.location.href),appid = "微信公众号appid";let wx_url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;window.location.href = wx_url;
}

二、jssdk的使用

项目使用npm包引入，所以先下载安装npm包，执行如下命令：

npm i -S weixin-js-sdk

然后在app.vue生命周期里面调用后端接口获取配置信息进行配置后，就可以直接在页面上引入wx对象（import wx from "weixin-js-sdk"; ），然后调用微信的扫一扫，支付等相关接口了，具体代码查看上面app.vue代码。

效果：

H5网页微信授权登录相关推荐

VUE 实现公众号网页微信授权登录
这里不做过多的解释,具体了解见官网文档. 网页授权官方文档需要准备工作: 1.微信开发者工具 2.公众号添加开发者权限以及本地IP白名单 3.公众号唯一标识:appID 4.公众号配置网页授权域名 ...
h5获取微信授权登录
1.判断是否有code---没有跳转到微信官方网址网址中的参数参考微信公众平台官网----网页授权 | 微信开放文档 (qq.com) getCode() { //微信网页授权返回codelet ...
公众号平台的H5实现微信授权登录
微信给开发者提供的测试账号平台:https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/ind ...
H5页面微信授权登录——前端部分
作为一枚刚刚学习前端的小萌新来说,真的是难到了我,后来翻阅无数资料,总结如下,记录下来防止自己忘了,也为其他的刚学习的朋友一点提示吧. 首先说路由导航,把所有的访问地址先拦下来进行判断,新来的用户是否 ...
uniapp - 超详细的 H5 公众号网页微信登录示例代码，提供从 0-1 公众号配置及详细注释代码（站在新手小白的角度）第三方微信授权登录的实现！！
介绍目前示例是 "点击按钮登录",你也可以改为 "一进页面就登录" ,可随意改造. 百度的教程都太乱了,而且功能都有一定问题.本文主要讲解 uniapp H5 ...
H5 微信授权登录功能实现
背景最近几周面试复习以前知识库,刚好博客从国外迁移到国内CSND,同步坐下笔记,梳理之前开发H5 微信授权登录功能获取用户信息数据. H5页面微信授权登录,使用微信官方JSSDK,微信网页授权较为复 ...
springboot微信授权登录
水平有限!实现方法直接找的网上的以为大神所编写的api来实现,这里主要是记录一下自己实现的过程.具体方法请参考网址:https://github.com/liyiorg/weixin-popular, ...
从前后端交互逻辑出发、基于企业开发标准，Web微信授权登录系统开发项目分享
背景首先,在网页中开发第三方登录系统的案例越来越多,用户的操作习惯也逐渐被引导改变,更加简洁有效的登录交互系统将会成为网页开发中必要的一环.从项目的用户使用背景.微信公众号的开发模式.企业代码的标准 ...
前端实现微信授权登录
PC网页微信授权登录一:网页外链跳转的方式 01.请求后台的接口,会返回一个微信扫码的界面地址,使用js跳转过去即可 wxlogin () {User.wxlogins().then(res =&g ...
uniapp开发h5微信授权登录(详细教程)
uniapp开发h5微信授权登录文章目录 uniapp开发h5微信授权登录前言一.前期准备--申请测试账号二.正式开发--前端代码三.打包发布总结前言我也是第一次做h5授权微信登录,网 ...

H5网页微信授权登录

H5网页微信授权登录相关推荐

最新文章

热门文章