第三方登录

本文介绍了如何在uniapp中集成微信、QQ、微博的第三方登录功能,以及如何使用阿里云的NirvanaPns插件实现一键登录,包括获取用户信息、配置参数和处理登录结果的代码示例。
摘要由CSDN通过智能技术生成

包括微信、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文件夹中的文件,新加进去的图片不会被读取到,需要重新打包基座。

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值