這篇文章主要介紹微信開(kāi)發(fā)中掃碼登錄處理的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、網(wǎng)絡(luò)空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、商南網(wǎng)站維護(hù)、網(wǎng)站推廣。

在現(xiàn)今很多網(wǎng)站里面，都使用了微信開(kāi)放平臺(tái)的掃碼登錄認(rèn)證處理，這樣做相當(dāng)于把身份認(rèn)證交給較為權(quán)威的第三方進(jìn)行認(rèn)證，在應(yīng)用網(wǎng)站里面可以不需要存儲(chǔ)用戶(hù)的密碼了。本篇介紹如何基于微信開(kāi)放平臺(tái)的掃碼進(jìn)行網(wǎng)站的登陸處理。

1、開(kāi)放平臺(tái)的認(rèn)證

要使用網(wǎng)站的掃碼登錄處理，就需要先進(jìn)行微信開(kāi)放平臺(tái)帳號(hào)的開(kāi)發(fā)者資質(zhì)認(rèn)證，提交相關(guān)的資料，以及交付每年300元的認(rèn)證費(fèi)用。

認(rèn)證后，建立相關(guān)的網(wǎng)站應(yīng)用后，就有相關(guān)的APPID和APPSecret了，這些關(guān)鍵的參數(shù)就可以用來(lái)獲取相關(guān)的用戶(hù)信息了。

網(wǎng)站應(yīng)用的應(yīng)用詳情界面如下所示。

整個(gè)開(kāi)放平臺(tái)感覺(jué)沒(méi)有多少東西，不過(guò)需要收費(fèi)認(rèn)證才能使用這些功能，感覺(jué)不是很爽。

我們采用的掃碼登錄，需要通過(guò)開(kāi)放平臺(tái)獲取用戶(hù)的信息，因此還需要設(shè)置獲取用戶(hù)基本信息接口的域名，否則無(wú)法獲取信息，從而會(huì)導(dǎo)致重定向出錯(cuò)。

設(shè)置域名在【接口權(quán)限】【網(wǎng)頁(yè)賬號(hào)】【網(wǎng)頁(yè)授權(quán)獲取用戶(hù)基本信息】的修改入口，如下圖所示。

然后在彈出的對(duì)話框里面輸入授權(quán)回調(diào)的域名即可。

這樣設(shè)置就可以確保獲取到用戶(hù)信息了。

2、掃碼登錄的說(shuō)明和具體使用

網(wǎng)站應(yīng)用微信登錄是基于OAuth3.0協(xié)議標(biāo)準(zhǔn)構(gòu)建的微信OAuth3.0授權(quán)登錄系統(tǒng)。

在進(jìn)行微信OAuth3.在進(jìn)行微信OAuth3.0授權(quán)登錄接入之前，在微信開(kāi)放平臺(tái)注冊(cè)開(kāi)發(fā)者帳號(hào)，并擁有一個(gè)已審核通過(guò)的網(wǎng)站應(yīng)用，并獲得相應(yīng)的AppID和AppSecret，申請(qǐng)微信登錄且通過(guò)審核后，可開(kāi)始接入流程。

微信OAuth3.0授權(quán)登錄讓微信用戶(hù)使用微信身份安全登錄第三方應(yīng)用或網(wǎng)站，在微信用戶(hù)授權(quán)登錄已接入微信OAuth3.0的第三方應(yīng)用后，第三方可以獲取到用戶(hù)的接口調(diào)用憑證（access_token），通過(guò)access_token可以進(jìn)行微信開(kāi)放平臺(tái)授權(quán)關(guān)系接口調(diào)用，從而可實(shí)現(xiàn)獲取微信用戶(hù)基本開(kāi)放信息和幫助用戶(hù)實(shí)現(xiàn)基礎(chǔ)開(kāi)放功能等。

微信OAuth3.0授權(quán)登錄目前支持authorization_code模式，適用于擁有server端的應(yīng)用授權(quán)。該模式整體流程為：

1. 第三方發(fā)起微信授權(quán)登錄請(qǐng)求，微信用戶(hù)允許授權(quán)第三方應(yīng)用后，微信會(huì)拉起應(yīng)用或重定向到第三方網(wǎng)站，并且?guī)鲜跈?quán)臨時(shí)票據(jù)code參數(shù)；2. 通過(guò)code參數(shù)加上AppID和AppSecret等，通過(guò)API換取access_token；3. 通過(guò)access_token進(jìn)行接口調(diào)用，獲取用戶(hù)基本數(shù)據(jù)資源或幫助用戶(hù)實(shí)現(xiàn)基本操作。

獲取access_token時(shí)序圖：

從上圖我們可以大概了解整個(gè)掃碼登陸的處理過(guò)程。

3、掃碼登錄的各個(gè)步驟處理

