uniapp微信小程序授权登录详解

一、微信小程序授权登录简介

微信小程序是一种基于微信开发的应用程序，通过微信场景、接口、工具和服务来提供服务。通过微信小程序授权登录，用户可以使用微信账号信息，快速登录小程序，为用户提供便捷的用户体验。

二、uniapp微信小程序授权登录实现方法

在uniapp开发微信小程序时，提供了方便的授权登录方法。以下是实现微信小程序授权登录的步骤：

1、创建小程序应用

创建小程序应用，获取appid，并将appid填写到小程序配置中。

2、引入uniapp官方插件

{
    "plugins": {
        "login": {
            "version": "1.2.1",
            "provider": "wx65ee288601bdd887"
        }
    }
}

在uniapp的manifest.json文件中引入官方的微信登录插件。

3、调用uni.login方法

uni.login({
    provider: 'weixin',
    success: function (res) {
        var code = res.code;
    //通过oauth2接口获取用户信息 
        uni.getUserInfo({
            provider: 'weixin',
            success: function (infoRes) {
                var nickName = infoRes.userInfo.nickName;
            }
        });
    }
});

调用uni.login方法，provider参数传入weixin，获取微信code。之后通过uni.getUserInfo方法，传入provider参数，获取用户信息。

三、微信小程序授权登录注意事项

1、授权登录需要https支持

微信小程序规定，授权登录必须在HTTPS安全协议下才能使用，所以在开发过程中必须确保使用的服务器为HTTPS协议。

2、用户授权需要用户允许

在调用uni.getUserInfo方法获取用户信息时，需要用户授权允许获取用户信息，否则会获取不到用户信息。

3、获取信息需要小程序授权

在uniapp中，获取用户信息需要小程序授权。（微信小程序授权获取用户信息文档地址）

四、代码示例

1、manifest.json中引入微信登录插件

{
    "plugins": {
        "login": {
            "version": "1.2.1",
            "provider": "wx65ee288601bdd887"
        }
    }
}

2、uni.login方法调用

uni.login({
    provider: 'weixin',
    success: function (res) {
        var code = res.code;
    //通过oauth2接口获取用户信息 
        uni.getUserInfo({
            provider: 'weixin',
            success: function (infoRes) {
                var nickName = infoRes.userInfo.nickName;
            }
        });
    }
});

3、获取用户信息授权

在pages/index/index.vue中，调用uni.getUserInfo方法，需要小程序授权获取用户信息。

获取用户信息


export default {
  methods: {
    getUserInfo() {
      uni.getUserInfo({
        provider: 'weixin',
        success: function (infoRes) {
          console.log('userInfo', infoRes.userInfo);
        },
      });
    },
  },
};