访问微信第三方网页,公众号授权,获取用户信息,步骤说明 和 代码 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 公众号相关 >

访问微信第三方网页,公众号授权,获取用户信息,步骤说明 和 代码

发表时间:2020-10-10

发布人:葵宇科技

浏览次数:90

用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息

// 微信官方文档地址
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

1 第一步:用户同意授权,获取code
2 第二步:通过code换取网页授权access_token
3 第三步:刷新access_token(如果需要)
4 第四步:拉取用户信息(需scope为 snsapi_userinfo)
5 附:检验授权凭证(access_token)是否有效

第一步:用户同意授权,获取code

方法一:网页外链跳转的方式
01.请求后台的接口,会返回一个微信扫码的界面地址,使用js跳转过去即可

wxlogin () {
User.wxlogins().then(res => {
console.log(res)
window.location.href = res.result.url
})
}

方法二:网页内嵌二维码方式

setWxerwma () {
const s = document.createElement(‘script’)
s.type = ‘text/javascript’
s.src = ‘https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js’
const wxElement = document.body.appendChild(s)
wxElement.onload = function () {
var obj = new WxLogin({
id: ‘’, // 需要显示的容器id
appid: ‘’, // 公众号appid wx*******
scope: ‘snsapi_login’, // 网页默认即可
redirect_uri: encodeURIComponent(’’), // 授权成功后回调的url
state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
style: ‘black’, // 提供"black"、"white"可选。二维码的样式
href: ‘’ // 外部css文件url,需要https
})
}
},

var obj = new WxLogin({
self_redirect: false,
id: “login_container”,
appid: “wx5·······”,
scope: “snsapi_login”,
redirect_uri: encodeURI(“http://www.3dflb.com/index.html”),
state: Math.floor(Math.random() * 1000000),
style: “black”,
href: “data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7DQogIHdpZHRoOiAxNTBweDsNCn0NCg0KLmltcG93ZXJCb3ggLnRpdGxlIHsN” //二维码图片
});

//如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。会获得 http://www.3dflb.com/index.html?code=031Efn0w3M5f6V2jt64w32wGZ&state=146940#/gz 这样的一个,带code的url

第二步:通过code换取网页授权 access_token 和 openid

方法一、获取code后,请求以下链接获取access_token: https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
方法二、把code传给后台,进行处理

第三步:刷新access_token(如果需要)

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

如果网页授权作用域为snsapi_userinfo,则此时开发者可以通过access_token和openid拉取用户信息了。

方法一、请求方法
http:GET(请使用https协议) https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
方法二、把access_token 和 openid传给后台,进行处理

相关案例查看更多