1）用戶(hù)身份的綁定

為了實(shí)現(xiàn)二維碼掃碼登錄，我們需要在現(xiàn)有系統(tǒng)里面綁定用戶(hù)的微信，這樣才能在用戶(hù)掃碼的時(shí)候，判斷用戶(hù)的身份從而實(shí)現(xiàn)自動(dòng)登錄的過(guò)程。

我們可以在用戶(hù)管理里面進(jìn)行統(tǒng)一設(shè)置，也可以在常規(guī)用戶(hù)登錄（用戶(hù)名+密碼）后進(jìn)行設(shè)置，這個(gè)主要看我們是否需要保留用戶(hù)名密碼登陸這種方式。

例如可以在用戶(hù)管理里面統(tǒng)一綁定，也就是在創(chuàng)建用戶(hù)的時(shí)候，讓用戶(hù)綁定下微信，獲取微信的標(biāo)識(shí)。

也可以在保留用戶(hù)名密碼的登陸方式外，讓用戶(hù)登陸系統(tǒng)后自行進(jìn)行綁定微信即可。

上面的界面，就是在一個(gè)頁(yè)面里面彈出一個(gè)層，然后請(qǐng)求二維碼顯示即可，如下界面代碼所示。

        
            

                
掃描用戶(hù)二維碼，進(jìn)行綁定
            

            
                
            


            
                關(guān)閉
            

        

上面的層在打開(kāi)的時(shí)候，我們使用JS來(lái)動(dòng)態(tài)獲取二維碼進(jìn)行顯示，具體JS代碼如下所示。

    //綁定微信登陸
    function BindWechat() {        var url = "http://www.iqidi.com/H5/BindWechat?id=@Session["UserID"]";
        url = encodeURIComponent(url);        $("#imgQRcode").attr("src", "/H5/QR?url=" + url);        //打開(kāi)綁定窗口
        $("#pWechat").dialog('open').dialog('setTitle', '使用微信掃碼進(jìn)行綁定');
    }

上面的JS只是做前端的數(shù)據(jù)請(qǐng)求和顯示，具體的QR動(dòng)作Action其實(shí)就是生成掃描二維碼的過(guò)程，這個(gè)二維碼其實(shí)就是采用通用的方式，來(lái)構(gòu)建一個(gè)指向我們綁定賬號(hào)的地址，從而實(shí)現(xiàn)我們綁定賬號(hào)的判斷，二維碼的生成過(guò)程如下所示。

        /// 

        /// 轉(zhuǎn)換二維碼連接為圖片格式        /// 
        /// 二維碼連接
        ///         [HttpGet]        public ActionResult QR(string url)
        {            //初始化二維碼生成工具
            QRCodeEncoder qrCodeEncoder = new QRCodeEncoder();
            qrCodeEncoder.QRCodeEncodeMode = QRCodeEncoder.ENCODE_MODE.BYTE;
            qrCodeEncoder.QRCodeErrorCorrect = QRCodeEncoder.ERROR_CORRECTION.M;
            qrCodeEncoder.QRCodeVersion = 0;
            qrCodeEncoder.QRCodeScale = 4;            //將字符串生成二維碼圖片
            var image = qrCodeEncoder.Encode(url, Encoding.Default);            //保存為PNG到內(nèi)存流  
            MemoryStream ms = new MemoryStream();
            image.Save(ms, ImageFormat.Png);
            image.Dispose();            return File(ms.ToArray(), "image/Png");
        }

為了實(shí)現(xiàn)用戶(hù)的綁定，我們需要獲取當(dāng)前用戶(hù)的身份信息，因此需要在BindWeChat的操作里面做一個(gè)轉(zhuǎn)向處理，如下接口所示。

        /// 

        /// 生成綁定微信的地址        /// 
        /// 
        public ActionResult BindWechat()

這個(gè)函數(shù)處理里面，我們需要重新定向處理，我們把它定向到BindAccount函數(shù)里面，方便獲取用戶(hù)的openid和其他必要的信息。

另外我們基于微信開(kāi)放平臺(tái)的應(yīng)用，建立了一個(gè)和微信賬號(hào)信息的聯(lián)系，因此創(chuàng)建數(shù)據(jù)庫(kù)信息如下所示。

也就是一個(gè)具體的開(kāi)放平臺(tái)應(yīng)用對(duì)應(yīng)著一個(gè)具體的微信賬號(hào)，這樣我們就可以充分利用配置進(jìn)行處理了。

