WeChat----网站接入微信登录(前端)

最新推荐文章于 2024-07-21 21:04:44 发布

damys

最新推荐文章于 2024-07-21 21:04:44 发布

阅读量3.4k

点赞数

分类专栏： WeChat 文章标签： Wechat Wechat login

本文链接：https://blog.csdn.net/damys/article/details/108952009

版权

WeChat 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

网站接入微信登录

标识符长度

openid 长度：28，
普通用户的标识，对当前开发者帐号唯一。一个openid对应一个公众号

unionid 长度：29，
用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的

同个开发账号下的应用有个unionid是一样的，用一个微信号就可以同时跨平台登陆公众号、移动应用和PC网站，无需重新注册，方便快捷

微信网页版本的时候，生成微信二维码用户扫描登录，此时获取的openid和前面我们所说通过微信客户端获取的openid就不是一样的，但是UnionID是一样的

一般要求 https 请求，本地测试可以用 http://127.0.0.1

第三方获取微信openid的两种常见的方式

静默授权，用户无感知
snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）
用户同意授权
snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的

参考：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

使用后台发送请求生成二维码

$redirect_uri="http:";
$redirect_uri=urlencode($redirect_uri);
$appID="你的appid";
$scope="snsapi_login";

准备向微信发请求

$url = "https://open.weixin.qq.com/connect/qrconnect?appid=" . $appID."&redirect_uri=".$redirect_uri
."&response_type=code&scope=".$scope."&state=STATE#wechat_redirect";

请求返回的结果(实际上是个html的字符串)

$result = file_get_contents($url);

替换图片的src才能显示二维码

$result = str_replace("/connect/qrcode/", "https://open.weixin.qq.com/connect/qrcode/", $result);
return $result;

使用js 请求生成二维码（推荐）

1. 动态加载wxLogin.js 文件到页面。 //res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
2. 拼装提交所需的参数
document.querySelectorAll('script[src^="//res.wx.qq.com"]').forEach(function(script) {
	// 删除多余script 标签.
	script.parentNode.removeChild(script)
})

let hm = document.createElement('script')
hm.src = '//res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
document.getElementsByTagName('body')[0].appendChild(hm)
let state = this.randomString(16)
this.utils.setItem('weChartInfo', { state: state })

hm.onload = function() {
  WxLogin({
	self_redirect: false,
	id: 'login_container',
	appid: 'wx1d4e14d6a54332211',
	scope: 'snsapi_login',
	redirect_uri: encodeURIComponent('https://pc.xxx.com/#/weChartLogin'),
	response_type: 'code',
	state: state,
	style: 'black',
	href: encodeURIComponent(window.location.origin + '/style/wechatLogin.css')
  })
  let timeId = setInterval(function() {
	let iframe = document.querySelector('iframe')
	if (iframe) {
	  clearInterval(timeId)
	  iframe.onload = function() {
		console.info('iframe:src:' + iframe.src)
	  }
	}
  }, 200)
}