微信二維碼授權(quán)登錄網(wǎng)站的實現(xiàn)

陳彩云，李鵬，溫武，郭四穩(wěn)

（廣州大學計算機科學與教育軟件學院，廣州 510006）

微信二維碼授權(quán)登錄網(wǎng)站的實現(xiàn)

陳彩云，李鵬，溫武，郭四穩(wěn)

（廣州大學計算機科學與教育軟件學院，廣州 510006）

區(qū)別于常用的用戶名和密碼的登錄方式，采用微信二維碼授權(quán)的登錄只需手機輕輕一掃，即可方便地實現(xiàn)登錄功能。網(wǎng)站開發(fā)者只需在微信注冊一個公眾號或者服務(wù)號，利用微信公眾號的授權(quán)接口，可以實現(xiàn)網(wǎng)站二維碼登錄。給出實現(xiàn)這種登錄功能的基本原理，并給出具體的實現(xiàn)步驟。

微信；公眾號；二維碼

0 引言

隨著微信的廣泛使用，其大力推廣的基于二維碼的登錄方式也得到了廣泛的應(yīng)用，不管是微信號、公眾號、網(wǎng)頁地址還是圖片地址，甚至個人通訊錄名片都可以做成二維碼，通過微信掃一掃功能即可以快速打開、使用、瀏覽和添加。微信本身的網(wǎng)頁版本和電腦版本也都采用了掃描二維碼的方式登錄?；诙S碼的登錄方式非常簡便快捷，因此深受歡迎，幾乎成為一種時尚。

目前，微信沒有將授權(quán)登錄的功能完全開放給普通網(wǎng)站，作為網(wǎng)站開發(fā)者，如何實現(xiàn)掃描二維碼登錄呢？網(wǎng)絡(luò)上一些編程愛好者提出了多種設(shè)想[1]，卻通常未得到實際驗證。筆者比較早接觸微信公眾號項目，在開發(fā)實踐過程中摸索出了具體可行的方案，這種方案是通過微信公眾號提供的接口功能來實現(xiàn)微信授權(quán)登錄，與一些網(wǎng)絡(luò)可循的設(shè)想有類似之處，但思路和技術(shù)細節(jié)不盡相同。本文將以項目中實現(xiàn)的微信二維碼授權(quán)登錄網(wǎng)站功能作為一個開發(fā)案例，詳細講解其過程。

1 微信授權(quán)登錄原理

網(wǎng)站服務(wù)器通過微信公眾號提供的授權(quán)接口（詳情請查看微信文檔：http://mp.weixin.qq.com/wiki/17/c0f3 7d5704f0b64713d5d2c37b468d75.html），生成一個可以獲取微信用戶身份信息的URL，當用戶在電腦端打開網(wǎng)站登錄頁面時，服務(wù)器將該URL的信息傳送給電腦端瀏覽器，并以二維碼的形式展示到網(wǎng)站的登錄頁面上。同時網(wǎng)頁還會啟動一個定時器，通過AJAX周期性地向服務(wù)器詢問是否有用戶掃描二維碼并授權(quán)登錄。

此時，如果有手機用戶使用微信的掃描二維碼功能掃描網(wǎng)頁上的二維碼，便會獲取到如前所述的URL，通過該URL，用戶會首先訪問微信服務(wù)器，并從微信服務(wù)器獲取一個表示用戶身份的唯一標識碼。接著用戶訪問網(wǎng)站服務(wù)器，將微信服務(wù)器提供的唯一標識碼傳遞給網(wǎng)站服務(wù)器，網(wǎng)站服務(wù)器便獲得了用戶的授權(quán)。隨后網(wǎng)站服務(wù)器發(fā)送一個表示授權(quán)成功的頁面顯示到手機上（該頁面需要開發(fā)者自己制作）。網(wǎng)站服務(wù)器獲得用戶的授權(quán)之后會將唯一標識碼發(fā)送給微信服務(wù)器，微信服務(wù)器根據(jù)這個唯一標識碼將用戶的基本信息傳遞給網(wǎng)站服務(wù)器。最后，網(wǎng)站服務(wù)器把獲得的用戶信息通過AJAX傳遞給電腦端網(wǎng)頁，電腦端網(wǎng)頁顯示授權(quán)通過，登錄成功。

2 開發(fā)準備

為了完成這個案例，必須先準備好以下幾個條件：需要一臺網(wǎng)站服務(wù)器（簡稱服務(wù)器）和一個有效域名；已經(jīng)申請一個認證的服務(wù)號（微信公眾號中的一種），或微信提供的開發(fā)者公眾號，并關(guān)聯(lián)到網(wǎng)站服務(wù)器；開發(fā)者需要掌握一種后臺編程語言，本文選用Nodejs語言[2]；此外，開發(fā)者需要掌握基本的HTML[3]，Java-Script[4]，AJAX開發(fā)技術(shù)。

