uniapp各种登录方法-广州芦苇科技

第三方登录

包括微信、QQ、微博登录，正式包需要在mainifest.json - app模块配置中填写相关信息。正常调试可调用第三方登录，但自定义调试基座包运行项目调试不支持第三方登录，同等于正式包。关键代码：

uni.getProvider()：获取已选择支持的第三方渠道，非必需；
uni.login()：登录，登录之后才能获取用户信息；
uni.getUserInfo()：获取第三方用户信息，主要是获取openId传给后端绑定身份。

uni.getProvider({
  service: 'oauth',
  success: (pres) => {
    // 判断授权登录渠道是否有微信
    if(pres.provider.indexOf('weixin') > -1) {

      uni.login({
        provider: 'weixin',
        success: (lres) => {

          uni.getUserInfo({
            provider: 'weixin',
            success: (userRes) => {
              let openId = userRes.userInfo.openId;

              // ...下面就可以拿着openId去请求后端接口了
            }
          })
        }
      })
    }
  }
})

一键登录

一键登录需要提前决定使用哪种第三方，uniapp中有DClound云开发支持一键登录，直接内置函数可调用；多数会使用比较成熟的阿里云手机号码验证服务，其中就包括一键登录。
开发api可以查看官网文档，也包括有uniapp的官方插件。

阿里云本机号码一键登录

相关网址：阿里云号码认证服务、uniapp阿里云号码认证官方插件
使用流程：

项目新建nativePlugins文件夹，下载的插件文件夹放到此文件夹下；
打开mainifest文件-app原生插件配置-选择本地插件；
菜单栏-运行-运行到手机或模拟器-制作自定义调试底座；
等待云打包完成-运行-运行到手机或模拟器-运行基座选择-选择自定义的基座-运行到真机。

使用方法：

初始化：需要在阿里云号码认证服务平台获取key，可前端写死或接口获取；
引入插件，初始化;
页面调用展示一键登录页面/弹窗，具体配置参考下载插件处使用方法;

// 初始化，App.vue文件内
const aLiSDKModule = uni.requireNativePlugin('AliCloud-NirvanaPns');

onLaunch() {
  let platform = uni.getSystemInfoSync().platform;
    let sdkInfo = '';
    //设置秘钥
    if(platform == 'android'){
      //开启SDK日志打印
      aLiSDKModule.setLoggerEnable(true);
      sdkInfo = 'key';  //key为平台获取的key
    }else if(platform == 'ios'){
      sdkInfo = 'key';
    }
    aLiSDKModule.setAuthSDKInfo(sdkInfo);
}

// 登录页面中使用
const aLiSDKModule = uni.requireNativePlugin('AliCloud-NirvanaPns');

// 方法体内
const _that = this;
// 调用该接口首先会弹起授权页，点击授权页的登录按钮获取Token
//一键登录页面配置，参考官方文档，此处将配置文件放到了其他文件夹
const config = uiConfig.buildFullscreen();  
aLiSDKModule.getLoginToken(
  5000,
  config,
  tokenResult => {
    uni.hideLoading();
    console.log(JSON.stringify(tokenResult));
    if ("600001" == tokenResult.resultCode) {
      console.log("授权页拉起成功");
    } else if ("600000" == tokenResult.resultCode) {
      console.log("获取Token成功，接下来拿着结果里面的Token去服务端换取手机号码，SDK服务到此结束");
        /* 
        此处拿着tokenResult.token调用后端一键登录接口 
        */
        aLiSDKModule.quitLoginPage();
      }).catch(err => {
        _that.$utils.Toast({
          msg: '登录失败，请使用其他方式登录',
          duration: 2000
        })
      })
    } else {
      _that.$utils.Toast({
        msg: tokenResult.msg
      })
      //手动关闭授权页
      aLiSDKModule.quitLoginPage();
    }
  },
  clickResult => {
    console.log(JSON.stringify(clickResult));
    switch (clickResult.resultCode) {
      case "700000":
        console.log("用户点击返回按钮");
        break
      case "700001":
        console.log("用户切换其他登录方式");
        break
      case "700002":
        console.log("用户点击登录按钮");
        break
      case "700003":
        console.log("用户点击checkBox");
        break
      case "700004":
        console.log("用户点击协议");
        break
    }
  },
  customUiResult => {
    console.log("点击了自定义控件 " + JSON.stringify(customUiResult));
    if ("close" == customUiResult.widgetId) {
      //点击了自定义的关闭授权页按钮
      aLiSDKModule.quitLoginPage();
      return;
    }
  });

