在現(xiàn)今許多網(wǎng)站裡面，都使用了微信開放平臺的掃碼登入認證處理，這樣做相當(dāng)於把身分認證交給較為權(quán)威的第三方進行認證，在應(yīng)用網(wǎng)站裡面可以不需要儲存使用者的密碼了。本篇介紹如何以微信開放平臺的掃碼為基礎(chǔ)進行網(wǎng)站的登陸處理。

1、開放平臺的認證

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

認證後，建立相關(guān)的網(wǎng)站應(yīng)用程式後，就有相關(guān)的APPID和APPSecret了，這些關(guān)鍵的參數(shù)就可以用來取得相關(guān)的使用者資訊了。

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

整個開放平臺感覺沒有太多東西，不過需要收費認證才能使用這些功能，感覺不是很爽。

我們採用的掃碼登錄，需要透過開放平臺獲取用戶的信息，因此還需要設(shè)置獲取用戶基本信息接口的域名，否則無法獲取信息，從而會導(dǎo)致重定向出錯。

設(shè)定網(wǎng)域名稱在【介面權(quán)限】【網(wǎng)頁帳號】【網(wǎng)頁授權(quán)取得使用者基本資訊】的修改入口，如下圖所示。

然後在彈出的對話方塊裡面輸入授權(quán)回呼的網(wǎng)域即可。

?這樣設(shè)定就可以確保取得到使用者資訊了。

2、掃碼登入的說明和具體使用

網(wǎng)站應(yīng)用微信登入是基於OAuth2.0協(xié)定標準建構(gòu)的微信OAuth2.0授權(quán)登入系統(tǒng)。

在進行微信OAuth2.在進行微信OAuth2.0授權(quán)登入存取之前，在微信開放平臺註冊開發(fā)者帳號，並擁有一個已審核通過的網(wǎng)站應(yīng)用，並獲得相應(yīng)的AppID和AppSecret，申請微信登入且通過審核後，可開始接取流程。

微信OAuth2.0授權(quán)登入讓微信用戶使用微信身分安全登入第三方應(yīng)用程式或網(wǎng)站，在微信用戶授權(quán)登入已接取微信OAuth2.0的第三方應(yīng)用程式後，第三方可以取得用戶的介面調(diào)用憑證（access_token），透過access_token可以進行微信開放平臺授權(quán)關(guān)係介面調(diào)用，從而可實現(xiàn)獲取微信用戶基本開放資訊和幫助用戶實現(xiàn)基礎(chǔ)開放功能等。

微信OAuth2.0授權(quán)登入目前支援a(chǎn)uthorization_code模式，適用於擁有server端的應(yīng)用程式授權(quán)。此模式整體流程為：

1. 第三方發(fā)起微信授權(quán)登入要求，微信使用者允許授權(quán)第三方應(yīng)用程式後，微信會拉起應(yīng)用程式或重定向到第三方網(wǎng)站，並且?guī)鲜跈?quán)臨時票據(jù)code參數(shù)；2. 透過code參數(shù)加上AppID和AppSecret等，透過API換取access_token；3. 透過access_token進行介面調(diào)用，取得使用者基本資料資源或協(xié)助使用者實現(xiàn)基本操作。

取得access_token時序圖：

#?

從上圖我們可以大概了解整個掃碼登陸的處理過程。

3、掃碼登入的各個步驟處理

1）使用者身分的綁定

為了實現(xiàn)二維碼掃碼登錄，我們需要在現(xiàn)有系統(tǒng)裡面綁定使用者的微信，這樣才能在使用者掃碼的時候，判斷使用者的身分從而實現(xiàn)自動登入的過程。

我們可以在使用者管理裡面進行統(tǒng)一設(shè)置，也可以在常規(guī)使用者登入（使用者名稱+密碼）後進行設(shè)置，這個主要看我們是否需要保留使用者名稱密碼登陸這種方式。

例如可以在使用者管理裡面統(tǒng)一綁定，也就是在創(chuàng)建用戶的時候，讓用戶綁定下微信，取得微信的唯一識別。

也可以在保留使用者名稱密碼的登陸方式外，讓使用者登陸系統(tǒng)後自行進行綁定微信即可。

上面的介面，就是在一個頁裡面彈出一個層，然後請求二維碼顯示即可，如下介面程式碼所示。

        <p id="pWechat" class="easyui-dialog" style="width:450px;height:350px;padding:10px 20px"
             closed="true" resizable="true" modal="true" iconcls="icon-setting">
            <p>
                <h4>掃描用戶二維碼，進行綁定</h4>
            </p>
            <p align="center">
                <img id="imgQRcode" alt="使用微信掃碼進行綁定" style="height:200px;width:auto" />
            </p>

            <p align="right">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript: $(&#39;#pWechat&#39;).dialog(&#39;close&#39;)">關(guān)閉</a>
            </p>
        </p>

上面的層在開啟的時候，我們使用JS來動態(tài)取得二維碼進行顯示，具體JS程式碼如下所示。

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

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

        /// <summary>
        /// 轉(zhuǎn)換二維碼連接為圖片格式        /// </summary>
        /// <param name="url">二維碼連接</param>
        /// <returns></returns>        [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");
        }

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

        /// <summary>
        /// 生成綁定微信的地址        /// </summary>
        /// <returns></returns>
        public ActionResult BindWechat()

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

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

