admin管理员组文章数量:1559096
微信开发文档:https://developers.weixin.qq/doc/oplatform/website_app/wechat_login/wechat_login.html
-
点击按钮,跳转到微信授权页面,会出现一个二维码。
//拉取授权页面 let appid = '网页应用的appid' let redirect_uri = encodeuricomponent('授权后跳转回的页面') location.href=`https://open.weixin.qq/connect/qrconnect?appid=${appid }&redirect_uri=${redirect_uri }&response_type=code&scope=snsapi_login&state=state#wechat_redirect `
appid:是应用的唯一标识。
redirect_uri:授权登录后跳转回的页面,需要在微信开放平台配置授权回调域,用户使用微信帐号登录后,只能回调至该域名下的页面。要使用encodeuricomponent()进行编码,不能使用encodeuri(),因为如果是vue项目并且使用的是hash模式的话,#后面的内容会丢失,导致报错:scope错误或没有scope权限。
response_type:填code即可。
scope:应用授权作用域,网页应用目前仅填写snsapi_login即可。
state:非必填,用于保持请求和回调的状态,授权请求后原样带回给第三方。 -
用户扫码,会弹出授权弹框,确认授权后,微信会自动跳转到回调地址redirect_uri,并通过
?
的形式拼接相关回调参数。
-
提取出code传给后端,后端接口会返回网页授权access_token和其他一些用户信息。
//获取url中的search let search = location.search.slice(1); let arr = search.split("&"); let result = {}; arr.foreach(function(item){ let itemarr = item.split('='); result[itemarr[0]]=itemarr[1]; }) if(result.code){ //调用后端接口 getuserinfo(); }
本文标签: 网页
j9九游会老哥俱乐部交流区的版权声明:本文标题:pc端网页实现微信扫码登录 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1727388298a1112467.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论