前期准备

①微信客户端中访问第三方页面，公众号可以通过网页登陆授权，获取微信用户的基本信息（头像、昵称等），实现业务逻辑。一切按照官方文档说明开发。
②安装微信开发者工具。
③一个官方认证的公众号，或者使用微信公众平台的测试公众号。

④如果使用微信公众平台测试号，需要配置JS接口安全域名和网页授权获取用户基本信息，填写正确的域名和端口号。

⑤本文使用测试号来演示网页授权。前端页面使用VSCode的Live Server本地开启服务器，端口号是5500。后端使用Node的express本地开启服务器，端口号是3000。

前端

页面介绍
①回调页面： 你自己写的网页，即http://127.0.0.1:5500/，与之前配置的JS接口安全域名和网页授权获取用户基本信息一致，可以打开在微信平台与非微信平台。
②静默授权链接： 将你的回调页用微信规定的静默授权格式包裹起来。在微信中打开时，会返回展示你的回调页，并且在URL上附加额外的code和state参数。静默授权只能获取到微信用户的openid。
③主动授权链接： 将你的回调页用微信规定的主动授权格式包裹起来。在微信中打开时，弹出主动授权框。用户点击确定授权后，会返回展示你的回调页，并且在URL上附加额外的code和state参数。若用户近期主动授权过，则不会弹出主动授权框，自动刷新跳转到回调页。主动授权能进一步获取到微信用户的头像、昵称等信息。
④在主动授权链接中带上state=auth参数，能够在用户主动授权后的回调页的URL上，知道用户已经主动授权了。

// 回调页
const cbURL = encodeURIComponent(`http://127.0.0.1:5500/`);
// 静默授权链接
const shareURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${cbURL}&response_type=code&scope=snsapi_base#wechat_redirect`;
// 主动授权链接
const authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${cbURL}&response_type=code&scope=snsapi_userinfo&state=auth#wechat_redirect`;

二次分享与code参数
①code参数是微信平台附加在回调页URL上的随机码，用于获取当前微信用户的access_token。随机码只能用一次，5分钟未使用自动过期。原地刷新页面也会导致code失效，需要重定向静默授权链接，重新获取随机码。
②非微信端打开的回调页分享到微信为首次分享，首次分享的分享链接即为静默授权链接。
③微信端打开的回调页，通过微信浏览器右上角的···继续进行分享为二次分享，需要调用微信的SDK，参见我的另一篇博客《微信开发——开放标签》。
④二次分享的链接应该设置为回调页链接http://127.0.0.1:5500/。若其他用户在微信平台打开二次分享的链接，那么就无法进行主动授权。所以需要在回调页判断微信平台，并在无code参数时，重定向至静默授权链接。
记录并判断用户的主动授权
①从URL的state参数或localStorage中判断用户曾经是否主动授权过。
②若用户完成主动授权，则在localStorage中持久化存入标志信息，建议设置一个过期时间，可以借助storejs第三方库。

// 判断微信平台
const ua = navigator.userAgent.toLowerCase();
const isWechat = /micromessenger/.test(ua);
// 解析URL的query参数
function query() {const map = {};const params = window.location.search.substring(1).split("&");params.forEach((item) => {const temp = item.split("=");map[temp[0]] = temp[1];});return map;
}
// 判断用户是否曾经主动授权过
const auth = localStorage.getItem("Auth") || query().state || "";
const code = query().code || "";
const lastCode = sessionStorage.getItem("vercode");
// 在微信平台中
if (isWechat) {// 储存本次codesessionStorage.setItem("vercode", code);// 二次分享无code，保证每次页面刷新，均存在有效的code，if (code === lastCode || !code) {window.location.replace(shareURL);} else {// 发起请求（下一节）}
}

发起请求
①当回调页在微信浏览器中记载完毕时，需要做的第一件事就是发起一个请求，向后端发送code参数，并判断用户是否主动授权过，从后端获取用户的基本信息。
②若用户未曾主动授权则只能获取到openid，主动授权过才能获取到更多基本信息。

