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 …）

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

流程

大概流程就是：

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

代码

获取二维码

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

/// <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

/// <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);
}

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

/// <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;
}

小结

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

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