C#开发微信门户及应用(41)--基于微信开放平台的扫码登陆处理

时间 2019-11-16

标签 c# 开发微信门户应用基于开放平台登陆处理栏目 C# 繁體版

原文原文链接

在现今不少网站里面，都使用了微信开放平台的扫码登陆认证处理，这样作至关于把身份认证交给较为权威的第三方进行认证，在应用网站里面能够不须要存储用户的密码了。本篇介绍如何基于微信开放平台的扫码进行网站的登录处理。javascript

一、开放平台的认证

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

认证后，创建相关的网站应用后，就有相关的APPID和APPSecret了，这些关键的参数就能够用来获取相关的用户信息了。前端

网站应用的应用详情界面以下所示。java

整个开放平台感受没有多少东西，不过须要收费认证才能使用这些功能，感受不是很爽。数据库

咱们采用的扫码登陆，须要经过开放平台获取用户的信息，所以还须要设置获取用户基本信息接口的域名，不然没法获取信息，从而会致使重定向出错。api

设置域名在【接口权限】【网页帐号】【网页受权获取用户基本信息】的修改入口，以下图所示。安全

而后在弹出的对话框里面输入受权回调的域名便可。微信

这样设置就能够确保获取到用户信息了。app

二、扫码登陆的说明和具体使用

网站应用微信登陆是基于OAuth2.0协议标准构建的微信OAuth2.0受权登陆系统。函数

在进行微信OAuth2.在进行微信OAuth2.0受权登陆接入以前，在微信开放平台注册开发者账号，并拥有一个已审核经过的网站应用，并得到相应的AppID和AppSecret，申请微信登陆且经过审核后，可开始接入流程。

微信OAuth2.0受权登陆让微信用户使用微信身份安全登陆第三方应用或网站，在微信用户受权登陆已接入微信OAuth2.0的第三方应用后，第三方能够获取到用户的接口调用凭证（access_token），经过access_token能够进行微信开放平台受权关系接口调用，从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。

微信OAuth2.0受权登陆目前支持authorization_code模式，适用于拥有server端的应用受权。该模式总体流程为：

1. 第三方发起微信受权登陆请求，微信用户容许受权第三方应用后，微信会拉起应用或重定向到第三方网站，而且带上受权临时票据code参数；

2. 经过code参数加上AppID和AppSecret等，经过API换取access_token；

3. 经过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操做。

获取access_token时序图：

从上图咱们能够大概了解整个扫码登录的处理过程。

三、扫码登陆的各个步骤处理

1）用户身份的绑定

为了实现二维码扫码登陆，咱们须要在现有系统里面绑定用户的微信，这样才能在用户扫码的时候，判断用户的身份从而实现自动登陆的过程。

咱们能够在用户管理里面进行统一设置，也能够在常规用户登陆（用户名+密码）后进行设置，这个主要看咱们是否须要保留用户名密码登录这种方式。

例如能够在用户管理里面统一绑定，也就是在建立用户的时候，让用户绑定下微信，获取微信的惟一标识。

也能够在保留用户名密码的登录方式外，让用户登录系统后自行进行绑定微信便可。

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

        <div id="divWechat" class="easyui-dialog" style="width:450px;height:350px;padding:10px 20px"
             closed="true" resizable="true" modal="true" iconcls="icon-setting">
            <div>
                <h4>扫描用户二维码，进行绑定</h4>
            </div>
            <div align="center">
                <img id="imgQRcode" alt="使用微信扫码进行绑定" style="height:200px;width:auto" />
            </div>

            <div align="right">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript: $('#divWechat').dialog('close')">关闭</a>
            </div>
        </div>

上面的层在打开的时候，咱们使用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); //打开绑定窗口
        $("#divWechat").dialog('open').dialog('setTitle', '使用微信扫码进行绑定');
    }

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

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

            return File(ms.ToArray(), "image/Png");
        }

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

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

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

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

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

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

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

在绑定的过程，咱们须要考虑绑定正确帐号，重复绑定其余帐号，无效绑定几种状况，若是成功绑定正确帐号（可屡次处理结果同样），那么获得界面以下所示（这个界面的样式采用了weui的样式）。

2）用户的扫码登陆处理

上面绑定了帐号后，就能够经过扫码进行登陆了，扫码回调的时候咱们有本身的判断处理，扫码界面以下所示（咱们在保留用户名密码登录的方式外，增长了一个扫码登陆的处理）。

若是是Bootstrap的界面效果

若是是EasyUI的界面效果

这个和前面的二维码显示规则差很少，不过他们的链接地址是不一样的，这个地方用到了开放平台的接口，也就是咱们前面提到开放平台认证的接口了。

上面的扫码登陆的界面代码以下所示。

    <!--二维码扫描登录的界面层-->
    <div id="divWechat" class="easyui-dialog" style="width:550px;height:500px;padding:10px 20px"
         closed="true" resizable="true" modal="true" iconcls="icon-setting">
        <div id="login_container" align="center">
        </div>

        <div align="right">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript: $('#divWechat').dialog('close')">关闭</a>
        </div>
    </div>

上面代码须要引入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;}"
            });

            //打开绑定窗口
            $("#divWechat").dialog('open').dialog('setTitle', '使用微信扫码进行登录');
        }
    </script>

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

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

            //使用JSLogin登录
            WebAppInfo appInfo = BLLFactory<WebApp>.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地址，这个地址相似以下格式：http://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<User>.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）：

<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

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

3)第三步：经过access_token调用接口

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

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

受权做用域（scope）	接口	接口说明
snsapi_base	/sns/oauth2/access_token	经过code换取access_token、refresh_token和已受权scope
	/sns/oauth2/refresh_token	刷新或续期access_token使用
	/sns/auth	检查access_token有效性
snsapi_userinfo	/sns/userinfo	获取用户我的信息

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

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

经过上面接口，咱们能够得到相应的用户身份信息，所以能够结合咱们用户数据库进行用户身份的认定和处理，并设置必要的Session或者Cookie信息等，最后定位到咱们的应用主界面便可。