微信（企微）H5页面授权登录详细说明

项目地址

• GitHub: MultipleDeviceLogin

页面路径

• pages/WechatH5/WechatH5.vue

功能描述

该页面实现了微信H5授权登录功能，用户点击按钮后跳转到微信授权页面，完成授权后返回指定的回调页面。 企业微信也适用该功能，只需将appId替换为企业微信的appid即可。

核心功能

1. 微信授权逻辑

   • 使用wxlogin方法实现微信授权登录。
   • 根据业务需求选择授权方式：snsapi_base（静默授权）或snsapi_userinfo（用户手动同意）。

2. 回调处理

   • 授权成功后，微信会携带code参数回调到指定页面。
   • 页面通过onLoad方法处理回调逻辑。

代码解析

1. 页面逻辑

onLoad方法

onLoad(opt) {
	const { code, ...otherparams } = opt;
	if (code) {
		const params = uni.getStorageSync('opt');
		this._login(code, params);
	} else {
		uni.setStorageSync('opt', otherparams);
	}
}

• 功能: 处理页面加载时的逻辑。
• 参数: opt为页面跳转时的参数。
• 逻辑:
  • 如果code存在，调用_login方法完成登录。
  • 如果code不存在，将其他参数暂存到缓存中。

wxlogin方法

wxlogin() {
	try {
		const snsapiBase = 'snsapi_base';
		const appId = 'xxxxxxxx';
		let url = `${location.origin}/h5`;
		const redirect_uri = encodeURIComponent(url);
		const state = '';
		const OAuthUrl =
			`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirect_uri}&response_type=code&scope=${snsapiBase}&state=${state}#wechat_redirect`;
		location.href = OAuthUrl;
	} catch (error) {
		console.error('微信授权登录', error);
	}
}

• 功能: 跳转到微信授权页面。
• 参数说明:
  • snsapi_base: 静默授权，仅获取openid。
  • snsapi_userinfo: 用户手动同意，获取用户基本信息。
  • appId: 微信服务号的appid。
  • redirect_uri: 授权成功后的回调地址。
  • state: 自定义参数。
• 逻辑:
  • 构造微信授权URL。
  • 使用location.href跳转到授权页面。

总结

通过以上实现，用户可以通过微信H5页面完成授权登录，页面逻辑清晰，样式简洁，适合快速集成到项目中。