微信公众平台网页服务器,微信公众号——网页端
引言
此篇文章主要涉及以下内容:
公众号网页授权方法
Oauth2原理
JSSDK调用方法
网页授权
(A)用户访问客户端,后者将前者导向认证服务器。
(B)用户选择是否给予客户端授权。
(C)假设用户给予授权,认证服务器将用户导向客户端事先指定的"重定向URI"(redirection URI),同时附上一个授权码。
(D)客户端收到授权码,附上早先的"重定向URI",向认证服务器器申请令牌。这一步是在客户端的后台的服务器上完成的,对用户不可见。
(E)认证服务器核对了授权码和重定向URI,确认无误后,向客户端发送访问令牌(access token)和更新令牌(refresh token)。基于SPA的网页授权流程 https://www.jianshu.com/p/27b8069b4178获取用户信息 - 相当于普通网页的用户登录。
配置网页回调
image.png
配置JS安全接口
image.png
网页端
网页授权
微信登录
获取⽤用户信息
// wechat/index.html
async auth () {
window.location.href = '/wxAuthorize'
},
初始化Oauth
// index.js
const OAuth = require('co-wechat-oauth');
const oauth = new OAuth(conf.appid, conf.appsecret);
生成用户URL
// index.js
// ⽣生成引导⽤用户点击的 URL
router.get("/wxAuthorize", async (ctx, next) => {
const state = ctx.query.id;
// const target = ctx.href
console.log("ctx..." + ctx.href);
// ⽬目标地址
redirectUrl = ctx.href;
redirectUrl = redirectUrl.replace("wxAuthorize", "wxCallback");
const scope = "snsapi_userinfo";
var url = oauth.getAuthorizeURL(redirectUrl, state, scope);
console.log("url" + url);
ctx.redirect(url);
});
获取用户回调 AccessToken与OpenId
// index.js
// 获取AccessToken
router.get("/wxCallback", async (ctx, next) => {
const code = ctx.query.code; // 授权码
console.log("getAccessToken", code);
var token = await oauth.getAccessToken(code);
var accessToken = token.data.access_token;
var openid = token.data.openid;
console.log("getAccessToken....");
console.log("accessToken", accessToken);
console.log("openid", openid);
// ctx.body = token
ctx.redirect("/?openid=" + openid);
});
用户信息
// index.html
async getUser(){
const qs = Qs.parse(window.location.search.substr(1))
const openid = qs.openid
const res = await axios.get(`/getUser`,{
params:{
openid
}
})
console.log('User',res.data)
},
// index.js
router.get('/getUser', async (ctx, next) => {
const openid = ctx.query.openid
console.log('getUser', openid)
var userInfo = await oauth.getUser(openid);
console.log('userInfo:', userInfo)
ctx.body = userInfo
})
AccessToken缓存问题
// mongo.js
// ClientAccessToken
// mongoose.js
const mongoose = require("mongoose");
const { Schema } = mongoose;
mongoose.connect(
"mongodb://localhost:27017/weixin",
{
useNewUrlParser: true,
},
() => {
console.log("Mongodb connected..");
}
);
exports.ServerToken = mongoose.model("ServerToken", {
accessToken: String,
});
// ClientAccessToken
schema = new Schema({
access_token: String,
expires_in: Number,
refresh_token: String,
openid: String,
scope: String,
create_at: String,
});
// ⾃自定义getToken⽅方法
schema.statics.getToken = async function(openid) {
return await this.findOne({
openid: openid,
});
};
schema.statics.setToken = async function(openid, token) {
// 有则更更新,⽆无则添加
const query = {
openid: openid,
};
const options = {
upsert: true,
};
return await this.updateOne(query, token, options);
};
exports.ClientToken = mongoose.model("ClientToken", schema);
const OAuth = require("co-wechat-oauth");
const oauth = new OAuth(
conf.appid,
conf.appsecret,
async function(openid) {
return await ClientToken.getToken(openid);
},
async function(openid, token) {
return await ClientToken.setToken(openid, token);
}
);
微信JSSDK
运行于微信内置浏览器网页
调用微信原生应用如:拍照、语音、扫一扫
分享功能 查到的数据不同
图像接口
音频接口
// index.js
// 获取JSConfig
router.get("/getJsConfig", async ctx => {
console.log("getJSSDK...", ctx.query);
var res = await api.getJsConfig(ctx.query);
console.log("res", res);
ctx.body = res;
});
// index.html
// index.html
getJSConfig: async function() {
console.log('wx:', wx)
let res = await axios.get('/getJSConfig', {
params: {
url: window.location.href
}
})
console.log('res.......', res.data)
res.data.jsApiList = ['onMenuShareTimeline',
'onMenuShareAppMessage']
wx.config(res.data);
wx.ready(function () {
console.log('wx.ready......')
});
// 获取网络地址
wx.getNetworkType({
success: function (res) {
// 返回网络类型2g,3g,4g,wifi
var networkType = res.networkType;
console.log('getNetworkType...', networkType)
}
});
}
你的赞是我前进的动力
求赞,求评论,求转发...
微信公众平台网页服务器,微信公众号——网页端相关推荐
- JeeWx捷微2.4.1版本发布,JAVA微信管家平台(支持公众号、企业号)
JeeWx捷微2.4.1版本发布,JAVA微信管家平台(支持公众号.企业号) 1.JEEWX平台介绍 Jeewx是一款开源.敏捷.组件化的微信管家平台,支持微信公众号.微信企业号管理,采用JAVA语 ...
- JeeWx捷微 2.4.1版本发布,开源JAVA微信管家平台(支持公众号、企业号)
JeeWx捷微2.4.1版本发布,JAVA微信管家平台(支持公众号.企业号) 1.JEEWX平台介绍 Jeewx是一款开源.敏捷.组件化的微信管家平台,支持微信公众号.微信企业号管理,采用JAVA语 ...
- 微信公众平台与微信开放平台的区别、服务号、订阅号、企业微信的区别
微信公众平台 vs 微信开放平台 微信公众平台是介绍公众号相关的内容,比如服务号.订阅号.企业微信,所以叫微信公众平台:公众平台也是公众号的管理端,可以编辑推送文章,通常是公众号的运营.开发登录: 微 ...
- 微信平台 和服务器什么区别,微信公众平台是选择服务号还是订阅号?两者有什么区别?...
作为微信营销和微信运营人员,必须对微信营销基础和微信营销的一些技巧都要有所了解;不然,新手将难以从微信入手开始微信营销之路.下面小编为大家介绍微信公众平台是选择服务号还是订阅号以及两者的区别,一起来看 ...
- 微信公众平台如何选择服务号还是订阅号
原文链接:http://blog.sina.com.cn/s/blog_adee88f20101ed03.html 经常就会有企业的老总问我,对于企业选择微信公众号到底是选择服务号还是订阅号的问题.虽 ...
- 微信公众开放平台开发03---百度BAE上搭建属于自己的微信公众平台 -JAVA,微信公众开放平台部署到百度云中BASE2.0,进行调试,木有钱买云服务器的亲们试试
微信公众开放平台开发03---百度BAE上搭建属于自己的微信公众平台 -JAVA,微信公众开放平台部署到百度云中BASE2.0,进行调试,木有钱买云服务器的亲们试试 技术qq交流群:JavaDream ...
- 百度云搭建微信公众平台服务器,微信大众开放平台开发03-百度BAE上搭建属于自己的微信公众平台 -JAVA,微信公众开放平台部署到百度云中BASE2.0,进行调试,木有钱买云服务器的亲们试试...
微信公众开放平台开发03---百度BAE上搭建属于自己的微信公众平台 -JAVA,微信公众开放平台部署到百度云中BASE2.0,进行调试,木有钱买云服务器的亲们试试 微信公众开放平台开发03---百度 ...
- 微信开放平台与微信公众平台简介
微信开放平台地址:微信开放平台 微信公众平台地址:微信公众平台 一.微信开放平台常用功能 app: 分享与收藏 微信登录 微信支付 智能接口(具体参看文档) 网站: 微信登录 智能接口(具体参看文档) ...
- 微信公众平台、微信公众平台.小程序、微信.开放平台三者关系及unionid
以下内容,仅限于根据自己开发以及阅读微信文档总结,错误之处敬请指出,共同进步! 一.微信公众平台.微信公众平台.小程序.微信.开放平台登录地址 项目 微信公众平台 微信公众平台.小程序 微信.开放平台 ...
最新文章
- 数据分析索引总结(下)Pandas索引技巧
- python飞机大战3关BOSS
- 远程服务器电脑的设置
- (TOJ1531)爱的伟大意义
- androidstudio自带git用法_Android Studio使用Git版本控制github
- matlab求最大公倍数_小学数学最大公因数最小公倍数练习
- c51语言bit函数,keil C51中的本征函数库及使用说明
- Centos 7 RabbitMQ + Haproxy 集群高可用部署
- 对聊天室项目的NABCD的分析
- 实战:基于服务端开发和前后端分离开发区别
- 20135337——信息安全设计基础第十四周学习笔记
- 视屏教程、电子书、技术文档
- python mql4跟单_MT4本地跟单EA设置教程 -
- word一键生成ppt 分页_一键实现Word转PPT的三种方法评测
- smss,lsass, http://laji.xrlyy.com病毒处理
- js获取今天剩余时间_骚姿势获取无线路由器后台权限
- Android 开发第七弹:简易时钟(秒表)
- Qt 图片 等比例显示、放大、缩小、平移图像 显示
- 物联网入门教程【上】
- 开局觉醒天道酬勤天赋(二)