微信小程式獲取openid,unionid

weixin_33807284發表於2018-12-25
  • 注意openid並不能作為小程式使用者的唯一標識,不同使用者有可能相同,unionid才是唯一標識,這個引數我們需要後臺去微信繫結小程式後才有。(通過https://api.weixin.qq.com/sns/jscode2session介面返回的引數獲得)

方法一(前端獲取)

注意:雖然前端能拿到openid,但是釋出上線的時候會無法過審,因為出於安全考慮,前端程式碼不允許暴露小程式appId和app secret(祕鑰),所以此種方法不可取。

1、登入憑證校驗,通過 wx.login() 介面獲得臨時登入憑證 code 後傳到開發者伺服器呼叫此介面完成登入流程。更多使用方法詳見 小程式登入

7426607-42521bcb768cfbb0.png
image.png

2、接著訪問 https://api.weixin.qq.com/sns/jscode2session?

wx.login({
    success: function (res) {
        console.log(res)
         if (res.code) {
            console.log('通過login介面的code換取openid');
             wx.request({
               url: 'https://api.weixin.qq.com/sns/jscode2session',
               data: {
                  //填上自己的小程式唯一標識
                 appid: '',
                  //填上自己的小程式的 app secret
                 secret: '',
                 grant_type: 'authorization_code',
                 js_code: res.code
               },
               method: 'GET',
               header: { 'content-type': 'application/json'},
               success: function(openIdRes){
                    console.info("登入成功返回的openId:" + openIdRes.data.openid);
               },
               fail: function(error) {
                   console.info("獲取使用者openId失敗");
                   console.info(error);
               }
            })
          }
        }
    })

方法二(後端獲取)

前面我們說過前端獲取openid的方法,專案上線是無法過審的。現在我們把小程式id和app secret給後臺,讓後臺去請求,然後將返回值通過介面返回給我們,就可以了。另外,我們通過後臺介面返回的引數unionid作為使用者唯一標識

        wx.login({
            success: function (res) {
              console.log(res)
              wx.request({
                url: '後臺通過獲取前端傳的code返回openid的介面地址',
                data: { code: code },
                method: 'POST',
                header: { 'content-type': 'application/json'},
                success: function (res) {
                 if (res.statusCode == 200) {
                   console.log(res.data.result.openid);
                   console.log(res.data.result.unionid);
                 } else {
                   console.log(res.errMsg)
                 }
              },
            })
          }
       })  
7426607-1328fc5e09643f09.png
image.png

這樣,我們就大功告成!!!

相關文章