3 具體實現(xiàn)步驟

第一步，生成一個靜態(tài)手機頁面，提示授權(quán)成功。頁面效果如圖1所示。

圖1 授權(quán)成功頁面

第二步，生成帶微信授權(quán)URL的二維碼。本文采用Nodejs+Express+Redis的方案來實現(xiàn)。首先，根據(jù)微信提供的授權(quán)接口，生成如下URL（其中下劃線標識的部分是網(wǎng)站服務(wù)器本身的地址，手機將根據(jù)這個地址去訪問網(wǎng)站服務(wù)器）：https://open.weixin.qq.com/connect/ oauth2/authorize?appid=...&redirect_uri=http%3A%2F% 2Fwww.%E6%8E%88%E6%9D%83.com&response_type= code&scope=snsapi_base&state=farain#wechat_redirect

實現(xiàn)代碼如下：

接著，將生成的URL轉(zhuǎn)換成二維碼。生成二維碼的方式很多，可以在后臺生成圖片，也可以在HTML上動態(tài)生成。本文采用HTML上通過調(diào)用qrcode的js來生成（該js可以通過以下鏈接下載：http://davidshimjs. github.io/qrcodejs/）。

第三步，把二維碼顯示到電腦端登錄網(wǎng)頁上，并啟動AJAX輪詢是否有手機用戶掃描該二維碼。圖2截取了登錄頁面的一部分：

圖2 網(wǎng)站登錄頁面

第四步，如果有用戶利用微信的掃描二維碼功能掃描上一步生成的二維碼，這時手機端的微信軟件會打開第一步生成的授權(quán)成功提示網(wǎng)頁，同時，網(wǎng)站服務(wù)器在后臺獲取了該用戶的個人信息，并將其記錄到某個文件中。此過程中微信授權(quán)的代碼如下：

第五步，后臺頁面的AJAX輪詢到用戶授權(quán)結(jié)果，直接跳轉(zhuǎn)到登錄成功頁面。代碼如下：

4 結(jié)語

本文給出了通過微信掃描二維碼登錄網(wǎng)站的基本代碼實現(xiàn)。為了突出重點，文中代碼只實現(xiàn)了基本功能，若要做到真正實用，還需要做不少優(yōu)化，例如：二維碼有效期的控制（前后端都需要定時刷新）；對已關(guān)注和未關(guān)注公眾號的用戶做不同的處理（未關(guān)注的可以引導用戶先關(guān)注）；手機端的授權(quán)頁面通常需要一個“確定”按鈕，即掃描完二維碼后，用戶可以選擇授權(quán)或者不授權(quán)。本文只起到一個拋磚引玉的作用，希望和互聯(lián)網(wǎng)應(yīng)用開發(fā)的學習者、工作者和愛好者們一起探討，來開發(fā)出更多有趣、實用的應(yīng)用來豐富、方便人們的生活。

[1]http://www.cnblogs.com/loogn/p/3727953.html

[2]BYVoid.Node.js開發(fā)指南[M].北京：人民郵電出版社，2012.

[3]Mark Pilgrim著;?？?胡金埔,趙靜譯.HTML2揭秘=HTML5:up and running[M].北京：電子工業(yè)出版社，2010.

[4]Paul Wilton,Jeremy McPeak著;張敏,高宇輝,王東亞譯.JavaScript入門經(jīng)典.北京：清華大學出版社，2011.

Login Website by WeChat QRcode Authorization

CHEN Cai-yun，LI Peng，WEN Wu，GUO Si-wen

（School of Computer Science&Educational Software,Guangzhou University,Guangzhou510006）

Different from the username and password to login,WeChat QRcode authorizes logon need only a scanning by mobile phone.To realize a login by QRcode,we should register an official account or service account in WeChat firstly,and then use interfaces provided by WeChat for authorization.Presents a detail about how to realize the function of login by QRcode.

WeChat;Official Account;QRcode

1007-1423（2017）01-0070-03

10.3969/j.issn.1007-1423.2017.01.017

陳彩云（1979-），女，湖南醴陵人，教師，博士，研究方向為信號處理、算法設(shè)計與分析

2016-10-25

2016-12-25

廣東省2015年度高等教育教學改革項目（粵教高函[2015]173號）、廣州大學2016年度教育教學研究項目（廣大〔2016〕149號）