uniapp登录,统一封装一下,方便管理使用

平台标识,'H5_WEIXIN' | 'H5_ALIPAY' | 'MP_WEIXIN' | 'MP_ALIPAY' | 'APP_WEIXIN' | 'APP_ALIPAY' | MP_QQ | MP_TOUTIAO

拿走即用

不废话 ! 上码

// auth.js
export const WECHAT_APP_ID = '你的微信应用AppID';
export const ALIPAY_APP_ID = '你的支付宝应用AppID';

const auth = {
	/**
	 * 登录入口
	 * @param {String} platform - 平台标识,'H5_WEIXIN' | 'H5_ALIPAY' | 'MP_WEIXIN' | 'MP_ALIPAY' | 'APP_WEIXIN' | 'APP_ALIPAY' | MP_QQ | MP_TOUTIAO
	 * @param {Object} options - 可选参数,如 H5 的回调地址
	 * @returns {Promise} - 登录结果
	 */
	async login(platform, options = {}) {
		try {
			let result;
			switch (platform) {
				case 'H5_WEIXIN':
					result = await this.h5WeixinLogin(options.redirectUri);
					break;

				case 'H5_ALIPAY':
					result = await this.h5AlipayLogin(options.redirectUri);
					break;

				case 'MP_WEIXIN':
				case 'APP_WEIXIN':
					await this.checkAppProvider('weixin'); // 检查微信登录支持
					result = await this.uniLogin('weixin');
					break;

				case 'MP_ALIPAY':
				case 'APP_ALIPAY':
					await this.checkAppProvider('alipay'); // 检查支付宝登录支持
					result = await this.uniLogin('alipay');
					break;
				case 'MP_QQ':
					await this.checkAppProvider('qq'); // 检查qq登录支持
					result = await this.uniLogin('qq');
					break;
				case 'MP_TOUTIAO':
					await this.checkAppProvider('toutiao'); // 检查抖音登录支持
					result = await this.uniLogin('toutiao');
					break;
				default:
					throw new Error('Invalid platform');
			}
			return result;
		} catch (err) {
			console.error(`Login failed on platform: ${platform}`, err);
			throw err;
		}
	},

	/**
	 * H5 微信登录
	 * @param {String} redirectUri - 回调地址
	 * @param {String} scope - 授权范围,默认值为 snsapi_userinfo
	 *   - snsapi_base: 获取用户的基本信息(openid),适用于已关注的用户。
	 *   - snsapi_userinfo: 获取用户的详细信息(昵称、头像等),适用于首次使用或未关注的用户。
	 * @returns {Promise}
	 */
	h5WeixinLogin(redirectUri, scope = 'snsapi_userinfo') {
		const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${WECHAT_APP_ID}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=${scope}&state=H5_WEIXIN#wechat_redirect`;
		return this.redirectToOAuth(url, 'Weixin');
	},
	/**
	 * H5 支付宝登录
	 * @param {String} redirectUri - 回调地址 
	 * @returns {Promise}
	 */
	h5AlipayLogin(redirectUri) {
		const url = `https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=${ALIPAY_APP_ID}&scope=auth_user&redirect_uri=${encodeURIComponent(redirectUri)}`;
		return this.redirectToOAuth(url, 'Alipay');
	},

	/**
	 * 通用重定向处理
	 * @param {String} url - 授权 URL
	 * @param {String} provider - 授权提供者名称 
	 */
	redirectToOAuth(url, provider) {
		return new Promise((resolve) => {
			// 重定向到授权页面
			window.location.href = url;
			resolve({ message: `Redirecting to ${provider} OAuth...` });
		});
	},

	/**
	 * UniApp 登录(支持微信和支付宝)
	 * @param {String} provider - 登录提供者,'weixin' 或 'alipay'
	 * @returns {Promise}
	 */
	uniLogin(provider) {
		return new Promise((resolve, reject) => {
			uni.login({
				provider: provider,
				success: function(loginRes) {
					const code = loginRes.code;
					console.log(`${provider}-code:`, code);
					resolve(code);
				},
				fail: function(err) {
					console.error(`${provider}`, err);
					reject(err);
				}
			});
		});
	},

	/**
	 * 检查 APP 是否支持指定的登录提供者
	 * @param {String} provider - 登录提供者,'weixin' 或 'alipay'
	 * @returns {Promise}
	 */
	checkAppProvider(provider) {
		return new Promise((resolve, reject) => {
			uni.getProvider({
				service: 'oauth',
				success: function(res) {
					if (res.provider.includes(provider)) {
						console.log(`${provider} 登录支持`);
						resolve();
					} else {
						console.warn(`${provider} 登录不支持`);
						reject(new Error(`${provider} 登录不支持`));
					}
				},
				fail: function(err) {
					console.error('获取登录提供者失败', err);
					reject(err);
				}
			});
		});
	},
};

export default auth;

使用

// 登录到微信 H5 平台 H5_ALIPAY  H5_WEIXIN
auth.login('H5_WEIXIN', { redirectUri: 'https://yourapp.com/redirect' })
	.then(response => {
		console.log(' H5 登录处理:', response);
	})
	.catch(error => {
		console.error(' H5 登录失败:', error);
	});

// 微信小程序登录 MP_ALIPAY MP_WEIXIN
auth.login('MP_WEIXIN')
	.then(code => {
		console.log('小程序登录成功, code:', code);
		// 使用 code 进行后续处理
	})
	.catch(error => {
		console.error('小程序登录失败:', error);
	});

// 对于 H5 登录,授权完成后会重定向到 redirectUri。你需要在该页面处理回调逻辑,提取 code 并使用它进行后续操作(如发送到服务器进行登录验证)。
// 回调页面中的处理逻辑 

const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');

if (code) {
	// 使用 code 进行后续处理,如发送到服务器进行登录验证
	console.log('获取到的 code:', code);
} else {
	console.error('未获取到 code');
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值