// AJAX请求
const ajax = {get(url) {return new Promise((resolve, reject) => {let xhr = new XMLHttpRequest();xhr.open("GET", url);xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {const res = JSON.parse(xhr.response);if (!res.code) resolve(res.data);else reject(res);}}};});},
};
// 1是静默授权，0是主动授权
ajax.get(`${location.protocol}//${location.hostname}:3000/auth?code=${code}&type=${auth ? 0 : 1}`).then((res) => {UserInfo.openId = res.openId;if (res.UserName && res.UserPhoto) {UserInfo.UserName = res.UserName;UserInfo.UserPhoto = res.UserPhoto;// 主动授权后，储存记录localStorage.setItem("Auth", 1);}}).catch((e) => console.log(e.message));

引导用户主动主动授权
①在页面中放置一个按钮用于交互，绑定事件，出发主动授权，弹出主动授权框。已主动授权过的用户则点击无效。

const authBtn = document.getElementById("authBtn");
// 按钮点击事件，获取主动授权
const handleAuth = () => {if (!auth) {window.location.replace(authURL);}
};
authBtn.addEventListener("click", handleAuth);

后端

express搭建一个服务器
①由于前后端不在一个服务器上，所以需要解决跨域的问题。

const express = require("express");
const app = express();
// CORS跨域设置
app.all("*", function (req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Headers", "X-Requested-With");res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");res.header("X-Powered-By", " 3.2.1");res.header("Content-Type", "application/json;charset=utf-8");next();
});
app.listen(3000, () => console.log("服务器已开启"));

通过code换取access_token和openid
①前端会将code传给后端，后端需要用该code向微信获取access_token和openid等信息。
②每个用户对于同一公众号的openid都是唯一固定不变的。
③静默授权的流程到此结束。

const https = require("https");
const getAccessToken = (code) => {return new Promise((resolve, reject) => {const URL = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appId}&secret=${appSecret}&code=${code}&grant_type=authorization_code`;https.get(URL, (res) => {let rawData = "";res.on("data", (data) => (rawData += data));res.on("end", () => resolve(JSON.parse(rawData)));}).on("error", (e) => console.log(e.message));});};

通过access_token和openid获取UserInfo
①用户主动授权后，通过上一步获取的access_token和openid可以进一步获取用户的基本信息。

const getUserInfo = (accessToken, openId) => {return new Promise((resolve, reject) => {const URL = `https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openId}&lang=zh_CN`;https.get(URL, (res) => {let rawData = "";res.on("data", (data) => (rawData += data));res.on("end", () => resolve(JSON.parse(rawData)));}).on("error", (e) => console.log(e.message));});
};

部署GET接口
①根据前端传的type参数确定本次获取的是静默授权信息还是主动授权信息，返回用户基本信息。

app.get("/auth", function (req, res) {const wxAuth = async () => {// 解析query参数，字符串类型const { code, type } = req.query;const token = await getAccessToken(code);// 请求报错if (!token.access_token) {return res.send({ code: token.errcode, message: token.errmsg });}// 静默授权if (Number(type)) {return res.send({code: 0,message: "success",data: { openId: token.openid },});// 主动授权} else {const UserInfo = await getUserInfo(token.access_token, token.openid);// 请求报错if (!UserInfo.openid) {return res.send({ code: UserInfo.errcode, message: UserInfo.errmsg });}return res.send({code: 0,message: "success",data: {openId: UserInfo.openid,UserName: UserInfo.nickname,UserPhoto: UserInfo.headimgurl,},});}};wxAuth();
});

微信开发——网页授权相关推荐

Weixin4j微信开发网页授权获取openid案例
前言 weixin4j网页静默授权获取openid案例 **说明:**微信网页授权基础知识请参考官方文档. 静默授权获取OpenId 本示例基于weixin4j开发,weixin4j是Java微信开 ...
微信开发网页授权获取用户信息
如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 1. 关于OAuth2.0的说明官方网站:http://oauth.net/ htt ...
微信开发网页授权获取用户基本信息
微信公众平台最近新推出微信认证,认证后可以获得高级接口权限,其中一个是OAuth2.0网页授权,很多朋友在使用这个的时候失败了或者无法理解其内容,希望我出个教程详细讲解一下,于是便有了这篇文章. 一. ...
php 微信开发网页授权登录,微信开发网页授权登录——2018年6月2日
微信网页授权登录用户同意授权,获取code 通过code,获取网页的access_token 拉取用户信息(scope 为snsapi_userinfo) application\index\cont ...
微信开发网页授权认证
微信网页授权有两种方式,分别是: 静默授权:以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的.用户感知的就是直接进入了回 ...
微信开发网页授权的两种方式
第一步在微信公众平台中找到网页授权然后再填写授权回调页面,这里的页面如同手册里面一样以xxx.xxxxx.com 即可而且此处的域名一定要和代码中回调地址在同一个域名之下. 关于网页授权的两 ...
企业微信开发--网页授权（获取code）
在企业微信中,我们可以开发企业应用.使用企业应用,我们可以访问到外部网站.那么外部网站如何获取到企业微信共享用户id呢?企业微信提供了OAuth的授权登录方式,可以让网页和企业微信共享用户ID,从而免 ...
微信公众号开发-网页授权——配置测试账号
思路分析: 1.创建测试账号并且配置测试账号的授权回调域名. 2.由前端发起授权请求,微信收到请求后(若是首次打开,并且未关注公众号,微信会弹出授权页,提示用户授权)将重定向到请求url中配置的red ...
微信OAuth2网页授权登陆接口
微信OAuth2网页授权登陆接口,微信OAuth2网页授权登陆接口,在你的网站上放上可以扫码登陆,会不会吸引更多用户去注册,现在你只需要简单的配制一下就可以轻松实现,还不快点拿走,微信扫码登陆接口开发 ...

微信开发——网页授权

微信开发——网页授权

前期准备

前端

后端

微信开发——网页授权相关推荐

最新文章

热门文章