簡(jiǎn)介：
微信登陸山橄，在新建一個(gè)微信小程序Hello World項(xiàng)目的時(shí)候，就可以看到項(xiàng)目中出現(xiàn)了我們的微信頭像，其實(shí)這個(gè)Hello World項(xiàng)目晌该，就有一個(gè)簡(jiǎn)化版的微信登陸。
小程序登錄
新建一個(gè)Hello World項(xiàng)目绿渣，找到app.js文件打開(kāi)朝群，代碼如下：
app.js：
App({
??onLaunch: function () {
????//調(diào)用API從本地緩存中獲取數(shù)據(jù)
????var logs = wx.getStorageSync('logs') || []
????logs.unshift(Date.now())
????wx.setStorageSync('logs', logs)
??},
??getUserInfo:function(cb){
????var that = this
????if(this.globalData.userInfo){
??????typeof cb == "function" && cb(this.globalData.userInfo)
????}else{
???//調(diào)用登錄接口
??wx.login({
????????success: function () {
??????????wx.getUserInfo({
????????????success: function (res) {
??????????????that.globalData.userInfo = res.userInfo
??????????????typeof cb == "function" && cb(that.globalData.userInfo)
????????????}
??????????})
????????}
??????})
????}
??},
??globalData:{
????userInfo:null
??}
})
加粗標(biāo)注的部分就是登陸部分
下面詳細(xì)介紹微信小程序的微信登陸
第一步：獲取登陸態(tài)code
微信登陸部分，首先需要使用微信小程序的api——?wx.login(OBJECT)來(lái)獲取登錄態(tài)這個(gè)登陸態(tài)的作用是為了獲取用戶的openid（用戶的唯一標(biāo)識(shí)）?
小程序登錄
相關(guān)鏈接：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject
示例代碼
小程序登錄示例代碼
第二步：將登陸態(tài)code發(fā)送給第三方服務(wù)器（即自家的服務(wù)器）
上面通過(guò)wx.login(OBJECT)獲取了登錄態(tài)后中符，接下來(lái)就是將code發(fā)送給第三方服務(wù)器?我們先看看微信登陸的序時(shí)圖：序時(shí)圖所示姜胖，通過(guò)wx.login()獲取了code后，就使用wx.request()發(fā)送code給第三方服務(wù)器（也就是自家的服務(wù)器 ）
微信小程序中生成3rd_session
3rd_session就是后臺(tái)服務(wù)器生成的隨機(jī)數(shù)淀散。后臺(tái)服務(wù)器可以調(diào)用head -n 80 /dev/urandom | tr -dc A-Za-z0-9 | head -c 168這樣的shell 命令獲取168位的隨機(jī)字符串右莱。
示例：官方示例
把wx.login獲取到的res.code返回值蚜锨，直接以參數(shù)的形式，發(fā)起網(wǎng)絡(luò)請(qǐng)求發(fā)送登陸態(tài)給自家服務(wù)器
js：
//調(diào)用登錄
????wx.login({
??????success: function(res) {
?????? console.log(res);
????????if (res.code) {
??????????//就是在這里發(fā)起網(wǎng)絡(luò)請(qǐng)求隧出，使用wx.request()踏志，將登陸態(tài)發(fā)送給自家的服務(wù)器上
??????????wx.request({
????????????url: 'https://test.com/onLogin',
????????????data: {
??????????????code: res.code
????????????},
????????????method: 'POST', ?
??????header: {'content-type': 'application/json'},
????????????success: function(data){
????????????}
??????????})
????????} else {
??????????console.log('獲取用戶登錄態(tài)失敗胀瞪！' + res.errMsg)
????????}
??????},
??fail: function(){
????console.log("啟用wx.login函數(shù)针余，失敗凄诞！");
??},
??complete:function(){
????console.log("已啟用wx.login函數(shù)");
??}
});
第三步：code 換取 session_key和openid
登陸態(tài)發(fā)送給自家的服務(wù)器后圆雁，接下來(lái)就是后臺(tái)進(jìn)行操作。
下面我把 自家的服務(wù)器簡(jiǎn)稱(chēng) 后臺(tái)帆谍，方便閱讀（你知道我說(shuō)的后臺(tái)指的是我們自己的服務(wù)器伪朽，而不是微信的服務(wù)器就行）。
后臺(tái)接收到登陸態(tài)后汛蝙，由后臺(tái)發(fā)起網(wǎng)絡(luò)請(qǐng)求給微信服務(wù)器
備注：后臺(tái)沒(méi)有語(yǔ)言要求Ａ忆獭！任意一門(mén)后臺(tái)語(yǔ)言都可以窖剑。
接口地址：
GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
code 換取 session_key和openid
備注：
appid和secret登陸微信公眾平臺(tái)坚洽，打開(kāi)設(shè)置——開(kāi)發(fā)設(shè)置，即可獲任魍痢（app secret需要生成）讶舰。
獲取appid和密鑰
備注：
grant_type是固定寫(xiě)法，值為authorization_code即可需了。
第四步：生成3rd_session返回給客戶端
第四步也是做后臺(tái)中的操作Ｌ纭！
?此時(shí)把微信服務(wù)器返回的session_key 和 openid保留在后臺(tái)中肋乍，由于考慮安全性的問(wèn)題鹅颊，不要直接返回給客戶端。?
然后用操作系統(tǒng)提供的隨機(jī)數(shù)算法生成一個(gè)新的session住拭，微信把它叫做3rd_session挪略。3rd_session就是后臺(tái)服務(wù)器生成的隨機(jī)數(shù)。后臺(tái)服務(wù)器可以調(diào)用head -n 80 /dev/urandom | tr -dc A-Za-z0-9 | head -c 168這樣的shell 命令獲取168位的隨機(jī)字符串滔岳。（注意：這個(gè)session要有足夠的長(zhǎng)度，建議有2^128種組合挽牢，即長(zhǎng)度為16B谱煤；設(shè)置一定的時(shí)效性）
?以3rd_session為名作為key，返回的session_key和openid作為值禽拔，保存在后臺(tái)上刘离。?
最后只需要在后臺(tái)室叉，返回一個(gè)3rd_session給客戶端即可。
以后客戶端部分硫惕，就使用這個(gè)3rd_session發(fā)送給后臺(tái)茧痕，后臺(tái)接收3rd_session獲取對(duì)應(yīng)的session_key和openid，再通過(guò)session_key和openid判斷對(duì)應(yīng)的用戶返回該用戶相關(guān)的數(shù)據(jù)??
備注：小程序用這種方法來(lái)代替瀏覽器自身發(fā)送的cookie恼除，因?yàn)閣eb的做法是服務(wù)器A會(huì)保存起訪問(wèn)登錄接口的這個(gè)cookie到session中踪旷，當(dāng)你再次訪問(wèn)其他接口的時(shí)候，服務(wù)器A首先會(huì)判斷這個(gè)session豁辉，是否是之間的cookie從而知道是不是對(duì)應(yīng)的用戶令野。（http協(xié)議是一種短鏈接的關(guān)系，其特點(diǎn)是客戶端發(fā)起請(qǐng)求鏈接到服務(wù)端徽级，服務(wù)端返回?cái)?shù)據(jù)气破，鏈接斷開(kāi)！因此之間是不會(huì)有任何數(shù)據(jù)的儲(chǔ)存餐抢。）
示例：接上示例
js：
????wx.login({
??????success: function(res) {
?????? console.log(res);
????????if (res.code) {
??????????wx.request({
????????????url: 'https://test.com/onLogin',
????????????data: {
??????????????code: res.code
????????????},
????????????method: 'POST', ?
?????? header: {'content-type': 'application/json'},
// 在發(fā)送請(qǐng)求成功的部分现使，返回的數(shù)據(jù)是后臺(tái)返回的3rd_session
????????????success: function(data){
console.log(data)
????????????}
??????????})
????????} else {
??????????console.log('獲取用戶登錄態(tài)失敗旷痕！' + res.errMsg)
????????}
??????},
??fail: function(){
????console.log("啟用wx.login函數(shù)碳锈，失敗苦蒿！");
??},
??complete:function(){
????console.log("已啟用wx.login函數(shù)");
??}
});
PS：
要是閱讀到這里殴胧，有不明之處，請(qǐng)叫上后臺(tái)的小伙伴一起過(guò)來(lái)閱讀這篇文章
第三步佩迟，和第四步团滥，要交給后臺(tái)的同事去處理！１ㄇ俊灸姊！
第五步：客戶端保存3rd_session
回到客戶端的工作了。
從第四步后臺(tái)返回的3rd_session后秉溉，需要將3rd_session存入緩存中力惯。
小程序提供了保存到本地緩存的api，使用非常簡(jiǎn)單召嘶。
（1）wx.setStorage(OBJECT)
傳入key和data即可父晶。
wx.setStorageapi
示例代碼
（2）wx.setStorageSync(KEY,DATA)
? ? 同上用法相同
第六步：獲取用戶信息
wx.getUserInfo
object.success 回調(diào)函數(shù)
相關(guān)連接：獲取用戶信息
示例：接上示例
js：
????wx.login({
??????success: function(res) {
?????? console.log(res);
????????if (res.code) {
??????????wx.request({
????????????url: 'https://test.com/onLogin',
????????????data: {
??????????????code: res.code
????????????},
????????????method: 'POST', ?
?????? header: {'content-type': 'application/json'},
????????????success: function(data){
console.log(data)
????????????}
??????????})
??????????// 使用wx.getUserInfo獲取用戶信息
??wx.getUserInfo({
????????success: function (res) {
????????????utils.log(res);
????????},
fail:function(){
console.log("啟用app.getUserInfo函數(shù)，失斉甲喝！");
},
complete:function(){
console.log("已啟用app.getUserInfo函數(shù)"); ??
??????});
????????} else {
??????????console.log('獲取用戶登錄態(tài)失敗铛只！' + res.errMsg)
????????}
??????},
??fail: function(){
????console.log("啟用wx.login函數(shù)埠胖，失斂妨铩！");
??},
??complete:function(){
????console.log("已啟用wx.login函數(shù)");
??}
});
userInfo對(duì)象內(nèi)是用戶的信息：
? ? ? ? ? ?avatarUrl:?用戶頭像
? ? ? ? ? ?city:?城市
? ? ? ? ? ?country:?國(guó)家
? ? ? ? ? ?gender:?性別
? ? ? ? ? ?language:?語(yǔ)言
? ? ? ? ? ?nickName:?昵稱(chēng)
? ? ? ? ? ?province:?省份
第七步：登錄態(tài)維護(hù)
第一次寫(xiě)文章有什么不好的地方簡(jiǎn)友們直接提出來(lái)直撤，希望在前端的路上我們一起進(jìn)步非竿，您的支持是我創(chuàng)作的動(dòng)力。謝謝大家Ｄ笔：熘！
