微信扫码登录

现如今微信扫码登录已经相当普遍了,但是开发者要去实现还是有一些门槛的:要企业身份、要服务号、要开放平台认证等,这些条件都是个人开发者无法满足的。

对于企业信息系统,操作过程通常是用户登录后先扫码绑定微信账号,绑定后即可在登录页面进行扫码登录。信息系统后台实现其实是在绑定时,把微信端提供的用户的 openid 或 unionid 记录到用户数据表里, 扫码登录时则是从微信端获取用户 openid/unionid,然后到用户表里找对应账户,找到后即以该用户身份登录系统。

其实个人开发者是可以利用微信小程序实现扫码绑定/扫码登录的:个人可以申请微信小程序,且小程序提供了获取二维码open in new window以及获取用户 openidopen in new window的接口。 只不过给用户展示的二维码是小程序码而不是普通二维码。另外虽然那个获取二维码的接口有调用频次限制,官方说明是5000次/分钟,对一般应用系统也够用了。

TIP

本节所述内容对企业身份用户同样适用。

QuickAdmin.Net 内置了对微信小程序扫码的支持,让你可快速实现小程序扫码绑定/扫码登录,可先去在线演示open in new window体验一下:在登录页点击微信图标体验扫码登录, 登录后点击右上角用户菜单进入 "我的账户" 页,在里边体验扫码绑定与解绑。

准备小程序

微信官方页面open in new window申请一个小程序测试号,如果之前申请过,可直接到 微信公众平台首页open in new window 去登录, 登录进入后记录小程序的 AppID 和 AppSecret 备用。
如果你已经有自己的小程序了,仍然建议你先申请一个测试号进行体验、测试。

准备 Web 项目

Web 项目可自行创建,或直接下载使用 Demo 源码项目。

自行创建 Web 项目

用 QuickAdmin.Net.Templates 里的 "QuickAdmin.Net Solution" 模板创建一个名为 "QRWebAppDemo" 的解决方案,将其中的 "QRWebAppDemo.Web" 设为启动项目,修改好程序集引用, 让项目可编译、运行起来。

  • 将项目改为用本地局域网 IP 运行
    默认情况下,项目运行地址主机为 localhost 如 https://localhost:57829http://localhost:56895,因为后边要用手机端访问,所以需要将项目改为用本地局域网 IP 运行。
    找到你本机的局域网 IP 地址,打开 launchSettings.json 文件,将其中的 "QRWebAppDemo.Web" 下的 "applicationUrl" 配置里的 https 地址删掉, 并把 http 地址里的 localhost 改为你的本机 IP:
{
  "profiles": {
    "QRWebAppDemo.Web": {
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "dotnetRunMessages": true,
      "applicationUrl": "http://192.168.0.116:56895"
    },
    ...
  },
  ...
}









 





现在调试运行,项目地址将为 http://192.168.0.116:56895,将可在局域网内的任意一台主机以及加入了局域网的手机上访问。

删掉 https 地址是因为通常局域网 IP 下不具备 SSL 证书条件。
若本机启用了防火墙,通常 Windows 会弹出防火墙提示,选择允许即可,若选择了拒绝,则需要手工配置防火墙。

当然你也可以保留原 "QRWebAppDemo.Web" 配置,把它复制一份并改个其它名字如 "QRWebAppDemo.LANIP",再改掉 "QRWebAppDemo.LANIP" 下的 "applicationUrl", 调试时选择用 "QRWebAppDemo.LANIP" 启动即可。

TIP

微信小程序现在支持与局域网 IP 通信了,业务系统部署到局域网内的服务器上,也可以实现扫码登录。

  • 启用并配置小程序扫码
    打开 QuickAdmin.json 配置文件,修改或添加以下配置,启用扫码并配置小程序的 AppID 和 AppSecret:
{
  ...
  "RCL": {
    ...
    "EnableInnerWeChatMiniProgAPI": true,
    "DemoWeChatMiniProgAppId": "小程序 AppID",
    "DemoWeChatMiniProgAppSecret": "小程序 AppSecret",
    ...
    "LoginPage": {
      ...
      "EnableWeChatQRCodeLogin": true,
      ...
    },
    ...
  }
}




 
 
 



 





现在运行项目,登录页上会包含扫码登录方式,点击图片位置将显示二维码:
LoginQRCode
当然现在还不能用手机扫码,还需准备小程序代码。

使用 Demo 源码项目

点击此处open in new window下载 Demo 源码。
下载后打开解决方案,然后按照上边所述修改 QAdminSampleApp.Web 项目即可(改为用本地局域网 IP 运行、启用并配置小程序扫码)。

准备小程序代码

本站提供了已实现扫码过程的小程序代码,可直接使用或拷贝到你的小程序内使用。点击此处open in new window下载并解压到文件系统。
启动微信开发者工具open in new window,并用 申请了该测试号的微信 登录开发者工具,导入下载的演示小程序代码, 导入时注意 AppID 选取你申请的测试号的 AppID。
打开 app.js 文件,将 globalData.apiRootUrl 改为 Web 项目的运行地址:
Modify app.js
编译小程序代码,然后点击预览按钮,用微信扫一下显示的二维码,扫码后能正常打开小程序即可。

扫码绑定/扫码登录

现在可以进行扫码绑定和扫码登录了。注意先确保手机已加入了你的 PC 所在的局域网。
调试运行 Web 项目,在登录页先用微信扫一下二维码,因为尚未与系统账户绑定,手机端会显示:
WxNotBind
网页端则会提示:
BrowserNotBind

用账户 test1 登录系统,登录后从右上用户菜单进入 "我的账户" 页面,在其中可进行绑定以及解除绑定,绑定后就可在登录页扫码登录了。
扫码绑定样例:
WxBind
扫码登录样例:
WxLogin