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);
        },
      });
    },
  },
};