微信小程序授權獲取用戶詳細信息openid的實例詳解

2019-11-19 15:22:32

字體：大中小

來源：轉載

供稿：網友

小程序獲取用戶的頭像昵稱openid之類

第一種使用wx.getUserInfo直接獲取微信頭像，昵稱

wx.getUserInfo({   success: function (res) {   that.setData({     nickName: res.userInfo.nickName,     avatarUrl: res.userInfo.avatarUrl,   })   },})

第二種

我們在使用小程序wx.login API進行登錄的時候，直接使用wx.getUserInfo是不能獲取更多的信息的，如微信用戶的openid。
官方提示，需要發送獲取到的code進行請求到微信的后端API，進行用戶解密之類的操作才可以獲取，

根據文檔，只需要進行一個get請求到如下地址即可：

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_codeappid和secret在微信小程序后臺可以看到，js_code為使用wx.login登錄時獲取到的code參數數據，grant_type這個不用改動。

js文件

var openId = (wx.getStorageSync('openId'))    if (openId) {     wx.getUserInfo({      success: function (res) {       that.setData({        nickName: res.userInfo.nickName,        avatarUrl: res.userInfo.avatarUrl,       })      },      fail: function () {       // fail       console.log("獲取失敗！")      },      complete: function () {       // complete       console.log("獲取用戶信息完成！")      }     })    } else {     wx.login({      success: function (res) {       console.log(res.code)       if (res.code) {        wx.getUserInfo({         withCredentials: true,         success: function (res_user) {          wx.request({           //后臺接口地址           url: 'https://....com/wx/login',           data: {            code: res.code,            encryptedData: res_user.encryptedData,            iv: res_user.iv           },           method: 'GET',           header: {            'content-type': 'application/json'           },           success: function (res) {            // this.globalData.userInfo = JSON.parse(res.data);            that.setData({             nickName: res.data.nickName,             avatarUrl: res.data.avatarUrl,            })            wx.setStorageSync('openId', res.data.openId);           }          })         }, fail: function () {          wx.showModal({           title: '警告通知',           content: '您點擊了拒絕授權,將無法正常顯示個人信息,點擊確定重新獲取授權。',           success: function (res) {            if (res.confirm) {             wx.openSetting({              success: (res) => {               if (res.authSetting["scope.userInfo"]) {////如果用戶重新同意了授權登錄                wx.login({                 success: function (res_login) {                  if (res_login.code) {                   wx.getUserInfo({                    withCredentials: true,                    success: function (res_user) {                     wx.request({                      url: 'https://....com/wx/login',                      data: {                       code: res_login.code,                       encryptedData: res_user.encryptedData,                       iv: res_user.iv                      },                      method: 'GET',                      header: {                       'content-type': 'application/json'                      },                      success: function (res) {                       that.setData({                        nickName: res.data.nickName,                        avatarUrl: res.data.avatarUrl,                       })                       wx.setStorageSync('openId', res.data.openId);                      }                     })                    }                   })                  }                 }                });               }              }, fail: function (res) {              }             })            }           }          })         }, complete: function (res) {         }        })       }      }     })    } }, globalData: {    userInfo: null }

后臺是php 框架是laravel5.4版本

官方文檔：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/signature.html

微信官方提供了多種編程語言的示例代碼（點擊下載）。每種語言類型的接口名字均一致。調用方式可以參照示例。

下載之后在php文件中引入：

<?phpnamespace App/Http/Controllers/Admin;use Illuminate/Http/Request;use App/Http/Controllers/Controller;use App/Models/User;use App/Models/Wechatuser;include_once  app_path('/Http/Controllers/Admin/PHP/wxBizDataCrypt.php'); // 獲取微信用戶信息  public function getWxLogin(Request $request)  {   // require_once ROOTPATH . "./PHP/wxBizDataCrypt.php";    $code  =  $request->get('code');    $encryptedData  =  $request->get('encryptedData');    $iv  =  $request->get('iv');    $appid = "***" ;    $secret =  "***";    $URL = "https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=$code&grant_type=authorization_code";    $apiData=file_get_contents($URL);    // var_dump($code,'wwwwwwww',$apiData['errscode']);    //   $ch = curl_init();    // 　　curl_setopt($ch, CURLOPT_URL, $URL);    // 　　curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);    // 　　curl_setopt($ch, CURLOPT_HEADER, 0);    // 　　$output = curl_exec($ch);    // 　　curl_close($ch)    if(!isset($apiData['errcode'])){      $sessionKey = json_decode($apiData)->session_key;      $userifo = new /WXBizDataCrypt($appid, $sessionKey);      $errCode = $userifo->decryptData($encryptedData, $iv, $data );      if ($errCode == 0) {        return ($data . "/n");      } else {        return false;      }    }  }

官方文檔的登錄流程圖，整個登錄流程基本如下圖所示：