微信受權獲取用戶openId等信息

在咱們開發小程序的時候,須要經過受權獲取用戶的信息。javascript

第一種使用wx.getUserInfo直接獲取微信頭像,暱稱php

// 必須是在用戶已經受權的狀況下調用
wx.getUserInfo({
    success: function(res) {
        var userInfo = res.userInfo
        var nickName = userInfo.nickName
        var avatarUrl = userInfo.avatarUrl
        var gender = userInfo.gender //性別 0:未知、1:男、2:女
        var province = userInfo.province
        var city = userInfo.city
        var country = userInfo.country
    }
})

  

第二種方式使用wx.login()前端

這種方式即將被放棄,目前使用比較多的是的wx.login()。由於直接使用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這個不用改動。java


官方推薦算法

在login獲取到code,而後發送到開發者後端,後端再經過接口去微信後端換取到openid和sessionKey以後,而後把session返回給前端,就已經完成登陸行爲。而login行爲是靜默,沒必要受權的,不會對用戶形成騷擾。getUserInfo只是爲了提供更優質的服務而存在,好比展現頭像暱稱,判斷性別,經過unionId和其餘公衆號上已有的用戶畫像結合起來提供歷史數據。因此沒必要在剛剛進入小程序的時候就強制要求受權。相關代碼以下所示。sql

JS代碼
var userInfo= (wx.getStorageSync('userInfo'))
        if (userInfo) {
          wx.getUserInfo({
            success: function (res) {
              that.setData({
                nickName: res.userInfo.nickName,
                avatarUrl: res.userInfo.avatarUrl,
              })
            },
            fail: function () {
              console.log("獲取失敗!")
            },
            complete: function () {
              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://xxxx.com/wx/login',
                      data: {
                        code: res.code
                      },
                      method: 'GET',
                      header: {
                        'content-type': 'application/json'
                      },
                      success: function (res) {
                        that.setData({
                          userInfo: res.errMsg.userInfo
                        })
                        wx.setStorageSync('userInfo', res.data.userInfo);

                      }
                    })
                  }, 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://xxxx.com/wx/login',
                                            data: {
                                              code: res_login.code
                                             },
                                            method: 'GET',
                                            header: {
                                              'content-type': 'application/json'
                                            },
                                            success: function (res) {
                                              that.setData({
                                                userInfo: res.errMsg.userInfo

                                              })
                                              wx.setStorageSync('userInfo', res.errMsg.userInfo);
                                            }
                                          })
                                        }
                                      })
                                    }
                                  }
                                });
                              }
                            }, fail: function (res) {

                            }
                          })

                        }
                      }
                    })
                  }, complete: function (res) {

                  }
                })
              }
            }
          })

        }
  },
//globalData建議放在app.js,方便統一管理
  globalData: {   
    userInfo: null
  }

  後端代碼thinkphp

因爲個人後端是PHP寫的,用的是thinkphp5框架,框架地址:https://www.kancloud.cn/manual/thinkphp5/118003數據庫

 /**
     * 小程序登陸
     * @return array
     */
    public function login() {

        $code = input('post.code'); //這是從前端傳過來的code
        $userInfo = input('post.userInfo');
        $info = json_decode($userInfo, true);
        $user = $info['userInfo'];
        $memberModel = model('Member');
        $appid = "小程序的appid"; //必定要是小程序的appid,不是微信公衆號的appid
        $secret = "小程序的secret";
        $url = "https://api.weixin.qq.com/sns/jscode2session?appid=". $appid."&secret=".$secret."&js_code=" . $code . "&grant_type=authorization_code";
        //初始化curl
        $ch = curl_init($url);
        //3.設置參數
        curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);//跳過證書驗證
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);  // 從證書中檢查SSL加密算法是否存在
        $res = curl_exec($ch);
        if(curl_errno($ch)){
            var_dump(curl_error($ch));
        }
        $resArr = json_decode($res,1);
        $data = array();
        curl_close($ch);
        $mapData = array();

