上一篇文章是對需求的分析，本次將逐漸進入代碼階段。本次主要的內容包括服務端wss的部署以及小程序端用戶授權的時序及邏輯。
wss的配置與部署
微信小程序出於安全考慮，要求所有涉及到網絡的操作，必須使用安全的網絡請求，如https和wss，卻使用的域名必須備案以及不能帶端口號。詳情請參考微信小程序官方文檔
雖然在開發的過程中，微信提供的開發者工具可以忽略https和wss的校驗，但程序上線時，就必須使用https和wss協議，所以，在這里，先來介紹下wss協議的部署。
WSS 是 Web Socket Secure 的簡稱, 它是 WebSocket 的加密版本. 我們知道 WebSocket 中的數據是不加密的, 但是不加密的數據很容易被別有用心的人竊取, 因此為了保護數據安全, 人們將 WebSocket 與 SSL 結合, 實現了安全的 WebSocket 通信, 即 WebSocket Secure.
所以說 WSS 是使用 SSL 進行加密了的 WebSocket 通信技術.
因為我們的對戰答題功能對及時性要求比較高，傳統的http無法滿足要求，所以，我們使用WebSocket作為客戶端與服務端，客戶端與客戶端之間的通訊。
要使用wss首先我們需要購買個域名證書，現在騰訊雲和阿里雲都有提供免費的域名證書。下面我已騰訊雲為例，簡單介紹下域名證書的購買。
進入騰訊雲官網，在頂部導航中，找到雲產品。如下圖所示：
點擊ssl證書管理。進入證書管理頁面，
點擊購買證書，進入下級頁面，選擇免費版
進入下級頁面，填寫證書基本信息
下一步，驗證域名所有權。這里我選擇手動DNS驗證。點擊確認申請。
點擊查看證書詳情，然后根據騰訊雲提供的DNS信息，添加域名解析。
下圖是域名解析填寫的信息（前提是你要有個域名）：
然后，回到騰訊雲，點擊如下圖中的查詢按鈕：
當出現如下圖所示的信息后，稍后幾秒后，即可證書即可申請成功。
申請成功后，刷新證書詳情頁面，如下圖，點擊下載按鈕，將證書下載下來。
將下載后的文件解壓備用。
下面進入WebSocket服務端代碼實現階段。這里我使用.net平台開源的Socket框架SuperSocket。首先打開vs，新建一個控制台應用程序項目。
這里我們通過Nuget的方式引用SuperSocket。如下圖所示：
分別安裝上圖中標注的包。安裝完成后，然后將之前下載的證書拷貝過來。使用之前解壓的文件里的iis文件夾里的證書文件。將iis文件夾中的證書文件拷貝到項目。然后右擊證書文件，選擇屬性，進入屬性設置頁面。
在復制到輸出目錄中，選擇始終復制。
控制台中的代碼：
1 static void Main(string[] args) 2 3 { 4 5 #region 證書配置 6 7 var certConfig = new CertificateConfig(); 8 9 certConfig.FilePath = "ttt.vqicard.com.pfx";//證書路徑 10 11 certConfig.Password = "123123";//證書密碼。申請證書時填寫的密碼。沒填，則此處為空 12 13 certConfig.KeyStorageFlags = X509KeyStorageFlags.UserKeySet; 14 15 certConfig.ClientCertificateRequired = false; 16 17 #endregion 18 19 var ws = new WebSocketServer(); 20 21 var serverConfig = new ServerConfig(); 22 23 serverConfig.Security = "tls"; 24 25 serverConfig.Certificate = certConfig; 26 27 serverConfig.Ip = IPAddress.Any.ToString();//綁定的ip 28 29 serverConfig.Port = 2018;//監聽的端口號。此處填寫默認端口。由於我的服務器的443端口已經被占用， 30 31 //所以，這里使用其他端口。因為微信不支持帶端口的地址，所以，正式部署后，必須設置為443端口。 32 33 ws.NewDataReceived += Ws_NewDataReceived;//接收到新數據的回調 34 35 ws.NewMessageReceived += Ws_NewMessageReceived;//接收到新字符串的回調 36 37 ws.SessionClosed += Ws_SessionClosed;//回話關閉的回調 38 39 ws.NewSessionConnected += Ws_NewSessionConnected;//新用戶接入的回調 40 41 if (ws.Setup(serverConfig)) 42 43 { 44 45 ws.Start(); 46 47 Console.WriteLine("監聽開始"); 48 49 Console.ReadKey(); 50 51 } 52 53 } 54 55 private static void Ws_NewSessionConnected(WebSocketSession session) 56 57 { 58 59 //接收到新連接后，回復消息給客戶端 60 61 session.Send("hello"); 62 63 } 64 65 private static void Ws_SessionClosed(WebSocketSession session, SuperSocket.SocketBase.CloseReason value) 66 67 { 68 69 } 70 71 private static void Ws_NewMessageReceived(WebSocketSession session, string value) 72 73 { 74 75 } 76 77 private static void Ws_NewDataReceived(WebSocketSession session, byte[] value) 78 79 { 80 81 } 82 83 }
代碼編寫完成后，運行。然后編寫小程序端連接WebSocket的代碼。
使用wx.connectSocket接口放回一個SocketTask對象。代碼如下：
1 let task = wx.connectSocket({ 2 3 url: 'wss://ttt.vqicard.com:2018', 4 5 success: function (res) { 6 7 console.log(res) 8 9 } 10 11 })
然后SocketTask.onOpen監聽連接打開事件。
SocketTask.onClose監聽連接關閉事件。
SocketTask.onMessage(CALLBACK)
監聽接收到服務器消息的事件。
通過SocketTask.send方法可以向服務器發送數據。
實例代碼如下：
1 task.onOpen(res => { 2 3 console.log('連接服務器成功') 4 5 }) 6 7 task.onMessage(res => { 8 9 console.log(res) 10 11 })
wss的基本配置到這里就完成了。
微信小程序登錄時序分析
下圖是微信官方提供的小程序的登錄邏輯：
從上圖我們可以大概分析出用戶的小程序端用戶授權登錄的流程與邏輯。
1.小程序端，調用wx.login()獲取code。
2.使用wx.request()將code發送給開發者服務器。
3.開發者服務器使用appid,appsecret，code調用微信提供的接口，獲取當前用戶的session_key以及openid，這里的session_key是微信服務器生成的針對用戶數據加密簽名的密鑰。
4.開發者服務器使用指定的算法生成足夠安全的第三方session。目的是保證session_key的安全性。所以，生成的第三方session應該滿足如下條件：長度足夠長，避免使用時間戳作為隨機參數，設置一定的有效時間，過期即視為不合法。
5.以3rd_session為key，session_key+openid為value，寫入session存儲。目的是，可以通過3rd_session獲取到真實的session_key。
6.將3rd_session返回到小程序端，在小程序端，使用storage存儲到本地。
7.后續使用時，先判斷3rd_session是否存在，如果不存在則重新從第一步開始。
以上為授權的基本流程，實際操作中，可能會比以上分析的麻煩一點，因為可能會涉及到用戶不同意授權。或者以前點過不同意，現在又想點同意的情況。所以，具體的操作，還是通過代碼來理解的比較透徹。
代碼中，有兩個地方是需要給服務器交互的，一個是驗證本地存儲的session是否合法，另一個是通過code換取第三方session。通常情況下，是使用https的方式與服務器交互，相關的代碼在示例中我也寫到。但這個答題項目主要是使用wss的方式與服務端通訊，所以，為了方便代碼的管理，檢測session和換取session的操作我都是用wss的方式，具體的看代碼。下面是小程序的代碼，注釋已經很清楚了，我就不一一解釋了。
1 var wsTask 2 3 //app.js 4 5 App({ 6 7 onLaunch: function () { 8 9 wsTask = wx.connectSocket({ 10 11 url: 'ws://192.168.0.253:2018' 12 13 }) 14 15 this.wsTask = wsTask 16 17 wsTask.onOpen(()=>{ 18 19 console.log('連接服務器成功') 20 21 }) 22 23 wsTask.onMessage(msg=>{ 24 25 var res = JSON.parse(msg.data) 26 27 switch(res.option){ 28 29 case 'checkSession': 30 31 if(!res.status){ 32 33 this.login() 34 35 }else{ 36 37 console.log('登錄成功') 38 39 } 40 41 break 42 43 case 'login': 44 45 if(res.status){ 46 47 wx.setStorage({ 48 49 key: '3rd_session', 50 51 data: res.session 52 53 }) 54 55 console.log('登錄成功') 56 57 } 58 59 break 60 61 } 62 63 }) 64 65 }, 66 67 checkSession: function () { 68 69 //首先檢測登錄狀態是否失效 70 71 wx.checkSession({ 72 73 complete: cr => { 74 75 if (cr.errMsg == 'checkSession:ok') { 76 77 //授權狀態有效，需判斷3rd_session是否存在 78 79 let rd_session = wx.getStorageSync('3rd_session') 80 81 if (rd_session) { 82 83 //第三方session存在 84 85 wsTask.send({ 86 87 data: JSON.stringify({ option:'checkSession',session:rd_session}) 88 89 }) 90 91 return 92 93 //將第三方session發送到服務器，驗證合法性已經是否有效 94 95 wx.request({ 96 97 url: 'checkSessionUrl', 98 99 success: function (res) { 100 101 if (res.status) { 102 103 //根據服務端返回的驗證結果進行判斷，如果status為1，則表示3rdsession合法，且在有效期內。 104 105 } else { 106 107 //session無效 108 109 this.login() 110 111 } 112 113 }, 114 115 fail: function (e) { 116 117 console.error(e);//打印錯誤信息 118 119 } 120 121 }) 122 123 } else { 124 125 //session不存在，則需重新進入授權流程 126 127 this.login() 128 129 } 130 131 } else { 132 133 //授權狀態失效，則需重新進入授權流程 134 135 this.login() 136 137 } 138 139 } 140 141 }) 142 143 }, 144 145 login: function () { 146 147 //檢查用戶是否已同意授權 148 149 wx.authorize({ 150 151 scope: 'scope.userInfo', 152 153 complete: res => { 154 155 //不允許授權 156 157 if (res.errMsg != 'authorize:ok') { 158 159 //則獲取用戶的授權設置 160 161 wx.getSetting({ 162 163 success: r => { 164 165 //未開啟授權 166 167 if (!r.authSetting['scope.userInfo']) { 168 169 //詢問是否開啟授權 170 171 wx.showModal({ 172 173 title: '登錄', 174 175 content: '小程序需要使用您的授權信息，是否繼續？', 176 177 success: res => { 178 179 console.log(res) 180 181 if (res.confirm) { 182 183 //同意開啟授權，則跳轉到設置頁面，由用戶打開授權。用戶打開授權后，由用戶操作，返回小程序，此時可以再onShow方法中再次調用login方法。 184 185 wx.openSetting() 186 187 } 188 189 } 190 191 }) 192 193 } 194 195 } 196 197 }) 198 199 } else { 200 201 //表示已授權，此時，可以調用登錄接口 202 203 wx.login({ 204 205 success: res => { 206 207 if(res.errMsg=='login:ok'){ 208 209 wsTask.send({data:JSON.stringify({option:'login',code:res.code})}) 210 211 return 212 213 wx.request({ 214 215 url: 'loginUrl', 216 217 data:{code:res.code}, 218 219 success:rq=>{ 220 221 //將此處返回的3rdsession保存在storage中，整個授權流程結束 222 223 } 224 225 }) 226 227 } 228 229 } 230 231 }) 232 233 } 234 235 } 236 237 }) 238 239 }, 240 241 onShow: function () { 242 243 this.checkSession() 244 245 }, 246 247 globalData: { 248 249 userInfo: null 250 251 } 252 253 })
服務端的代碼如下：
1 private static void Ws_NewMessageReceived(WebSocketSession session, string value) 2 3 { 4 5 var jobj = JsonConvert.DeserializeObject<JObject>(value); 6 7 var option = jobj.Value<string>("option"); 8 9 switch (option) 10 11 { 12 13 case "checkSession": 14 15 var rdsession = jobj.Value<string>("session"); 16 17 var model = wxUserlist.FirstOrDefault(f => f.MyKey == rdsession); 18 19 session.Send(JsonConvert.SerializeObject(new { option = option, status =model!=null?1:0})); 20 21 break; 22 23 case "login": 24 25 var code = jobj.Value<string>("code"); 26 27 var res = LoginApi.CodeToMySession("你的appid", "你的appsecret", code); 28 29 wxUserlist.Add(res); 30 31 session.Send(JsonConvert.SerializeObject(new { status=1,session=res.MyKey,option=option})); 32 33 break; 34 35 } 36 37 } 38 39
如需源碼，請掃描二維碼，關注微信公眾號。回復：對戰二