注意事项：

配置项只要有一项错误，会导致整个一键登录页无法弹出并且无任何报错，建议填写配置页一项一项地填；
设置背景透明可以使用：'#00FFFFFF'；
页面单位默认是dp，填写尺寸相关单位无需填写单位；
配置项中调用的静态资源基于打包自定义基座时static文件夹中的文件，新加进去的图片不会被读取到，需要重新打包基座。

uniapp DClound一键登录

相关文档：DClound一键登录
使用流程：

开启uniClound云函数空间；
编写相关云函数；
在代码中调用内置函数，参考：univerify使用。

showUniverfy() {
  let _that = this;
  _that.univerifyManager = uni.getUniverifyManager();

  _that.univerifyManager.preLogin({ //预登录
    provider: 'univerify', //用手机号登录
    success(res) {
      _that.autoStatus = true
      console.log('预登录成功', res);

      // 获取一键登录弹框协议勾选状态
      _that.univerifyCallback = (res) => {
        _that.univerifyManager.getCheckBoxState({
          success(res) {
            console.log("getCheckBoxState res: ", res);
            if (!res.state) {
              _that.check = false;
              // 关闭一键登录弹框
              _that.$utils.Toast({
                msg: '请勾选协议'
              })
            }
          },

          fail(err) {
            console.log("err: ", err);
          }
        })

        if(res.code === '30008') {
          console.log(111111);
          _that.thirdLogin(res.provider);
        }
        console.log('点击了自定义事件', res);
      }

      // 订阅自定义按钮点击事件
      _that.univerifyManager.onButtonsClick(_that.univerifyCallback);


      _that.univerifyManager.login({ //正式登录，弹出授权窗
        univerifyStyle: config, //弹窗样式，参考文档
        success(res) { // 正式登录成功
          console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}

          // 在得到access_token后，通过callfunction调用云函数
          uniCloud.callFunction({
            name: 'loginByUniverify', // 云函数名称
            data: { //传给云函数的参数
              'access_token': res.authResult.access_token, // 客户端一键登录接口返回的access_token
              'openid': res.authResult.openid // 客户端一键登录接口返回的openid
            },
            success(callRes) {
              for(let i in callRes) {
                console.log(i, '----', callRes[i]);
              }
              console.log('调用云函数成功' + callRes);
              _that.verifySend(callRes.result);
            },
            fail(callErr) {
              console.log('调用云函数出错' + callErr)
            },
            complete() {
              _that.univerifyManager.close(); //关闭授权登录界面
            }
          })
        },
        fail(err) { // 正式登录失败
          console.log(err);
          if(err.errCode === 30003) {
            _that.jumpTo('/pages/index/index', {}, 'switchTab');
            // this.univerifyManager.close() //关闭授权登录界面
          }
        }
      });
    },

    verifySend(params) {
      this.$http.quickLogin({
        accessCode: params.access_token,
        phoneNumber: params.phone
      }).then(res => {
        console.log('quick login: ', res);
      })
    },

    fail(err) { //预登录失败
      _that.autoStatus = false
      console.log('错误码：' + err.errCode)
      console.log('预登录err---', err)
    }
  })
  // 取消订阅自定义按钮点击事件
  // this.univerifyManager.offButtonsClick(_that.univerifyCallback)
}

注意事项：

比较依赖后端代码在uniClound空间内，如果不是需要将一键登录云函数url化（参考文档）；
一键登录页面样式可配置内容偏少。