uni-app 微信小程式授權登錄

一、appID相關申請和配置

1. appid獲取方式

登錄微信公眾平臺
官網鏈接：https://mp.weixin.qq.com/
第一次需要小伙伴們點擊注冊按鈕，進行注冊，如果有賬號，直接掃描登錄即可

官網小程式鏈接：

2. appID配置

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

二、獲取用戶基礎資料

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

2.1. 獲取用戶資訊

可以使用uni.getUserProfile請求用戶授權獲取用戶資訊， 也可以使用uni.getUserInfo獲取

授權成功后獲取到的用戶資訊在userInfo中：

• 頁面部分：

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

• js部分：

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

• 獲取的用戶基礎資料（無openid=》微信用戶唯一標識）
  

2.2. 獲取用戶資訊2

可以使用uni.getUserInfo請求用戶授權獲取用戶資訊

• 頁面一樣，js部分：

   getUserInfo() {
      uni.getUserProfile({
        desc: '登錄后可同步資料',
        lang: 'zh_CN',
        success: (res) => {
          console.log('getUserProfile', res);
        },
      });
    },

• 獲取的用戶基礎資料（無openid=》微信用戶唯一標識）
  
  總結：uni.getUserProfile和uni.getUserInfo 二個api獲取的用戶資料基本一樣，都無openid=》微信用戶唯一標識，

三、呼叫登錄api

3.1. 登錄api

使用uni.login方法，provider引數輸入’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引數呼叫后端介面}

四、獲取唯一標識資訊

4.1. 官網檔案

官網檔案
使用獲取到的code請求微信登錄介面，獲取 openid 和 session_key

4.2. 介面簡述

請求方式:GET
APPID：小程式唯一標識，上面有獲取方式
SECRET：小程式唯一標識的秘鑰，上面參考APPID獲取方式，就在他的下面
JSCODE：這個前端呼叫  uni.login獲取

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

五、系結用戶 實作登錄

獲取到微信用戶的唯一id后，就可以系結至自己系統中的用戶，我的做法是在用戶表中加入weixinId欄位，跳轉至自己的用戶系結界面，如果用戶選擇系結微信，則更新該行用戶資料的weixinId，下次用戶使用微信登錄時，如果通過openId能夠查詢到一條用戶資料，說明已經系結，則登錄該用戶

5.1. 代碼案例（未封裝）

• 前端部分：

 /**
     *
     * 獲取用戶資訊
     */
    getUserInfo() {
      // 展示加載框
      uni.showLoading({
        title: '加載中',
      });
      uni.getUserProfile({
        desc: '登錄后可同步資料',
        success: async (obj) => {
          console.log('obj', obj);
          // 呼叫 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('授權登錄', 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: '授權已取消',
            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 可以增加自己的邏輯，關聯業務相關資料
            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: '登錄后可同步資料',
        success: async (obj) => {
          // this.userInfo = obj.userInfo;
          // 呼叫 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: '授權已取消',
            icon: 'error',
            mask: true,
          });
        },
        complete: () => {
          // 隱藏loading
          uni.hideLoading();
        },
      });
    },
  },

user.js

/**
 * 微信用戶授權登錄，攜帶appid和code引數，呼叫后端介面獲取Openid
 */
export function loginAuth(data) {
  return request({
    url: '/wx/user/' + data.appid + '/login/',
    data: {
      code: data.code,
    },
  });
}

vuex user模塊（user.js）

  // 微信用戶授權登錄，攜帶appid和code引數，呼叫后端介面獲取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));
    },

六、專案開源地址

6.1. 前端

applet-chock-in

6.2. 后端

weixin-java-miniapp