微信扫码登录
现如今微信扫码登录已经相当普遍了,但是开发者要去实现还是有一些门槛的:要企业身份、要服务号、要开放平台认证等,这些条件都是个人开发者无法满足的。
对于企业信息系统,操作过程通常是用户登录后先扫码绑定微信账号,绑定后即可在登录页面进行扫码登录。信息系统后台实现其实是在绑定时,把微信端提供的用户的 openid 或 unionid 记录到用户数据表里, 扫码登录时则是从微信端获取用户 openid/unionid,然后到用户表里找对应账户,找到后即以该用户身份登录系统。
其实个人开发者是可以利用微信小程序实现扫码绑定/扫码登录的:个人可以申请微信小程序,且小程序提供了获取二维码以及获取用户 openid的接口。 只不过给用户展示的二维码是小程序码而不是普通二维码。另外虽然那个获取二维码的接口有调用频次限制,官方说明是5000次/分钟,对一般应用系统也够用了。
TIP
本节所述内容对企业身份用户同样适用。
QuickAdmin.Net 内置了对微信小程序扫码的支持,让你可快速实现小程序扫码绑定/扫码登录,可先去在线演示体验一下:在登录页点击微信图标体验扫码登录, 登录后点击右上角用户菜单进入 "我的账户" 页,在里边体验扫码绑定与解绑。
准备小程序
去微信官方页面申请一个小程序测试号,如果之前申请过,可直接到 微信公众平台首页 去登录, 登录进入后记录小程序的 AppID 和 AppSecret 备用。
如果你已经有自己的小程序了,仍然建议你先申请一个测试号进行体验、测试。
准备 Web 项目
Web 项目可自行创建,或直接下载使用 Demo 源码项目。
自行创建 Web 项目
用 QuickAdmin.Net.Templates 里的 "QuickAdmin.Net Solution" 模板创建一个名为 "QRWebAppDemo" 的解决方案,将其中的 "QRWebAppDemo.Web" 设为启动项目,修改好程序集引用, 让项目可编译、运行起来。
- 将项目改为用本地局域网 IP 运行
默认情况下,项目运行地址主机为 localhost 如 https://localhost:57829 或 http://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,
...
},
...
}
}
现在运行项目,登录页上会包含扫码登录方式,点击图片位置将显示二维码:
当然现在还不能用手机扫码,还需准备小程序代码。
使用 Demo 源码项目
点击此处下载 Demo 源码。
下载后打开解决方案,然后按照上边所述修改 QAdminSampleApp.Web 项目即可(改为用本地局域网 IP 运行、启用并配置小程序扫码)。
准备小程序代码
本站提供了已实现扫码过程的小程序代码,可直接使用或拷贝到你的小程序内使用。点击此处下载并解压到文件系统。
启动微信开发者工具,并用 申请了该测试号的微信 登录开发者工具,导入下载的演示小程序代码, 导入时注意 AppID 选取你申请的测试号的 AppID。
打开 app.js 文件,将 globalData.apiRootUrl 改为 Web 项目的运行地址:
编译小程序代码,然后点击预览按钮,用微信扫一下显示的二维码,扫码后能正常打开小程序即可。
扫码绑定/扫码登录
现在可以进行扫码绑定和扫码登录了。注意先确保手机已加入了你的 PC 所在的局域网。
调试运行 Web 项目,在登录页先用微信扫一下二维码,因为尚未与系统账户绑定,手机端会显示:
网页端则会提示:
用账户 test1 登录系统,登录后从右上用户菜单进入 "我的账户" 页面,在其中可进行绑定以及解除绑定,绑定后就可在登录页扫码登录了。
扫码绑定样例:
扫码登录样例: