微信开发的扫码登录处理的步骤详解

1、开放平台的认证

要使用网站的扫码登录处理，就需要先进行微信开放平台帐号的开发者资质认证，提交相关的资料，以及交付每年300元的认证费用。

上面的界面，就是在一个页面里面弹出一个层，然后请求二维码显示即可，如下界面代码所示。

        

            

                
扫描用户二维码，进行绑定
            

            

                
            

            

                关闭
            
        

上面的层在打开的时候，我们使用JS来动态获取二维码进行显示，具体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(&＃39;open&＃39;).dialog(&＃39;setTitle&＃39;, &＃39;使用微信扫码进行绑定&＃39;);
    }

上面的JS只是做前端的数据请求和显示，具体的QR动作Action其实就是生成扫描二维码的过程，这个二维码其实就是采用通用的方式，来构建一个指向我们绑定账号的地址，从而实现我们绑定账号的判断，二维码的生成过程如下所示。

        /// 

        /// 转换二维码连接为图片格式        /// 
        /// 二维码连接
        ///         [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到内存流  
            MemoryStream ms = new MemoryStream();
            image.Save(ms, ImageFormat.Png);
            image.Dispose();            return File(ms.ToArray(), "image/Png");
        }

为了实现用户的绑定，我们需要获取当前用户的身份信息，因此需要在BindWeChat的操作里面做一个转向处理，如下接口所示。

        /// 

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

这个函数处理里面，我们需要重新定向处理，我们把它定向到BindAccount函数里面，方便获取用户的openid和其他必要的信息。

另外我们基于微信开放平台的应用，建立了一个和微信账号信息的联系，因此创建数据库信息如下所示。

也就是一个具体的开放平台应用对应着一个具体的微信账号，这样我们就可以充分利用配置进行处理了。

上面提到的BindAccount的处理的逻辑就是获取必要的信息，然后在数据库层面对身份信息进行验证，具体代码如下所示。

        /// 

        /// 绑定用户微信号        /// 
        /// 账号ID
        /// 
        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.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));
            }
        }

在绑定的过程，我们需要考虑绑定正确账号，重复绑定其他账号，无效绑定几种情况，如果成功绑定正确账号（可多次处理结果一样），那么得到界面如下所示（这个界面的样式采用了weui的样式）。

这个和前面的二维码显示规则差不多，不过他们的连接地址是不同的，这个地方用到了开放平台的接口，也就是我们前面提到开放平台认证的接口了。

上面的扫码登录的界面代码如下所示。

    
    

        

        

        

            关闭
        
    

上面代码需要引入JS文件，并使用微信JSSDK的API进行显示的。

这个里面的参数，如APPID就是来源我们认证后的开放平台参数。

这些信息我们在MVC控制器后面获取后绑定在ViewBag，方便界面前端的使用。

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

其中的redirect_uri是通过数据库获取的LoginCallBackUrl地址，这个地址类似如下格式：www.iqidi.com/H5/callback?uid=iqidiSoftware

也就是我们在开放平台处理返回后进行的回调处理。

通过开放平台的APPID和APPSecret，我们可以获取到对应的接口调用凭证，然后根据接口凭证，以及openid，获得用户的公众平台统一的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我们就可以根据这个标识在我们的用户数据库里面查找对应的用户，如下代码所示。

            //开放平台的OpenID，不是公众号的OpenID,需要转换为unionid
            if (!string.IsNullOrEmpty(openid) && !string.IsNullOrEmpty(unionid))
            {
                UserInfo userInfo = BLLFactory.Instance.FindByUnionId(unionid);

然后判断我们去到的用户信息是否正确，如下代码所示

                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);
                }

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

            //如不成功，最后都统一提示信息
            ViewBag.Error = "获取信息失败，登陆错误";            return View("LoginError");

如果我们登陆成功后，需要设置一些Session信息或者COOKIE信息，那么就可以通过CheckLogin函数进行处理即可。

以上就是我们结合微信开放平台实现微信扫码登录的过程，其中整个过程就是用到了下面几个过程。

1）使用JSSDK的脚本实现扫码获取code

JS微信登录主要用途：网站希望用户在网站内就能完成登录，无需跳转到微信域下登录后再返回，提升微信登录的流畅性与成功率。 网站内嵌二维码微信登录JS实现办法：

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

步骤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调用接口

获取access_token后，进行接口调用，

对于接口作用域（scope），能调用的接口有以下：

其中snsapi_base属于基础接口，若应用已拥有其它scope权限，则默认拥有snsapi_base的权限。使用snsapi_base可以让移动端网页授权绕过跳转授权登录页请求用户授权的动作，直接跳转第三方网页带上授权临时票据（code），但会使得用户已授权作用域（scope）仅为snsapi_base，从而导致无法获取到需要用户授权才允许获得的数据和基础功能。

4）获取信息在回调界面中进行登录前处理

通过上面接口，我们可以获得相应的用户身份信息，因此可以结合我们用户数据库进行用户身份的认定和处理，并设置必要的Session或者COOKIE信息等，最后定位到我们的应用主界面即可。

以上就是微信开发的扫码登录处理的步骤详解的详细内容，更多请关注php中文网其它相关文章！