Unity发布PC平台，接入微信开放平台网页应用，扫码登录不拉起浏览器直接显示二维码在UI上

admin管理员组

文章数量:1569335

文章目录

• • • 一、前言
    • 二、登录微信开放平台，申请网页应用
    • 三、抓取授权二维码原理
    • 四、测试
    • 五、核心代码
    • 六、补充：如何知道用户扫码成功

一、前言

Unity发布PC平台，如果在PC平台想要使用微信登录，需要在微信开放平台申请网页应用，然后使用浏览器访问登录页，获取到二维码，通过手机扫码登录。
这里就涉及到一个问题：浏览器。
方案一：自己做一个迷你浏览器（可以参见我这篇文章：https://blog.csdn/linxinfa/article/details/109030199）；
方案二：直接通过UnityWebRequest访问页面并解析出二维码链接，通过RawImage直接显示在UI上。
本篇文章我介绍方案二的做法。

二、登录微信开放平台，申请网页应用

首先，你需要先在微信开放平台申请网页应用，这样才能有对应的应用参数，用于调用API

三、抓取授权二维码原理

根据官方文旦，构造授权链接
https://open.weixin.qq/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect
其中各个参数根据你申请的应用参数而定。
执行https请求，可以抓取到网页源码，解析出wrp_code节点的src的值，比如这里是：
/connect/qrcode/021XYI6c566IXqbR

然后，就可以构造出二维码的url了，就是前面拼接上域名https://open.weixin.qq/，即
https://open.weixin.qq/connect/qrcode/021XYI6c566IXqbR
然后在Unity中，我们就可用通过UnityWebRequest类加载出二维码的Texture了，直接在UI上显示出来。

四、测试

五、核心代码

using System;
using System.Collections;
using UnityEngine;
using UnityEngine.Networking;
using System.Text.RegularExpressions;
using UnityEngine.UI;

public class Main : MonoBehaviour
{
    public RawImage qrcodeImg;

    void Start()
    {
        StartCoroutine(SendRequest());
    }

    /// <summary>
    /// 开启一个协程，发送请求
    /// </summary>
    /// <returns></returns>
    IEnumerator SendRequest()
    {
        string url = @"https://open.weixin.qq/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect";
        UnityWebRequest uwr = UnityWebRequest.Get(url);
        yield return uwr.SendWebRequest();                               
        if (uwr.isHttpError || uwr.isNetworkError)                       
        {
            Debug.Log(uwr.error); 
        }
        else 
        {
            string htmlStr = uwr.downloadHandler.text;
            //Debug.Log(htmlStr);
            //使用正则表达式匹配搜索qrcode图片
            string pattern = "img class=\"qrcode lightBorder\" src=\"(\\S*)\"";
            Regex rgx = new Regex(pattern);
            Match m = rgx.Match(htmlStr);
            if(null != m)
            {
                //二维码的链接
                string qrcodeUrl = "https://open.weixin.qq" + m.Groups[1].Value;
                //获取二维码图片
                UnityWebRequest qrcodeUwr = UnityWebRequest.Get(qrcodeUrl);
                yield return qrcodeUwr.SendWebRequest();
                if (qrcodeUwr.isHttpError || qrcodeUwr.isNetworkError)
                {
                    Debug.Log(qrcodeUwr.error);
                }
                else
                {
                    //二维码的二进制流
                    var qrcodeBytes = qrcodeUwr.downloadHandler.data;
                    //转换成Texture，给RawImage显示
                    Texture2D tex2D = new Texture2D(256, 256);
                    tex2D.LoadImage(qrcodeBytes);
                    qrcodeImg.texture = tex2D;
                }
            }
        }
    }
}

六、补充：如何知道用户扫码成功

答：上面访问登录页的https链接：https://open.weixin.qq/connect/qrconnect，会带一个redirect_uri参数，用户允许授权后，将会重定向到redirect_uri的网址上，并且带上code和state参数，若用户禁止授权，则重定向后不会带上code参数，仅会带上state参数。
游戏开发者需自行部署一个web服务器，并提供访问链接作为redirect_uri，当redirect_uri被访问时，web服务器通知游戏服务器，游戏服务端再通过通信协议告知游戏客户端扫码结果。
注意，游戏服务端怎么知道这个回调应该通知哪个客户端呢？就是通过state来判断的，最开始游戏客户端应该先请求游戏服务端，让游戏服务端生成一个state，然后游戏客户端再去访问登录页链接https://open.weixin.qq/connect/qrconnect，这样回调redirect_uri时，游戏服务端就可以通过这个state知道是哪个游戏客户端发起的扫码授权了。

本文标签： 平台拉起浏览器网页二维码