uni-app 第三方授权登录

使用uniapp开发跨平台app, 难免会涉及第三方账号授权登录

uni-app官方文档

本文主要使用uni.login API实现第三方登录, H5上的授权登录, uniapp未封装

平台差异说明

image

页面代码

<view class="auth">
      <!-- #ifdef APP-PLUS -->
      // 条件编译, 代码只有在app内才生效
      <image src="../../static/icos/weixin.png" data-loginType="weixin" @click="auth"></image>
      <image src="../../static/icos/QQ.png" data-loginType="qq" @click="auth"></image>
      <image src="../../static/icos/weibo.png" data-loginType="sinaweibo" @click="auth"></image>
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      // 条件编译, 代码只有在微信小程序内才生效
      <image src="../../static/icos/weixin.png"  @click="weixinLogin"></image>
      <!-- #endif -->
</view>

在methods内处理点击事件

methods: {
      auth(e) {
        let loginType = e.currentTarget.dataset.logintype
        // 获得定义在image标签上的logintype属性, 属性取值只能使用小写
        // 授权登录
        uni.login({
          provider: loginType,
          // 给provider传入不同的值, 调用不同的应用登陆接口
          success(res) {
            // 登录成功后, 获取用户数据
            uni.getUserInfo({
              provider: loginType,
              success(e) {
                console.log(JSON.stringify(e.userInfo));
                //  返回的数据是json格式
          }
        })
      }
    }

provider 在不同服务类型下可能的取值说明 文档

image

微信,qq,微博三大平台返回的字段不同, 需要进行处理

auth(e) {
        let loginType = e.currentTarget.dataset.logintype
        uni.login({
          provider: loginType,
          success(res) {
            // 登录成功后, 获取用户数据
            uni.getUserInfo({
              provider: loginType,
              success(info) {
                var userInfo = info.userInfo
                var nickName = ""
                var avatarUrl = ""
                var openId = ""
                if (loginType == "weixin") {
                  nickName = userInfo.nickName
                  avatarUrl = userInfo.avatarUrl
                  openId = userInfo.openId
                } else if (loginType == "qq") {
                  nickName = userInfo.nickname
                  avatarUrl = userInfo.figureurl_qq_2
                  // qq返回了多个尺寸的头像, 按需选择
                  openId = userInfo.openId
                }else if (loginType == "sinaweibo") {
                  nickName = userInfo.nickname
                  avatarUrl = userInfo.avatar_large
                  openId = userInfo.id
                }
              }
            })
          }
        })
      }

最后把获取到的用户数据传递给后端, 后端绑定用户信息