uni-app?微信小程序授權(quán)登錄的實(shí)現(xiàn)步驟

更新時間：2022年01月04日 08:36:57 作者：gblfy

本文主要介紹了uni-app?微信小程序授權(quán)登錄的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、appID相關(guān)申請和配置

1. appid獲取方式

登錄微信公眾平臺

官網(wǎng)鏈接：https://mp.weixin.qq.com/

第一次需要小伙伴們點(diǎn)擊注冊按鈕，進(jìn)行注冊，如果有賬號，直接掃描登錄即可

在這里插入圖片描述

官網(wǎng)小程序鏈接：

在這里插入圖片描述

2. appID配置

在manifest.json中輸入申請的微信小程序id

在這里插入圖片描述

二、獲取用戶基礎(chǔ)數(shù)據(jù)

這里給小伙伴們演示二種api

2.1. 獲取用戶信息

可以使用uni.getUserProfile請求用戶授權(quán)獲取用戶信息，也可以使用uni.getUserInfo獲取

在這里插入圖片描述

授權(quán)成功后獲取到的用戶信息在userInfo中：

在這里插入圖片描述

頁面部分：

  <button class="login-btn" type="primary" @click="getUserInfo">
        微信用戶一鍵登錄
      </button>

js部分：

 methods: {
    getUserInfo() {
      uni.getUserInfo({
        provider: 'weixin',
        success: (res) => {
          console.log('getUserInfo', res);
        },
      });
    },
   }

獲取的用戶基礎(chǔ)數(shù)據(jù)（無openid=》微信用戶唯一標(biāo)識）

在這里插入圖片描述

2.2. 獲取用戶信息2

可以使用uni.getUserInfo請求用戶授權(quán)獲取用戶信息

頁面一樣，js部分：

   getUserInfo() {
      uni.getUserProfile({
        desc: '登錄后可同步數(shù)據(jù)',
        lang: 'zh_CN',
        success: (res) => {
          console.log('getUserProfile', res);
        },
      });
    },

獲取的用戶基礎(chǔ)數(shù)據(jù)（無openid=》微信用戶唯一標(biāo)識）

在這里插入圖片描述

總結(jié)：uni.getUserProfile和uni.getUserInfo 二個api獲取的用戶數(shù)據(jù)基本一樣，都無openid=》微信用戶唯一標(biāo)識。

三、調(diào)用登錄api

3.1. 登錄api

使用uni.login方法，provider參數(shù)輸入’weixin’,成功的返回值中如果errMsg=“login:ok” 代表成功，
微信小程序端會返回一個code字符串

在這里插入圖片描述

