微信开发中扫码登录处理步骤详解(微信开放平台如何扫码登录)

现在很多网站都使用微信开放平台的扫码登录认证处理，相当于把身份认证交给更权威的第三方进行认证，不需要在应用网站存储用户密码。本文介绍如何基于微信开放平台的扫码登录网站。

1.对于开放平台的认证，如果想使用网站的扫码登录，需要进行微信开放平台账号的开发者资格认证，提交相关材料，并缴纳每年300元的认证费用。

经过认证，建立相关网站应用后，有相关的APPID和APPSecret，可以利用这些关键参数获取相关用户信息。

网站的申请详情界面如下图所示。

整个开放平台感觉不怎么样，但是需要付费认证才能使用这些功能感觉不是很好。

我们采用的扫码登录需要通过开放平台获取用户的信息，所以还需要设置获取用户基本信息的接口域名，否则无法获取信息，导致重定向错误。

在界面权限Web账户授权修改入口设置域名，获取用户基本信息，如下图所示。

然后在弹出的对话框中输入授权回拨的域名。

该设置可以确保获取用户信息。

2.扫码登录及网站应用具体使用说明微信登录是基于OAuth2.0协议标准的微信OAuth2.0授权登录系统。

在微信OAuth2 2.0授权登录访问之前，在微信开放平台注册开发者账号，拥有一个被批准的网站应用，获取相应的AppID和AppSecret。申请微信登录，审核通过后，就可以开始接入流程了。

微信OAuth2.0授权登录允许微信用户使用微信身份安全登录第三方应用或网站。微信用户授权登录接入微信OAuth2.0的第三方应用后，第三方可以获取用户的接口调用凭证(access_token)，通过access_token可以调用微信开放平台的授权关系接口，可以实现微信用户的基本开放信息，帮助用户实现基本的开放功能。

微信OAuth2.0授权登录目前支持authorization_code模式，适合与服务器端进行应用授权。这种模式的总体流程是:

1.第三方发起微信授权登录请求。微信用户允许第三方应用授权后，微信会拉起应用或者重定向到第三方网站，并携带授权的临时票的代码参数；2.在code参数中加入AppID和AppSecret，交换access _ token通过API3.通过access_token进行接口调用，获取用户的基础数据资源或者帮助用户实现基本操作。

获取访问令牌时序图:

从上图我们可以大致了解一下扫码和登陆的全过程。

3.扫码登录每一步的处理1)用户身份的绑定

为了实现二维码扫描登录，我们需要在现有系统中绑定用户的微信，从而判断用户的身份，实现用户扫码时的自动登录过程。

我们可以在用户管理中进行统一设置，也可以在常规用户登录后进行设置(用户名+密码)。这主要取决于我们是否需要保留登录的用户名和密码。

比如可以在用户管理中统一绑定，即在创建用户时，用户可以绑定微信，获取微信的唯一ID。

也可以保留用户名和密码的登录方式，让用户登录系统后自行绑定微信。

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

& ltp id = & quotpWechat & quotclass = & quoteasyui -dialog & quot；style = & quot宽度:450px高度:350px填充:10px 20px & quotclosed = & quottrue & quotresizable = & quottrue & quotmodal = & quottrue & quoticoncls = & quoticon -设置& quot& gt& ltp & gt& lth4 & gt扫描用户二维码并绑定

//绑定微信登录函数bind we chat(){ var URL = " http://www.iqidi.com/H5/BindWechat? id = @ Session

即特定的开放平台应用对应特定的微信账号，这样我们就可以充分利用配置进行处理。

上述BindAccount处理的逻辑是获取必要的信息，然后在数据库级别验证身份信息。具体代码如下所示。

///& lt；总结& gt///绑定用户微信号//</summary & gt；///& lt；param name = & quotid & quot& gt帐号</param & gt；///& lt；returns & gt& lt/returns & gt；public action result bind account(){ web appInfo appInfo = get web app(config data。web appid)；account info account info = get account(appInfo。账号)；var ht result = GetOpenIdAndUnionId(account info。UniteAppId，accountInfo。UniteAppSecret)；//为了方便起见，存储openid。string openid = htResult

2)用户账号绑定扫码登录流程后，可以通过扫码登录。扫码回拨的时候，我们有自己的判断过程。扫码界面如下图(我们除了保留登录的用户名和密码外，还增加了一个扫码登录流程)。