//這裏我把用戶的信息保存起來,方便下次調用,數據庫結構咱們在下面會介紹
        if (!empty($resArr['openid'])) {
            $res = $memberModel->checkMember($resArr['openid']);
            Log::write('用戶信息:' . $memberModel->getLastSql());
            if ($res) {
                $mapData['userInfo'] = $res;
                $mapData['session_key'] = $resArr['session_key'];
                return $this->resMap(200, $mapData, $mapData);
            } else {
                $data['nickName'] = $user['nickName'];
                $data['avatarUrl'] = $user['avatarUrl'];
                $data['m_province'] = $user['province'];
                $data['m_city'] = $user['city'];
                $data['m_gender'] = $user['gender'];
                $data['m_language'] = $user['language'];
                $data['signature'] = $info['signature'];
                $data['iv'] = $info['iv'];
                $data['m_uuid'] = showUuid();
                $data['m_openid'] = $resArr['openid'];
                $data['m_country'] = $resArr['country'];
                $data['m_ip'] = GetIP();
                $data['m_createtime'] = getDateTime(1);
                $memberModel->addOne($data);
                $mapData['userInfo'] = $data;
                $mapData['session_key'] = $resArr['session_key'];
                return $this->resMap(200, $mapData, $mapData);
            }
        } else {
            return $this->resMap(4002, '登陸失敗', '登陸失敗');
        }
    }

 /**
     * 返回提示信息
     * @param $code string 錯誤碼  4001 空值  4002 格式不正確  4003 長度  4004 提示  200正確放回 ,0失敗
     * @param $msg string 錯誤描述
     * @param $data string 返回值
     * @return array
     */
    public function resMap($code, $msg, $data)
    {
        $map = array();
        $map['errMsg'] = $msg;
        $map['data'] = $data;
        $map['errCode'] = $code;
        return json($map);
    }

  以上就是核心代碼,但願對你們有用。在上面,咱們須要保存用戶的信息,所以咱們須要數據庫表,下面就談到表的設計。json

用戶表的設計小程序

SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `system_member`
-- ----------------------------
DROP TABLE IF EXISTS `system_member`;
CREATE TABLE `system_member` (
  `m_id` INT(11) NOT NULL AUTO_INCREMENT,
  `nickName` VARCHAR(50) DEFAULT NULL COMMENT '用戶暱稱',
  `avatarUrl` VARCHAR(255) DEFAULT NULL COMMENT '頭像',
  `m_province` VARCHAR(40) DEFAULT NULL COMMENT '省份',
  `m_city` VARCHAR(50) DEFAULT NULL COMMENT '城市',
  `m_name` VARCHAR(30) DEFAULT NULL COMMENT '真實姓名',
  `m_gender` TINYINT(1) DEFAULT '3' COMMENT '用戶性別(一、男 二、女 三、未知)',
  `m_createtime` DATETIME DEFAULT NULL COMMENT '建立時間',
  `m_country` VARCHAR(100) DEFAULT NULL COMMENT '國家',
  `m_language` VARCHAR(50) DEFAULT NULL COMMENT '語言',
  `m_openid` VARCHAR(50) DEFAULT NULL COMMENT 'openID',
  `m_ip` VARCHAR(15) DEFAULT NULL COMMENT 'IP',
  `m_mobile` VARCHAR(20) DEFAULT NULL COMMENT '手機號碼',
  `m_uuid` VARCHAR(50) DEFAULT NULL,
  `m_username` VARCHAR(50) DEFAULT NULL COMMENT '用戶名',
  `m_pwd` VARCHAR(50) DEFAULT NULL COMMENT '密碼',
  `session_key` VARCHAR(255) DEFAULT NULL COMMENT '會話密鑰',
  `unionid` VARCHAR(255) DEFAULT NULL COMMENT '用戶在開放平臺的惟一標識符',
  `signature` VARCHAR(255) DEFAULT NULL,
  `iv` VARCHAR(255) DEFAULT NULL,
  `k_id` VARCHAR(50) DEFAULT NULL,
  `k_openid` VARCHAR(80) DEFAULT NULL,
  PRIMARY KEY (`m_id`)
) ENGINE=INNODB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8 COMMENT='獲取用戶小程序信息';

  以上就是獲取用戶信息的完整流程,下面咱們附上一張用戶登陸的流程圖。

若是你們有什麼不明白的地方,能夠加入咱們的微信交流羣:731568857,裏面有不少技術資源。或者關注咱們的微信公衆號。

 

JS代碼var userInfo= (wx.getStorageSync('userInfo'))        if (userInfo) {          wx.getUserInfo({            success: function (res) {              that.setData({                nickName: res.userInfo.nickName,                avatarUrl: res.userInfo.avatarUrl,              })            },            fail: function () {              console.log("獲取失敗!")            },            complete: function () {              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://xxxx.com/wx/login',                      data: {                        code: res.code                      },                      method: 'GET',                      header: {                        'content-type': 'application/json'                      },                      success: function (res) {                        that.setData({                          userInfo: res.errMsg.userInfo                        })                        wx.setStorageSync('userInfo', res.data.userInfo);                      }                    })                  }, 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://xxxx.com/wx/login',                                            data: {                                              code: res_login.code                                             },                                            method: 'GET',                                            header: {                                              'content-type': 'application/json'                                            },                                            success: function (res) {                                              that.setData({                                                userInfo: res.errMsg.userInfo                                              })                                              wx.setStorageSync('userInfo', res.errMsg.userInfo);                                            }                                          })                                        }                                      })                                    }                                  }                                });                              }                            }, fail: function (res) {                            }                          })                        }                      }                    })                  }, complete: function (res) {                  }                })              }            }          })        }  },//globalData建議放在app.js,方便統一管理  globalData: {       userInfo: null  }

相關文章
相關標籤/搜索