上面提到的BindAccount的處理的邏輯就是獲取必要的信息，然后在數(shù)據(jù)庫(kù)層面對(duì)身份信息進(jìn)行驗(yàn)證，具體代碼如下所示。

        /// 

        /// 綁定用戶(hù)微信號(hào)        /// 
        /// 賬號(hào)ID
        /// 
        public ActionResult BindAccount()
        {
            WebAppInfo appInfo = GetWebApp(ConfigData.WebAppId);
            AccountInfo accountInfo = GetAccount(appInfo.AccountNo);            var htResult = GetOpenIdAndUnionId(accountInfo.UniteAppId, accountInfo.UniteAppSecret);//存儲(chǔ)openid方便使用
            string openid = htResult["openid"].ToString();            var unionid = htResult["unionid"].ToString();            var userid = Request.QueryString["id"];            var state = Request.QueryString["state"];

            if (!string.IsNullOrEmpty(openid) && !string.IsNullOrEmpty(userid))
            {
                CommonResult result = BLLFactory.Instance.BindUser(openid, unionid, userid.ToInt32());                if (result.Success)
                {                    return BindSuccess();
                }                else
                {                    return BindFail();
                }
            }            else
            {                throw new WeixinException("無(wú)法獲取openid" + string.Format(", openid:{0}, userid:{1}", openid, userid));
            }
        }

在綁定的過(guò)程，我們需要考慮綁定正確賬號(hào)，重復(fù)綁定其他賬號(hào)，無(wú)效綁定幾種情況，如果成功綁定正確賬號(hào)（可多次處理結(jié)果一樣），那么得到界面如下所示（這個(gè)界面的樣式采用了weui的樣式）。

 

2）用戶(hù)的掃碼登錄處理

上面綁定了賬號(hào)后，就可以通過(guò)掃碼進(jìn)行登錄了，掃碼回調(diào)的時(shí)候我們有自己的判斷處理，掃碼界面如下所示（我們?cè)诒Ａ粲脩?hù)名密碼登陸的方式外，增加了一個(gè)掃碼登錄的處理）。

如果是Bootstrap的界面效果

如果是EasyUI的界面效果

這個(gè)和前面的二維碼顯示規(guī)則差不多，不過(guò)他們的連接地址是不同的，這個(gè)地方用到了開(kāi)放平臺(tái)的接口，也就是我們前面提到開(kāi)放平臺(tái)認(rèn)證的接口了。

上面的掃碼登錄的界面代碼如下所示。

    
    
        
        


        
            關(guān)閉
        

    

上面代碼需要引入JS文件，并使用微信JSSDK的API進(jìn)行顯示的。

    
    
    

        function OpenJSLogin() {            var obj = new WxLogin({
                id: "login_container",
                appid: "@ViewBag.appid",
                scope: "snsapi_login",
                redirect_uri: "@ViewBag.redirect_uri",
                state: "@ViewBag.state",
                style: "black",
                href: ".impowerBox .qrcode {width: 200px;}"
            });            //打開(kāi)綁定窗口            $("#pWechat").dialog('open').dialog('setTitle', '使用微信掃碼進(jìn)行登陸');
        }    

這個(gè)里面的參數(shù)，如APPID就是來(lái)源我們認(rèn)證后的開(kāi)放平臺(tái)參數(shù)。

這些信息我們?cè)贛VC控制器后面獲取后綁定在ViewBag，方便界面前端的使用。

            //使用JSLogin登陸
            WebAppInfo appInfo = BLLFactory.Instance.FindByID(ConfigData.WebAppId);
            ArgumentValidation.CheckForNullReference(appInfo, "Web應(yīng)用程序appInfo");            if (appInfo != null)
            {
                ViewBag.appid = appInfo.OpenAppID;
                ViewBag.redirect_uri = appInfo.LoginCallBackUrl;
                ViewBag.state = ConfigData.AuthState;
            }

其中的redirect_uri是通過(guò)數(shù)據(jù)庫(kù)獲取的LoginCallBackUrl地址，這個(gè)地址類(lèi)似如下格式：www.iqidi.com/H5/callback?uid=iqidiSoftware

也就是我們?cè)陂_(kāi)放平臺(tái)處理返回后進(jìn)行的回調(diào)處理。

通過(guò)開(kāi)放平臺(tái)的APPID和APPSecret，我們可以獲取到對(duì)應(yīng)的接口調(diào)用憑證，然后根據(jù)接口憑證，以及openid，獲得用戶(hù)的公眾平臺(tái)統(tǒng)一的UnionID，這個(gè)標(biāo)識(shí)是我們用戶(hù)的標(biāo)識(shí)，代碼如下所示。

                var result = baseApi.GetAuthToken(appid, appsecret, code);                if (result != null && !string.IsNullOrEmpty(result.openid))
                {
                    openid = result.openid;                    var unionResult = baseApi.GetSnsapiUserInfo(result.access_token, result.openid);

                    ht.Add("openid", openid);
                    ht.Add("unionid", unionResult != null ? unionResult.unionid : "");
                }

