## 獲取用戶信息
簡略的用戶信息是開放的,可以直接得到而無需用戶授權(使用open-data組件);
詳細的用戶信息需要用戶授權才能獲取 **(但明文內容不包含 openId 和 unionId 這些敏感數據)**;
想要得到微信用戶的 `openid/unionId` 來與我們系統做 **OAuth第三方登錄認證服務** 則需要后端服務器的支持(數據簽名校驗、數據解密、提供OAuth服務)。
* * * * *
### 用戶信息獲取流程解析
這里要獲取的是用戶的完整信息,包含openid的信息,其目的在于獲取微信提供的用戶身份標識,為我們的系統建立小程序內的用戶體系(OAuth)。
1. 通過 wx.login 登錄流程獲取會話密鑰 session_key,會話密鑰是對用戶數據進行加密簽名的密鑰。(**臨時用戶數據密匙**)
2. 引導用戶授權后,調用 wx.getUserInfo() 得到加密信息
3. 通過前兩步得到的信息,就可以在服務端解密出用戶的身份標識,從而完成OAuth操作
>[tip] 為了防止被數據篡改(對,微信客戶端也可能被劫持,只要是客戶端就不能被信任,只要是外來數據都不能信任,服務器只信自己),微信會對明文數據進行簽名,我們要在服務端對數據包進行簽名校驗,確保數據的完整性與合法性。
>
> 另外,為了數據不被篡改,開發者不能把session_key存放在服務器以外的環境,不能泄露,只能像私有密匙一樣存放在服務器,不能對外透明傳輸。
* * * * *
### 涉及接口
1. [wx.getSetting()](https://developers.weixin.qq.com/miniprogram/dev/api/setting.html#wxgetsettingobject):獲取用戶的當前設置,如用戶授權情況
2. [wx.getUserInfo()](https://developers.weixin.qq.com/miniprogram/dev/api/open.html#wxgetuserinfoobject):用戶授權后獲取用戶信息,但明文內容不包含 openid 等敏感信息
3. [button.open-type.getUserInfo](https://developers.weixin.qq.com/miniprogram/dev/component/button.html):按鈕組件,未授權時,讓用戶主動點擊它彈出授權詢問框。
5. [wx.login()](https://developers.weixin.qq.com/miniprogram/dev/api/api-login.html):調用接口wx.login() 獲取 臨時登錄憑證 `code` ,然后在服務器上利用它來換取 用戶會話key `session_key`
6. [wx.checkSession](https://developers.weixin.qq.com/miniprogram/dev/api/signature.html#wxchecksessionobject)(校驗用戶當前session_key是否有效。)
~~~
會話密鑰session_key有效性
開發者如果遇到因為session_key不正確而校驗簽名失敗或解密失敗,請關注下面幾個與session_key有關的注意事項。
wx.login()調用時,用戶的session_key會被更新而致使舊session_key失效。開發者應該在明確需要重新登錄時才調用wx.login(),及時通過登錄憑證校驗接口更新服務器存儲的session_key。
微信不會把session_key的有效期告知開發者。我們會根據用戶使用小程序的行為對session_key進行續期。用戶越頻繁使用小程序,session_key有效期越長。
開發者在session_key失效時,可以通過重新執行登錄流程獲取有效的session_key。使用接口wx.checkSession()可以校驗session_key是否有效,從而避免小程序反復執行登錄流程。
**當開發者在實現自定義登錄態時,可以考慮以session_key有效期作為自身登錄態有效期,也可以實現自定義的時效性策略。**
~~~
* * * * *
### 細節
通過 `wx.getSetting` 獲取環境信息,查看當前環境是否授權過(`res.authSetting['scope.userInfo']`)。
首次授權要 使用 button 組件,讓用戶點擊按鈕才能彈出授權詢問框,直接 `wx.getUserInfo()` 無法彈出授權詢問框,將直接報錯。
點擊button組件,彈出授權詢問框,用戶同意授權后回調的detail數據與 `wx.getUserInfo()` 返回的一致 ,不過要注意,用戶拒絕授權也是會觸發 `bindGetUserInfo` 方法的,所以要做判斷:
```
bindGetUserInfo: function(e) {
console.log('index > getUserInfo() ', e)
if (e.detail.errMsg == 'getUserInfo:ok') {
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
} else {
console.log('用戶拒絕授權!');
}
}
```
不過可以使用 open-data 組件 展示用戶基本信息。但只有比較簡略的信息,沒有 `openid` ,要想獲得 `openid` 來與我們系統做auth登錄就需要用戶授權了。
* * * * *
### 擴展
[小程序與小游戲獲取用戶信息接口調整,請開發者注意升級。 | 微信公眾平臺 開發者社區](https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=759743736&docid=0000a26e1aca6012e896a517556c01&devtools=1&idescene=3)(代碼無法再調出授權詢問框了)
[表單組件 · 小程序](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)
[用戶信息 · 小程序](https://developers.weixin.qq.com/miniprogram/dev/api/open.html)
[開放接口 · 小程序](https://developers.weixin.qq.com/miniprogram/dev/api/api-login.html)
[wx.checkSession · 小程序](https://developers.weixin.qq.com/miniprogram/dev/api/signature.html#wxchecksessionobject)(數據簽名校驗 / 數據解密算法)
> 接口如果涉及敏感數據(如wx.getUserInfo當中的 openId 和unionId ),接口的明文內容將不包含這些敏感數據。開發者如需要獲取敏感數據,需要對接口返回的 **加密數據( encryptedData )** 進行對稱解密。
[健壯高效的小程序登錄方案](https://mp.weixin.qq.com/s/Ee592wEYBIW6reiCIa4sXg)
> 加入免并發邏輯:若登錄流程正在進行,則不重復觸發登錄流程,而是加入當前流程的監聽隊列,待登錄結束時再一并處理。這樣,任一時刻最多只有一個登錄流程正在進行。
* * * * *
last update:2018-8-13 15:06:53
- 開始
- 微信小程序
- 獲取用戶信息
- 記錄
- HTML
- HTML5
- 文檔根節點
- 你真的了解script標簽嗎?
- 文檔結構
- 已經落后的技術
- form表單
- html實體
- CSS
- css優先級 & 設計模式
- 如何編寫高效的 CSS 選擇符
- 筆記
- 小計
- flex布局
- 細節體驗
- Flex
- Grid
- tailwindcss
- JavaScript
- javascript物語
- js函數定義
- js中的數組對象
- js的json解析
- js中數組的操作
- js事件冒泡
- js中的判斷
- js語句聲明會提前
- cookie操作
- 關于javascript你要知道的
- 關于innerHTML的試驗
- js引擎與GUI引擎是互斥的
- 如何安全的修改對象
- 當渲染引擎遇上強迫癥
- 不要使用連相等
- 修改數組-對象
- 算法-函數
- 事件探析
- 事件循環
- js事件循環中的上下文和作用域的經典問題
- Promise
- 最佳實踐
- 頁面遮罩加載效果
- 網站靜態文件之思考
- 圖片加載問題
- 路由及轉場解決方案
- web app
- 寫一個頁面路由轉場的管理工具
- 談編程
- 技術/思想的斗爭
- 前端技術選型分析
- 我想放點html模板代碼
- 開發自適應網頁
- 后臺前端項目的開發
- 網站PC版和移動版的模板方案
- 前后端分離
- 淘寶前后端分離
- 前后端分離的思考與實踐(一)
- 前后端分離的思考與實踐(二)
- 前后端分離的思考與實踐(三)
- 前后端分離的思考與實踐(四)
- 前后端分離的思考與實踐(五)
- 前后端分離的思考與實踐(六)
- 動畫
- 開發小技巧
- Axios
- 屏幕適配
- 理論基礎
- 思考
- flexible.js原理
- 實驗
- rem的坑,為什么要設置成百分比,為什么又是62.5%
- 為什么以一個標準適配的,其它寬度也能同等適配
- 自適應、響應式、彈性布局、屏幕適配
- 適配:都用百分比?
- 番外篇
- 給你看看0.5px長什么樣?
- 用事實證明viewport scale縮放不會改變rem元素的大小
- 為什么PC端頁面縮放不會影響rem元素
- 究竟以哪個為設備獨立像素
- PC到移動端初試
- 深入理解px
- 響應式之柵格系統
- 深入理解px(二)
- 一篇搞定移動端適配
- flex版柵格布局
- 其他
- 瀏覽器加載初探
- 警惕你的開發工具
- JS模塊化
- webpack
- 打包原理
- 異步加載
- gulp
- 命名規范
- 接口開發
- sea.js學習
- require.js學習
- react學習
- react筆記
- vue學習
- vue3
- 工具、技巧
- 臨時筆記
- 怎么維護好開源項目
- 待辦
- 對前端MVV*C框架的思考
- jquery問題
- 臨時
- 好文
- 節流防抖