C#实现微信扫码登录(绕过微信开发平台)

C#实现微信扫码登录

概述

最近公司打算引进触屏终端,需要将已有小程序打包为APP,并且实现微信扫码登录终端。

查阅微信官方文档后发现微信提供了APP端SDK,直接调用接口即可获得登录授权二维码,wow,那岂不是没有我后端啥事了,果断把链接丢给前端,官方文档:微信移动应用扫码登录

然而,因为APP是直接用uniapp打包的,没有找到使用微信SDK的方法;时间紧,也懒得去研究uniapp那一套(有知道咋处理的小伙伴可以告知一下),然后就想了另外一套方案。

使用微信的OAuth2.0授权登录,打算使用做个中间页获取到授权信息;

流程大概是:

  • 将微信小程序绑定至微信开放平台
  • 在微信开放平台中创建一个网站应用
  • 使用新创建的应用的appid和code去登录
  • 拿到access_token、openid、unionid
  • 最终获取用户信息

这样处理有几个问题:

  • 获取到openid和小程序的不是同一个应用的openid,无法绑定用户
  • 可以使用unionid去获取用户信息,但是小程序已经上线一段时间了,上线的时候没有绑定开放平台(我也不知道为什么不绑定,可能之前就没有想过现在这种情况),所以用户都没有unionid,无法绑定用户
  • 使用code换取手机号?OAuth2.0好像没有提供,文档上是没说,也懒得试了(需要微信开放平台创建应用、上传审核资料balabalabala …)

好吧,那只能再换一个方案了。

流程

WXScanQr

大概流程就是:

  • APP终端向后端获取登录二维码
  • 后端返回终端qrid参数以及base64二维码图片,并将二维码信息缓存
  • 用户扫码(可用微信或其他扫码浏览器)
  • APP终端轮询二维码状态接口
  • 后端获取微信调起小程序短链,并将二维码状态更改,重定向短链
  • 用户同意打开小程序,授权登录
  • 后端将登录成功token存入刚才的二维码缓存信息内
  • 此时APP端轮询获取的登录信息,成功登录

代码

获取二维码

生成二维码的代码QRCodeHelper.GenerateQrCodeBase64(qrUrl)就不放了,一搜一大堆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/// <summary>
/// 获取登录二维码
/// </summary>
/// <returns></returns>
public async Task<KeyValuePair<string, string>> GetLoginQrAsync()
{
//构建扫码回调链接
var request = App.HttpContext.Request;
string protocol = request.IsHttps ? "https" : "http";
string host = request.Host.Value;
string fullHost = $"{protocol}://{host}";

var url = $"{fullHost}/api/auth/scan-qr-cb?qrId=";
var qrId = $"qr_{GuidHelper.GenerateSequentialGuid16String()}";
var qrUrl = $"{url}{qrId}";

//构建扫描二维码状态
var scanQrStatus = new ScanQrStatus(qrId, QrStatus.NotScan, string.Empty);

//保存到缓存
var cacheKey = $"{CachesConst.CacheKey_Auth_LoginQr}:{qrId}";
CacheSetOptions cacheOption = new()
{
Expiration = (int)TimeSpan.FromMinutes(10).TotalSeconds,
ExpirationType = ExpirationType.Absolute
};
await _cache.SetAsync(cacheKey, scanQrStatus, cacheOption);

//返回二维码图片
var qrImg = QRCodeHelper.GenerateQrCodeBase64(qrUrl);

return new KeyValuePair<string, string>(qrId, qrImg);
}

扫码回调,用户扫码后进入该接口,修改状态以及重定向至微信短链

此处_wxMpService中封装了调用微信接口的方法,包括token管理,可参考微信官方文档自行封装:获取小程序URL Link

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/// <summary>
/// 扫码回调
/// </summary>
/// <returns></returns>
public async Task<IActionResult> GetScanQrCbAsync([FromQuery] string qrId)
{
//更新扫描二维码状态
ScanQrStatus scanQrStatus = await GetQrStatusAsync(qrId);
if (scanQrStatus.Status != QrStatus.NotScan)
Throws.BizException("二维码已使用,请重新获取");
scanQrStatus.Status = QrStatus.Scanned;

var cacheKey = $"{CachesConst.CacheKey_Auth_LoginQr}:{qrId}";
await _cache.SetAsync(cacheKey, scanQrStatus);

//获取微信提供的小程序短链接
var path = $"/pages/tabbar/mine/index";
var query = $"addCode={qrId}";

var environmentVersion = "release";
if (appSetting.IsDevMode)
{
environmentVersion = "develop";
}

//请求微信短链接口
var urlResult = await _wxMpService.IUrllinkApi.GenerateUrllinkAsync(new GenerateUrlLinkInput()
{
Path = path,
Query = query,
EnvironmentVersion = environmentVersion,
ExpireTimestamp = DateTime.Now.AddMinutes(10).ConvertToTimeStamp()
});

if (!urlResult.IsSuccess)
Throws.BizLogException($"获取小程序短链失败:{urlResult.Message}");

//重定向短链接
var redirectUrl = urlResult.UrlLink;

return new RedirectResult(redirectUrl);
}

轮询获取扫码状态及登录数据接口

1
2
3
4
5
6
7
8
9
10
11
12
/// <summary>
/// 获取二维码状态
/// </summary>
/// <param name="qrId"></param>
/// <returns></returns>
public async Task<ScanQrStatus> GetQrStatusAsync(string qrId)
{
var cacheKey = $"{CachesConst.CacheKey_Auth_LoginQr}:{qrId}";
var status = await _cache.GetAsync<ScanQrStatus>(cacheKey);
if (status.IsNull()) Throws.BizException("二维码已失效,请重新获取!");
return status;
}

小结

总的来说呢,还是解决了当前问题,建议设计时就考虑到后期扩展的问题,直接将应用添加到微信开放平台,这样就不用那么麻烦了。

代码中的已封装的部分没有展示,主要是一个解决遇到问题的方案,大部分都能自行实现,若需要微信接口封装代码后期可考虑写篇文章