官方文档:https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html
授权登陆
此种授权方式比较适合纯在微信端运营的网站
需要用户主动确认授权。
此方式可以获取比较多的信息,例如头像、昵称、openid、unionid、是否关注公众号等信息
silentLogin() {
const _config = {
'appid': wxConfig.appId,
'redirect_uri': '',
'response_type': 'code',
'scope': "snsapi_userinfo", // 授权登陆
}
window.location.href = 'https://open.weixin.qq.com'
}
静默授权
此种授权方式比较适合较为独立或者正在考虑脱离微信的网站
用户不需要进行任何操作,无感
用appid去获取code然后获取用户的openid,拿到openid之后就可以进行自己业务处理了
特殊场景下的静默授权
1、以snsapi_base为scope的网页授权,就静默授权,用户无感知;
2、对于已关注公众号的用户,如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页,即使是scope为snsapi_userinfo,也是静默授权,用户无感知。
silentLogin() {
const _config = {
'appid': wxConfig.appId,
'redirect_uri': '',
'response_type': 'code',
'scope': "snsapi_base", // 静默授权
}
window.location.href = 'https://open.weixin.qq.com'
}
扫码登录
适用于电商网站的PC登录
<!--内嵌式js微信扫码登录-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>内嵌式 - 微信扫码登录</title>
<!-- 引入微信扫码登录js文件 -->
<script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
</head>
<body>
<!-- 放置二维码的div -->
<div id="login_container"></div>
</body>
<script type="text/javascript">
// https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect
var obj = new WxLogin({
self_redirect:true,
id:"login_container",
appid: "wxbdc5610cc59c1631",
scope: "snsapi_login",
// redirect_uri: encodeURIComponent("http://"+window.location.host+"/..."),
redirect_uri: encodeURIComponent("https://passport.yhd.com/wechat/callback.do"),
state: Math.ceil(Math.random()*1000),
style: "black",
href: ""
});
</script>
</html>
网友评论