在咱們開發小程序的時候,須要經過受權獲取用戶的信息。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 }