平台标识,'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');
}
1599

被折叠的 条评论
为什么被折叠?



