在 Uniapp 中实现兼容微信 H5、支付宝 H5、微信小程序和支付宝小程序的授权登录功能，需要根据不同平台采用不同的授权方式。下面我将提供一个完整的解决方案。

一、整体思路

1. 判断运行平台：使用 uni.getSystemInfoSync().platform 或条件编译区分不同平台
2. 各平台授权方式：
   • 微信小程序：使用 wx.getUserProfile 或 wx.getUserInfo
   • 支付宝小程序：使用 my.getAuthCode
   • 微信 H5：使用 OAuth2.0 授权（需服务端配合）
   • 支付宝 H5：使用支付宝 JS SDK 授权

二、代码实现

1. 公共工具方法（utils/auth.js）

javascript

2. 页面中使用

vue

3. 微信H5回调页面处理

对于微信H5，你需要创建一个专门的回调页面来处理授权回调：

javascript

三、服务端配合要点

1. 微信小程序：
   • 使用 code 换取 session_key 和 openid
   • 解密 encryptedData 获取用户信息
2. 支付宝小程序：
   • 使用 authCode 换取 user_id 和访问令牌
   • 调用 alipay.user.info.share 获取用户信息
3. 微信H5：
   • 使用 code 换取 access_token 和 openid
   • 使用 access_token 获取用户信息
4. 支付宝H5：
   • 使用 authCode 换取用户信息

四、注意事项

1. 小程序端：
   • 微信小程序从2021年4月起，wx.getUserInfo 不再弹出授权窗口，需使用 wx.getUserProfile
   • 支付宝小程序需要配置 auth_user 权限
2. H5端：
   • 微信H5需要配置JS-SDK安全域名
   • 支付宝H5需要引入支付宝JS SDK
   • 都需要服务端支持OAuth2.0流程
3. 用户体验：
   • 在用户拒绝授权时给出明确提示
   • 提供明确的授权用途说明
   • 考虑未授权状态下的功能降级
4. 隐私政策：
   • 确保符合各平台的隐私政策要求
   • 在用户首次使用时展示隐私协议

五、扩展建议

1. 可以封装一个统一的登录状态管理（Vuex/Pinia）
2. 添加登录状态持久化（使用uni-app的storage）
3. 实现自动登录/token刷新机制
4. 添加登录超时处理

通过以上方案，你可以实现一个在Uniapp中兼容多平台的授权登录功能。根据实际项目需求，你可能需要调整部分细节，特别是与服务端的交互部分。