也就是一個具體的開放平臺應(yīng)用對應(yīng)著一個具體的微信賬號，這樣我們就可以充分利用配置進行處理了。

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

        /// <summary>
        /// 綁定用戶微信號        /// </summary>
        /// <param name="id">賬號ID</param>
        /// <returns></returns>
        public ActionResult BindAccount()
        {
            WebAppInfo appInfo = GetWebApp(ConfigData.WebAppId);
            AccountInfo accountInfo = GetAccount(appInfo.AccountNo);            var htResult = GetOpenIdAndUnionId(accountInfo.UniteAppId, accountInfo.UniteAppSecret);//存儲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<User>.Instance.BindUser(openid, unionid, userid.ToInt32());                if (result.Success)
                {                    return BindSuccess();
                }                else
                {                    return BindFail();
                }
            }            else
            {                throw new WeixinException("無法獲取openid" + string.Format(", openid:{0}, userid:{1}", openid, userid));
            }
        }

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

2）用戶的掃碼登錄處理

上面綁定了賬號后，就可以通過掃碼進行登錄了，掃碼回調(diào)的時候我們有自己的判斷處理，掃碼界面如下所示（我們在保留用戶名密碼登陸的方式外，增加了一個掃碼登錄的處理）。

如果是Bootstrap的界面效果

如果是EasyUI的界面效果

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

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

    <!--二維碼掃描登陸的界面層-->
    <p id="pWechat" class="easyui-dialog" style="width:550px;height:500px;padding:10px 20px"
         closed="true" resizable="true" modal="true" iconcls="icon-setting">
        <p id="login_container" align="center">
        </p>

        <p align="right">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript: $(&#39;#pWechat&#39;).dialog(&#39;close&#39;)">關(guān)閉</a>
        </p>
    </p>

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

    <!--使用微信掃碼進行登陸-->
    <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
    <script language="javascript">

        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;}"
            });            //打開綁定窗口            $("#pWechat").dialog(&#39;open&#39;).dialog(&#39;setTitle&#39;, &#39;使用微信掃碼進行登陸&#39;);
        }    </script>

這個里面的參數(shù)，如APPID就是來源我們認證后的開放平臺參數(shù)。

這些信息我們在MVC控制器后面獲取后綁定在ViewBag，方便界面前端的使用。

            //使用JSLogin登陸
            WebAppInfo appInfo = BLLFactory<WebApp>.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是通過數(shù)據(jù)庫獲取的LoginCallBackUrl地址，這個地址類似如下格式：www.iqidi.com/H5/callback?uid=iqidiSoftware

也就是我們在開放平臺處理返回后進行的回調(diào)處理。

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

                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ù)這個標識在我們的用戶數(shù)據(jù)庫里面查找對應(yīng)的用戶，如下代碼所示。

            //開放平臺的OpenID，不是公眾號的OpenID,需要轉(zhuǎn)換為unionid
            if (!string.IsNullOrEmpty(openid) && !string.IsNullOrEmpty(unionid))
            {
                UserInfo userInfo = BLLFactory<User>.Instance.FindByUnionId(unionid);

然后判斷我們?nèi)サ降挠脩粜畔⑹欠裾_，如下代碼所示

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

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

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

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

以上就是我們結(jié)合微信開放平臺實現(xiàn)微信掃碼登錄的過程，其中整個過程就是用到了下面幾個過程。

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

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

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

<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

步驟2：在需要使用微信登錄的地方實例以下JS對象：

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

2)?第二步：通過code獲取access_token

通過code獲取access_token

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

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

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

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

#其中snsapi_base屬於基礎(chǔ)接口，若應(yīng)用程式已擁有其它scope權(quán)限，則預(yù)設(shè)擁有snsapi_base的權(quán)限。使用snsapi_base可以讓行動網(wǎng)頁授權(quán)繞過跳轉(zhuǎn)授權(quán)登入頁面請求使用者授權(quán)的動作，直接跳轉(zhuǎn)第三方網(wǎng)頁帶上授權(quán)臨時票據(jù)（code），但會讓使用者已授權(quán)作用域（scope）僅為snsapi_base ，從而導(dǎo)致無法取得到需要使用者授權(quán)才允許取得的資料和基礎(chǔ)功能。

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

通過上面接口，我們可以獲得相應(yīng)的用戶身份信息，因此可以結(jié)合我們用戶數(shù)據(jù)庫進行使用者身分的認定與處理，並設(shè)定必要的Session或Cookie資訊等，最後定位到我們的應(yīng)用主介面即可。

以上是微信開發(fā)的掃碼登入處理的步驟詳解的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！