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

在近年来众多网站内部,都应用了微信开放平台的扫码登录认证处理,那样做一定于把地方认证交给较为权威的第三方开展认证,在选用网站内部可以不需要存储用户的密码了。本篇介绍怎么样根据微信开放平台的扫码举办网站的登陆处理。

1、开放平台的辨证

要选择网站的扫码登录处理,就需求先进行微信开放平台帐号的开发者资质认证,提交有关的材料,以及提交每年300元的验证费用。

C# 1

表达后,建立相关的网站使用后,就有连锁的APPID和APPSecret了,那个主要的参数就可以用来取得相关的用户消息了。

网站选择的选取详情界面如下所示。

C# 2

整套开放平台感觉没有稍微东西,不过需要收费认证才能使用这个效应,感觉不是很爽。

咱俩应用的扫码登录,必要通过开放平台获取用户的音讯,因而还必要设置获取用户中央音讯接口的域名,否则无法获取音信,从而会造成重定向出错。

安装域名在【接口权限】【网页账号】【网页授权获取用户主旨音信】的修改入口,如下图所示。

C# 3

下一场在弹出的对话框里面输入授权回调的域名即可。

C# 4

 那样设置就足以确保取拿到用户音信了。

2、扫码登录的表达和实际使用

网站使用微信登录是基于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时序图:

C# 5

 

从上图大家可以大约通晓所有扫码登陆的处理进程。

 

3、扫码登录的相继步骤处理

1)用户地点的绑定

为了落到实处二维码扫码登录,大家需求在存活系统里头绑定用户的微信,那样才能在用户扫码的时候,判断用户的身价从而落成活动登录的进程。

俺们可以在用户管理之中进行合并设置,也可以在健康用户登录(用户名+密码)后开展安装,那些第一看大家是不是需求保留用户名密码登陆那种方式。

诸如可以在用户管理内部统一绑定,也就是在创设用户的时候,让用户绑定下微信,获取微信的唯一标识。

C# 6

也足以在保留用户名密码的登陆方式外,让用户登陆系统后活动举行绑定微信即可。

C# 7

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

        <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和此外须要的音信。

其它大家依照微信开放平台的使用,建立了一个和微信账号音讯的关系,由此创制数据库新闻如下所示。

C# 8

也就是一个具体的开放平台应用对应着一个具体的微信账号,那样大家就可以丰硕利用配置进行处理了。

上面提到的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的样式)。

C# 9  C# 10

 

2)用户的扫码登录处理

地点绑定了账号后,就足以由此扫码举办登录了,扫码回调的时候大家有投机的论断处理,扫码界面如下所示(我们在保存用户名密码登陆的法门外,扩展了一个扫码登录的处理)。

假定是Bootstrap的界面效果

C# 11

若是是EasyUI的界面效果

C# 12

本条和前边的二维码突显规则基本上,不过他俩的接连地址是例外的,这一个地点用到了开放平台的接口,也就是大家眼前提到开放平台认证的接口了。

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

    <!--二维码扫描登陆的界面层-->
    <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,得到用户的本田(Honda)平台统一的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>

C#,手续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音信等,最终稳定到大家的使用主界面即可。

 

相关文章