如何使用Blazor技术实现微信小程序扫码登录功能？
- 内容介绍
- 文章标签
- 相关推荐
本文共计610个文字，预计阅读时间需要3分钟。
在Blazor实现微信小程序扫码登录——采用极简登录模式+最近需要开发一个Blazor Server Side页面，需要用到登录功能，作为某微信小程序的后管。网上搜索了一圈，似乎没有找到合适的。
在Blazor实现微信小程序扫码登录 ——使用极简登录模型最近需要开发一个Blazor Server Side页面，需要用到登录功能，作为某微信小程序的后管。在网上搜了一遍，似乎没有找到合适的，所以就自己造了个轮子。几乎都是代码，从来不需要写注释的我。
- 本文示例后端代码在
.NET 6，下用Minimal Api实现。 - 我是CHARSET，转载请保留全文本。
在GitHub上随便找了个组件，名字是BlazorZXingJs。使用方法也非常简单。将组件放入<NotAuthorized>标签内部。
<QRCodeWriter Text="@Code" Width="200" Heigth="200" @ref="writer" />
如果需要每隔一段时间生成，则更换Code的值即可。
public override async Task OnConnectedAsync() {
await Clients.Caller.SendAsync("ConnectionId", Context.ConnectionId);
await base.OnConnectedAsync();
}
Blazor前端接收到ConnectionId
hubConnection.On<string>("ConnectionId", id => connectionId = id);
需要注意到的是，Blazor前端在收到此Id后才显示二维码
if (!string.IsNullOrEmpty(connectionId)) {
code = Guid.NewGuid().ToString();
Membership.RegisterScanCode(code);
Code = $"{code}|{connectionId}";
InvokeAsync(StateHasChanged);
}
为了简单起见，Code使用上述逻辑生成。图像识别的结果是注册的二维码Code和connectionId。
function OnQRLogin() {
wx.scanCode({ onlyFromCamera: true, scanType: ['qrCode'],
success: function (res) {
const split = res.result.split('|')
wx.request({
url: `${host}/e/${token}/${split[0]}/${split[1]}`,
success: function (rt) {
if (rt.data && rt.data.success) {
wx.showModal({ title: '成功', content: '请注意登录页面是否成功的信息', icon: 'success' })
}
}
})
}
})
}
4. 后端服务根据ConnectionId将Token和二维码Code回送给Blazor前端
application.MapGet("/e/{token}/{recog}/{cid}", async Task<SimpleResponse>
(string token, string recog, string cid, [FromServices] ChatHubHelper hub) => {
var response = new SimpleResponse();
await hub.SendRequest(cid, new LoginRequest { ScanCode = recog, Token = token });
response.Success = true;
return response;
});
5. Blazor前端收到此回执后正常使用极简模型登录
hubConnection.On<LoginRequest>("LoginRequest", async request => {
connectionId = "已扫描,请静待结果……";
var response = await AuthStateProvider.Login(request);
if (response.Success) {
Membership.UnRegisterScanCode(code);
await Message.Success("登录成功");
} else {
await Message.Warn(response.Message);
}
await InvokeAsync(StateHasChanged);
});
初版在2022年3月17日写
本文共计610个文字，预计阅读时间需要3分钟。
在Blazor实现微信小程序扫码登录——采用极简登录模式+最近需要开发一个Blazor Server Side页面，需要用到登录功能，作为某微信小程序的后管。网上搜索了一圈，似乎没有找到合适的。
在Blazor实现微信小程序扫码登录 ——使用极简登录模型最近需要开发一个Blazor Server Side页面，需要用到登录功能，作为某微信小程序的后管。在网上搜了一遍，似乎没有找到合适的，所以就自己造了个轮子。几乎都是代码，从来不需要写注释的我。
- 本文示例后端代码在
.NET 6，下用Minimal Api实现。 - 我是CHARSET，转载请保留全文本。
在GitHub上随便找了个组件，名字是BlazorZXingJs。使用方法也非常简单。将组件放入<NotAuthorized>标签内部。
<QRCodeWriter Text="@Code" Width="200" Heigth="200" @ref="writer" />
如果需要每隔一段时间生成，则更换Code的值即可。
public override async Task OnConnectedAsync() {
await Clients.Caller.SendAsync("ConnectionId", Context.ConnectionId);
await base.OnConnectedAsync();
}
Blazor前端接收到ConnectionId
hubConnection.On<string>("ConnectionId", id => connectionId = id);
需要注意到的是，Blazor前端在收到此Id后才显示二维码
if (!string.IsNullOrEmpty(connectionId)) {
code = Guid.NewGuid().ToString();
Membership.RegisterScanCode(code);
Code = $"{code}|{connectionId}";
InvokeAsync(StateHasChanged);
}
为了简单起见，Code使用上述逻辑生成。图像识别的结果是注册的二维码Code和connectionId。
function OnQRLogin() {
wx.scanCode({ onlyFromCamera: true, scanType: ['qrCode'],
success: function (res) {
const split = res.result.split('|')
wx.request({
url: `${host}/e/${token}/${split[0]}/${split[1]}`,
success: function (rt) {
if (rt.data && rt.data.success) {
wx.showModal({ title: '成功', content: '请注意登录页面是否成功的信息', icon: 'success' })
}
}
})
}
})
}
4. 后端服务根据ConnectionId将Token和二维码Code回送给Blazor前端
application.MapGet("/e/{token}/{recog}/{cid}", async Task<SimpleResponse>
(string token, string recog, string cid, [FromServices] ChatHubHelper hub) => {
var response = new SimpleResponse();
await hub.SendRequest(cid, new LoginRequest { ScanCode = recog, Token = token });
response.Success = true;
return response;
});
5. Blazor前端收到此回执后正常使用极简模型登录
hubConnection.On<LoginRequest>("LoginRequest", async request => {
connectionId = "已扫描,请静待结果……";
var response = await AuthStateProvider.Login(request);
if (response.Success) {
Membership.UnRegisterScanCode(code);
await Message.Success("登录成功");
} else {
await Message.Warn(response.Message);
}
await InvokeAsync(StateHasChanged);
});
初版在2022年3月17日写