在Blazor实现微信小程序扫码登录

Posted 2022-03-18 charset

在Blazor实现微信小程序扫码登录

——使用极简登录模型

最近需要开发一个Blazor Server Side页面，需要用到登录功能，作为某微信小程序的后管。在网上搜了一遍，似乎没有找到合适的，所以就自己造了个轮子。几乎都是代码，从来不需要写注释的我。

• 本文示例后端代码在.NET 6，下用Minimal Api实现。
• 我是CHARSET，转载请保留全文本。

1. Blazor前端显示二维码

在GitHub上随便找了个组件，名字是BlazorZXingJs。使用方法也非常简单。将组件放入<NotAuthorized>标签内部。

 <QRCodeWriter Text="@Code" Width="200" Heigth="200" @ref="writer" />

如果需要每隔一段时间生成，则更换Code的值即可。

2. 使用SignalR将ConnectionId从后端传给Blazor前端

在后端SignalR.Hub接受每次连接时传回

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。

3. 小程序解析快速响应码(QRCode)

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日写