有了unionid我們就可以根據(jù)這個(gè)標(biāo)識(shí)在我們的用戶(hù)數(shù)據(jù)庫(kù)里面查找對(duì)應(yīng)的用戶(hù)，如下代碼所示。

            //開(kāi)放平臺(tái)的OpenID，不是公眾號(hào)的OpenID,需要轉(zhuǎn)換為unionid
            if (!string.IsNullOrEmpty(openid) && !string.IsNullOrEmpty(unionid))
            {
                UserInfo userInfo = BLLFactory.Instance.FindByUnionId(unionid);

然后判斷我們?nèi)サ降挠脩?hù)信息是否正確，如下代碼所示

                if (userInfo != null)
                {
                    CommonResult loginResult = CheckLogin(userInfo.Name);                    if (!loginResult.Success)
                    {
                        LogHelper.Info(string.Format("用戶(hù)登陸不成功，{0}", loginResult.ErrorMessage));
                    }                    //登陸成功后的重定向地址
                    var url = appInfo.HomeUrl;  //例如：http://www.iqidi.com/Home
                    return Redirect(url);
                }

如果不成功，那么我們定向到指定的界面即可。

            //如不成功，最后都統(tǒng)一提示信息
            ViewBag.Error = "獲取信息失敗，登陸錯(cuò)誤";            return View("LoginError");

如果我們登陸成功后，需要設(shè)置一些Session信息或者Cookie信息，那么就可以通過(guò)CheckLogin函數(shù)進(jìn)行處理即可。

以上就是我們結(jié)合微信開(kāi)放平臺(tái)實(shí)現(xiàn)微信掃碼登錄的過(guò)程，其中整個(gè)過(guò)程就是用到了下面幾個(gè)過(guò)程。

1）使用JSSDK的腳本實(shí)現(xiàn)掃碼獲取code

JS微信登錄主要用途：網(wǎng)站希望用戶(hù)在網(wǎng)站內(nèi)就能完成登錄，無(wú)需跳轉(zhuǎn)到微信域下登錄后再返回，提升微信登錄的流暢性與成功率。 網(wǎng)站內(nèi)嵌二維碼微信登錄JS實(shí)現(xiàn)辦法：

步驟1：在頁(yè)面中先引入如下JS文件（支持https）：

步驟2：在需要使用微信登錄的地方實(shí)例以下JS對(duì)象：

                          var obj = new WxLogin({
                              id:"login_container", 
                              appid: "", 
                              scope: "", 
                              redirect_uri: "",
                              state: "",
                              style: "",
                              href: ""
                            });

2) 第二步：通過(guò)code獲取access_token

通過(guò)code獲取access_token

api.weixin.qq.com/sns/oauth3/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

3)第三步：通過(guò)access_token調(diào)用接口

獲取access_token后，進(jìn)行接口調(diào)用，

對(duì)于接口作用域（scope），能調(diào)用的接口有以下：

授權(quán)作用域（scope）	接口	接口說(shuō)明
snsapi_base	/sns/oauth3/access_token	通過(guò)code換取access_token、refresh_token和已授權(quán)scope
	/sns/oauth3/refresh_token	刷新或續(xù)期access_token使用
	/sns/auth	檢查access_token有效性
snsapi_userinfo	/sns/userinfo	獲取用戶(hù)個(gè)人信息

其中snsapi_base屬于基礎(chǔ)接口，若應(yīng)用已擁有其它scope權(quán)限，則默認(rèn)擁有snsapi_base的權(quán)限。使用snsapi_base可以讓移動(dòng)端網(wǎng)頁(yè)授權(quán)繞過(guò)跳轉(zhuǎn)授權(quán)登錄頁(yè)請(qǐng)求用戶(hù)授權(quán)的動(dòng)作，直接跳轉(zhuǎn)第三方網(wǎng)頁(yè)帶上授權(quán)臨時(shí)票據(jù)（code），但會(huì)使得用戶(hù)已授權(quán)作用域（scope）僅為snsapi_base，從而導(dǎo)致無(wú)法獲取到需要用戶(hù)授權(quán)才允許獲得的數(shù)據(jù)和基礎(chǔ)功能。

4）獲取信息在回調(diào)界面中進(jìn)行登錄前處理

通過(guò)上面接口，我們可以獲得相應(yīng)的用戶(hù)身份信息，因此可以結(jié)合我們用戶(hù)數(shù)據(jù)庫(kù)進(jìn)行用戶(hù)身份的認(rèn)定和處理，并設(shè)置必要的Session或者Cookie信息等，最后定位到我們的應(yīng)用主界面即可。

以上是“微信開(kāi)發(fā)中掃碼登錄處理的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱(chēng)：微信開(kāi)發(fā)中掃碼登錄處理的示例分析-創(chuàng)新互聯(lián)
本文URL：http://weahome.cn/article/csshep.html