admin管理员组文章数量:1558087
步骤1:在页面中先引入如下JS文件(支持https):
http://res.wx.qq/connect/zh_CN/htmledition/js/wxLogin.js
步骤2:在需要使用微信登录的地方实例以下JS对象:
var obj = new WxLogin({
self_redirect:true,
id:"login_container", //盒子 ID
appid: "", //微信官网申请
scope: "", //微信官网申请
redirect_uri: "", 微信官网设置回调域名
state: "Math.random()",
style: "", //二维码样式 只有black while
href: "" //样式 需要base64编码加密 data:text/css;base64,后面拼接
});
参数说明
参数 | 是否必须 | 说明 |
---|---|---|
self_redirect | 否 | true:手机点击确认登录后可以在 iframe 内跳转到 redirect_uri,false:手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。 |
id | 是 | 第三方页面显示二维码的容器id |
appid | 是 | 应用唯一标识,在微信开放平台提交应用审核通过后获得 |
scope | 是 | 应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login即可 |
redirect_uri | 是 | 重定向地址,需要进行UrlEncode |
state | 否 | 用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验 |
style | 否 | 提供"black"、"white"可选,默认为黑色文字描述。详见文档底部FAQ |
href | 否 | 自定义样式链接,第三方可根据实际需求覆盖默认样式。详见文档底部FAQ |
需要填写
APPID 微信开放平台获取
redirect_uri 微信开放平台设置的回调
secret 微信开放平台获取
参数会拼接在回调 url 的后面 截取参数 返回给后端
getWXcode() {
// 获取code
var url = location.search
console.log(url)
var theRequest = new Object()
if (url.indexOf('?') != -1) {
var str = url.substr(1)
let strs = str.split('&')
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1]
}
}
let code = theRequest.code
console.log(theRequest)
console.log(code)
// return theRequest;
// 打印code
},
版权声明:本文标题:web网页端微信登录内嵌 二维码方法 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1727387243a1112408.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论