3.2. 案例代碼

      uni.login({
            provider: 'weixin',
            success: (res) => {
              console.log('res-login', res);
              this.code = res.code;
              console.log('code', res.code);
              if (res.errMsg == 'login:ok') {
              //TODO 獲取code 攜帶code參數(shù)調(diào)用后端接口}

四、獲取唯一標(biāo)識信息

4.1. 官網(wǎng)文檔

官網(wǎng)文檔
使用獲取到的code請求微信登錄接口，獲取 openid 和 session_key

在這里插入圖片描述

4.2. 接口簡述

在這里插入圖片描述

請求方式:GET
APPID：小程序唯一標(biāo)識，上面有獲取方式
SECRET：小程序唯一標(biāo)識的秘鑰，上面參考APPID獲取方式，就在他的下面
JSCODE：這個前端調(diào)用 uni.login獲取

GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

在這里插入圖片描述

五、綁定用戶實(shí)現(xiàn)登錄

獲取到微信用戶的唯一id后，就可以綁定至自己系統(tǒng)中的用戶，我的做法是在用戶表中加入weixinId字段，跳轉(zhuǎn)至自己的用戶綁定界面，如果用戶選擇綁定微信，則更新該行用戶數(shù)據(jù)的weixinId。下次用戶使用微信登錄時，如果通過openId能夠查詢到一條用戶數(shù)據(jù)，說明已經(jīng)綁定，則登錄該用戶

5.1. 代碼案例（未封裝）

前端部分：

 /**
     *
     * 獲取用戶信息
     */
    getUserInfo() {
      // 展示加載框
      uni.showLoading({
        title: '加載中',
      });
      uni.getUserProfile({
        desc: '登錄后可同步數(shù)據(jù)',
        success: async (obj) => {
          console.log('obj', obj);
          // 調(diào)用 action ，請求登錄接口
          // await this.login(obj);
          uni.login({
            provider: 'weixin',
            success: (res) => {
              console.log('res-login', res);
              this.code = res.code;
              console.log('code', res.code);
              if (res.errMsg == 'login:ok') {
                uni
                  .request({
                    url:
                      'http://127.0.0.1:8080/wxh5/wx/user/' +
                      'wx55822xxxx75e422' +
                      '/login/',
                    data: {
                      code: this.code,
                    },
                  })
                  .then((res) => {
                  //獲取到 openid 和 session_k后，自己的邏輯
                    console.log('授權(quán)登錄', res[1].data);
                    console.log(res[1].data.openid);
                    console.log(res[1].data.session_key);
                    // DoSomeThing.................
                  });
                console.log('res', res);
              }
            },
          });
        },
        fail: () => {
          uni.showToast({
            title: '授權(quán)已取消',
            icon: 'error',
            mask: true,
          });
        },
        complete: () => {
          // 隱藏loading
          uni.hideLoading();
        },
      });
    },

后端部分

   @GetMapping("/login")
    public String login(@PathVariable String appid, String code) {
        if (StringUtils.isBlank(code)) {
            return "empty jscode";
        }

        final WxMaService wxService = WxMaConfiguration.getMaService(appid);

        try {
            WxMaJscode2SessionResult session = wxService.getUserService().getSessionInfo(code);
            this.logger.info(session.getSessionKey());
            this.logger.info(session.getOpenid());
            //TODO 可以增加自己的邏輯，關(guān)聯(lián)業(yè)務(wù)相關(guān)數(shù)據(jù)
            return JsonUtils.toJson(session);
        } catch (WxErrorException e) {
            this.logger.error(e.getMessage(), e);
            return e.toString();
        }
    }

5.2. 代碼案例（封裝）

  /**
     *
     * 獲取用戶信息
     */
    getUserInfo() {
      // 展示加載框
      uni.showLoading({
        title: '加載中',
      });
      uni.getUserProfile({
        desc: '登錄后可同步數(shù)據(jù)',
        success: async (obj) => {
          // this.userInfo = obj.userInfo;
          // 調(diào)用 action ，請求登錄接口
          uni.login({
            provider: 'weixin',
            success: async (res) => {
              this.code = res.code;
              // console.log('登錄獲取code', res.code);
              if (res.errMsg == 'login:ok') {
                await this.loginAuth({
                  userProfile: obj,
                  appid: 'wx558xxxxxxxxxxxxxxx2',
                  code: this.code,
                });
              }
            },
          });
        },
        fail: () => {
          uni.showToast({
            title: '授權(quán)已取消',
            icon: 'error',
            mask: true,
          });
        },
        complete: () => {
          // 隱藏loading
          uni.hideLoading();
        },
      });
    },
  },

user.js

/**
 * 微信用戶授權(quán)登錄，攜帶appid和code參數(shù)，調(diào)用后端接口獲取Openid
 */
export function loginAuth(data) {
  return request({
    url: '/wx/user/' + data.appid + '/login/',
    data: {
      code: data.code,
    },
  });
}

vuex user模塊（user.js）

  // 微信用戶授權(quán)登錄，攜帶appid和code參數(shù)，調(diào)用后端接口獲取Openid
    async loginAuth(context, data) {
      console.log('data', data);
      const userInfo = data.userProfile;
      const { content: res } = await loginAuth({
        appid: data.appid,
        code: data.code,
      });

      // 解析后端傳送過來的json對象
      const userAuthInfo = JSON.parse(res);
      const openid = userAuthInfo.openid;
      // console.log('sessionKey', userAuthInfo.sessionKey);
      console.log('openid', openid);

      // 保存到vuex中，通過commit
      this.commit('user/setOpenid', userAuthInfo.openid);
      this.commit('user/setUserInfo', JSON.parse(userInfo.rawData));
    },

在這里插入圖片描述