uniapp授权 微信、支付宝小程序获取code和用户基础信息

3,664 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第三天

1、获取当前服务供应商

uniapp官方授权文档

// 获取服务供应商
uni.getProvider({
  service: 'oauth',
  success: function (res) {
    console.log(res.provider)
  }
});

以微信为示例

image.png

image.png

2、 通过服务供应商获取用户登录凭证code

uniapp code授权文档

// 获取用户登录凭证code
uni.login({
  provider: res.provider,
  success: function (loginRes) {
    console.log('uniapp登录凭证',loginRes);
  }
});

image.png

image.png

3、通过服务供应商获取用户基础信息 微信为示例

uniapp 获取用户信息官方文档

uni.login({
  provider: 'weixin',
  success: function (loginRes) {
    console.log(loginRes.authResult);
    // 获取用户信息
    uni.getUserInfo({
      provider: 'weixin',
      success: function (infoRes) {
        console.log('用户昵称为:' + infoRes.userInfo.nickName);
      }
    });
  }
});

image.png

4、支付宝解释

支付宝授权基本信息文档 在用支付宝的时候能获取到code 但是获取不到基础信息,因为是支付宝这边做了一个限制,我们默认获取的是静默获取的时候获取不到基本信息, 这样的话,我们就只能在这里做一个单独处理请求获取支付宝基本信息

建议支付宝的单独做授权登录 因为获取用户信息得请求接口的方式获取 所以跟微信差别还是挺大的

my.getAuthCode({
  scopes: 'auth_user',
  success: res => {
    my.alert({
      title: 'my.getAuthCode 调用成功',
      content: `授权码:${res.authCode}`,
    });
  },
  fail: res => {
    my.alert({
      title: 'my.getAuthCode 调用失败',
      content: JSON.stringify(res),
    });
  }
});

image.png

image.png

5、备注

以下是全部的授权代码

providerLogin(){
// 获取服务供应商
	let self = this;
	uni.getProvider({
		service: 'oauth',
		success: function (res) {
                    console.log(res.provider)
                    self.provider = res.provider[0];
                    // 支付宝
                    // #ifdef MP-ALIPAY
                    my.getAuthCode({
                            scopes: 'auth_user',
                            success: (auth) => {
                                    console.log('支付宝授权凭证',auth)
                            },
                    });
                    // #endif
                    //微信
                    // #ifdef MP-WEIXIN
                    uni.login({
                            provider: self.provider,
                            success: function (loginRes) {
                                    console.log('uniapp统一登录凭证',loginRes) 
                                    uni.getUserInfo({
                                            provider: self.provider,
                                            success(infoRes) { 
                                                    console.info('uniapp用户基础信息',infoRes)

                                            }
                                    });
                            }
                    });
                    // #endif
		}
	});
},

简单的来说获取用户信息在uniapp还是不能直接同步使用,因为支付宝的一些处理并不能兼容微信,这也是支付宝的一个保护机制吧