如果是Bootstrap的界面效应

如果是EasyUI的界面效果

这个二维码的显示规则和上一个类似，只是连接地址不同。这个地方用的是开放平台的接口，也就是我们前面说的开放平台认证的接口。

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

& lt！--二维码扫描登陆界面第4层+->:& lt；p id = & quotpWechat & quotclass = & quoteasyui -dialog & quot；style = & quot宽度:550px高度:500px填充:10px 20px & quotclosed = & quottrue & quotresizable = & quottrue & quotmodal = & quottrue & quoticoncls = & quoticon -设置& quot& gt& ltp id = & quot登录容器& quotalign = & quot中心& quot& gt& lt/p & gt；& ltp align = & quot右& quot& gt& lta href = & quotJavaScript:void(0)& quot；class = & quoteasyui -link button & quot；iconcls = & quot图标-取消& quotonclick = & quotJavaScript:$(& # 039；# pWechat & # 039).对话框(& # 039；关闭& # 039；)& quot& gt关闭

& lt！--使用微信扫码登录-->；& lt脚本src = & quothttp://RES . wx . QQ . com/connect/zh _ CN/html edition/js/wxlogin . js & quot；& gt& lt/script & gt；& lt脚本语言= & quotjavascript & quot& gt函数OpenJSLogin(){ var obj = new WxLogin({ id:& quot；登录容器& quot，appid:& quot；@ ViewBag.appid & quot，范围:& quotsnsapi _ login & quot，redirect _ uri:& quot；@ ViewBag.redirect _ uri & quot，状态:& quot@ ViewBag.state & quot，风格:& quot黑色& quot，href:& quot；。import power box。二维码{宽度:200px} & quot});//打开绑定窗口$(& quot；# pWechat & quot).对话框(& # 039；打开& # 039；).对话框(& # 039；setTitle & # 039, '用微信扫码登录& # 039；);} & lt/script & gt；其中的参数，比如APPID，是我们认证开放平台参数的来源。

这些信息是从MVC控制器的后台获取，然后绑定在ViewBag中，方便接口前端使用。

//登录web appinfo appinfo = bll factory < web app & gt；. Instance.FindByID(ConfigData。web appid)；ArgumentValidationCheckForNullReference(appInfoWeb应用程序appInfo & quot);如果(appInfo！= null) { ViewBag.appid = appInfo。OpenAppIDViewBag.redirect_uri = appInfo。LoginCallBackUrlViewBag.state = ConfigData。AuthState}其中redirect_uri是通过数据库获取的LoginCallBackUrl地址，类似于以下格式:www.iqidi.com/H5/callback? uid = iqid software

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

通过开放平台的APPID和APPSecret获取对应的接口调用凭证，再根据接口凭证和openid获取用户公共平台的统一UnionID，这是我们用户的唯一标识。代码如下所示。

var result = baseApi。GetAuthToken(appid，appsecret，code)；如果(结果！= null & amp& amp！字符串。IsNullOrEmpty(result . OpenID)){ OpenID = result . OpenID；var unionResult = baseApi。GetSnsapiUserInfo(result . access _ token，result . OpenID)；总远视添加(& quotopenid & quot，OpenID)；总远视添加(& quotunionid & quot，unionResult！= null？union result . unionid:& quot；");}有了unionid，我们就可以根据这个id在我们的用户数据库中查找对应的用户，如下面的代码所示。

//开放平台的OpenID，不是微信官方账号的OpenID，如果(！字符串。IsNullOrEmpty(openid)和amp& amp！字符串。IsNullOrEmpty(unionid)){ UserInfo UserInfo = bll factory & lt；用户& gt. instance . findbyuunionid(unionid)；然后判断我们去的用户信息是否正确，如下面的代码所示。

如果(userInfo！= null){ common result log in result = check log in(userInfo。姓名)；如果(！loginResult。成功){ LogHelper。信息(字符串。格式(& quot用户登录失败{ 0 } & quot，loginResult。error message))；}//重定向地址变量url = appInfo。成功登录后的HomeUrl//比如:http://www.iqidi.com/Home返回重定向(URL)；}如果不成功，那么我们可以定向到指定的接口。

//如果不成功，消息ViewBag。Error = "获取信息失败，登录错误"；返回视图(& quotLoginError & quot);如果我们登录成功后需要设置一些会话信息或者Cookie信息，那么我们可以通过CheckLogin函数来处理。