使用UnityWebGL开发密码加密网页记录

0.参考文档

(47条消息) 【问题汇总】Unity发布WebGL项目时需要注意的问题_unity webgl gzip_TypeOtaku的博客-CSDN博客

Unity开发优化方案：WebGL篇 | U3DC.COM | 优三帝研究院

(47条消息) C#实现 AES算法加密_c# aes加密算法_yangzm996的博客-CSDN博客

Unity单机或联机游戏项目上传至云服务器的一个小方法 - 知乎 (zhihu.com)

(47条消息) UnityWebGL2021 全屏--新版本_unity webgl 全屏_//记得注释的博客-CSDN博客

GitHub - kou-yeung/WebGLInput: IME for Unity WebGL

(49条消息) 分享一个unity发布webgl 的复制粘贴功能的插件，unity打包webgl的坑_unity webgl 复制粘贴_似水流年wxk的博客-CSDN博客

1.Unity发布WebGL项目时需要注意的问题

1.1 勾选DecompressionFallBack

1.1.1 为什么

Unity对该选项的解释:WebGL：压缩构建和服务器配置 - Unity 手册
如果没有勾选DecompressionFallBack,则需要配置您的web服务器设置,详情可以看WebGL：服务器配置代码示例 - Unity 手册

备注:使用腾讯云或阿里云的对象存储时,可以不用管这个问题,因为他们都自动设置了这些.

1.1.2 如何设置

勾选Edit-->ProjectSettings-->Player-->PublishingsSettings-->DecompressionFallback 选项

1.2 在web服务器中设置压缩请求头

1.2.1 为什么

Unity默认会对资源和代码做压缩处理,以提高网页加载速度,在Edit-->ProjectSettings-->Player-->PublishingsSettings-->CompressionFormat中可以设置是否压缩和压缩格式,默认为Gzip.
不设置压缩请求头会导致报错,如果你无法配置服务器,可以设置Edit-->ProjectSettings-->Player-->PublishingsSettings-->CompressionFormat为Disable,也就是不压缩,但是这会对导致网页加载速度变慢

备注:使用腾讯云或阿里云的对象存储时,可以不用管这个问题,因为他们都自动设置了这些.

1.2.2 如何设置

在Nginx的配置文件中添加以下代码,以支持解压Unity打包出的资源 其他的web服务器请自行搜索如何添加请求头

location ~.+\.(unityweb|gz|js.gz)$ {
      add_header Content-Encoding gzip;
}

1.3 解决WebGL的InputField无法唤醒移动端键盘,且不支持复制和粘贴问题

1.3.1 为什么

目前我使用的版本是Unity2020.3.25,当前使用UGUI的InputField是无法唤醒移动端键盘和复制粘贴的

1.3.2 如何设置

这里提供一个UGUI的WebGL插件的GitHub地址:GitHub - kou-yeung/WebGLInput: IME for Unity WebGL

使用该插件即可解决本问题,插件本身自带演示场景,可以参考演示场景使用

1.4 设置WebGL网页为全屏

以下引用自这篇文章,(49条消息) UnityWebGL2021 全屏--新版本_unity webgl 全屏_//记得注释的博客-CSDN博客

一、首先设置：
1、打包之后的html 文件中 < script >中增加Reset方法
（在现有的html文件的< script > 此处 </ script >添加下面的代码即可）

*示例图:*

img

*代码段:*

function Reset() {
var canvas = document.getElementById("#canvas");
canvas.height= document.body.clientHeight;
canvas.width = document.body.clientWidth;
}
function Reset(){
var canvas = document.getElementById("#canvas");
canvas.height= document.documentElement.clientHeight;
canvas.width = document.documentElement.clientWidth;
}

2、在Html文件的 < body >标签增加onload和onresize调用Reset方法
（同样在现有的html文件中，找到 中添加）

示例图：

img

*代码段:*

  onload="Reset()" onresize="Reset()"

3、style.css设置.
（找到打包webgl的TemplateData文件夹的style.css文件，添加如下代码）.
*示例图：*

img

*代码段:*

html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;}
.webgl-content{width: 100%; height: 100%;}
.unityContainer{width: 100%; height: 100%;}

以上设置之后，会发现手机能够完全全屏，但PC浏览不正常，于是进行下一步。

二、其次关于PC浏览器的设置

找到打包的Html文件，找到以下代码段，复制粘贴即可：(将示例图中的代码替换成代码段中的代码)
示例图：

img

*代码段:*

 if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        container.className = "unity-mobile";
        config.devicePixelRatio = 1;
      } else {
          container.className = "unity-mobile";
          config.devicePixelRatio = 1;
      }

三、删除以下内容：< div-“unity-footer”> 和 alert（message）

示例图：

img

img

四、正常这些已经满足全屏要求了，logo和背景修改很简单：

方式 1：文件夹把素材替换掉
方式 2：修改模板代码

2.如何使用ASE加密自己String

附上我的代码

using System;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using System.Security.Cryptography;
using System.Text;
using UnityEngine;
using UnityEngine.UI;


/// <summary>
/// 加密算法
/// </summary>
public class Ep : MonoBehaviour
{
    public static Ep ep;
    public InputField inText;
    public InputField outText;
    public InputField keyText;

    private void Awake()
    {
        ep = this;
        WebGLInput.captureAllKeyboardInput = false;
    }

    public static void Encryption()
    {
        string key = "";
        if (ep.keyText.text.Length < 250)
        {
            key = GetIv(256);
            ep.keyText.text = key;
        }
        else
        {
            key = ep.keyText.text;
        }

        ep.outText.text = AESEncrypt(ep.inText.text, key);
        Debug.Log(key);
    }

    public static void Decryption()
    {
        string key = ep.keyText.text;
        Debug.Log(key);
        ep.outText.text = AESDecrypt(ep.inText.text, key);
    }

    public static void Clear()
    {
        ep.inText.text = "";
        ep.keyText.text = "";
        ep.outText.text = "";
    }

    //定义默认密钥
    private static byte[] _aesKeyByte = { 0x12, 0x34, 0x56, 0x78, 0x90, 0xAB, 0xCD, 0xEF, 0x12, 0x34, 0x56, 0x78, 0x90, 0xAB, 0xCD, 0xEF };
    private static string _aesKeyStr = Encoding.UTF8.GetString(_aesKeyByte);

    /// <summary>
    /// 随机生成密钥，默认密钥长度为32，不足在加密时自动填充空格
    /// </summary>
    /// <param name="n">密钥长度</param>
    /// <returns></returns>
    public static string GetIv(int n)
    {
        string s = "abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        char[] arrChar = new char[s.Length];
        for (int i = 0; i < s.Length; i++)
        {
            arrChar[i] = Convert.ToChar(s.Substring(i, 1));
        }
        StringBuilder num = new StringBuilder();
        System.Random rnd = new System.Random(DateTime.Now.Millisecond);
        for (int i = 0; i < n; i++)
        {
            num.Append(arrChar[rnd.Next(0, arrChar.Length)].ToString());
        }
        _aesKeyByte = Encoding.UTF8.GetBytes(num.ToString());
        return _aesKeyStr = Encoding.UTF8.GetString(_aesKeyByte);
    }


    /// <summary>  
    /// AES加密(无向量)  
    /// </summary>  
    /// <param name="plainBytes">被加密的明文</param>  
    /// <param name="key">密钥</param>  
    /// <returns>密文</returns>  
    public static string AESEncrypt(String Data, String Key)
    {
        MemoryStream mStream = new MemoryStream();
        RijndaelManaged aes = new RijndaelManaged();

        byte[] plainBytes = Encoding.UTF8.GetBytes(Data);
        Byte[] bKey = new Byte[32];
        Array.Copy(Encoding.UTF8.GetBytes(Key.PadRight(bKey.Length)), bKey, bKey.Length);

        aes.Mode = CipherMode.ECB;
        aes.Padding = PaddingMode.PKCS7;
        aes.KeySize = 128;
        //aes.Key = _key;  
        aes.Key = bKey;
        //aes.IV = _iV;  
        CryptoStream cryptoStream = new CryptoStream(mStream, aes.CreateEncryptor(), CryptoStreamMode.Write);
        try
        {
            cryptoStream.Write(plainBytes, 0, plainBytes.Length);
            cryptoStream.FlushFinalBlock();
            return Convert.ToBase64String(mStream.ToArray());
        }
        finally
        {
            cryptoStream.Close();
            mStream.Close();
            aes.Clear();
        }
    }


    /// <summary>  
    /// AES解密(无向量)  
    /// </summary>  
    /// <param name="encryptedBytes">被加密的明文</param>  
    /// <param name="key">密钥</param>  
    /// <returns>明文</returns>  
    public static string AESDecrypt(String Data, String Key)
    {
        Byte[] encryptedBytes = Convert.FromBase64String(Data);
        Byte[] bKey = new Byte[32];
        Array.Copy(Encoding.UTF8.GetBytes(Key.PadRight(bKey.Length)), bKey, bKey.Length);

        MemoryStream mStream = new MemoryStream(encryptedBytes);
        //mStream.Write( encryptedBytes, 0, encryptedBytes.Length );  
        //mStream.Seek( 0, SeekOrigin.Begin );  
        RijndaelManaged aes = new RijndaelManaged();
        aes.Mode = CipherMode.ECB;
        aes.Padding = PaddingMode.PKCS7;
        aes.KeySize = 128;
        aes.Key = bKey;
        //aes.IV = _iV;  
        CryptoStream cryptoStream = new CryptoStream(mStream, aes.CreateDecryptor(), CryptoStreamMode.Read);
        try
        {
            byte[] tmp = new byte[encryptedBytes.Length + 32];
            int len = cryptoStream.Read(tmp, 0, encryptedBytes.Length + 32);
            byte[] ret = new byte[len];
            Array.Copy(tmp, 0, ret, 0, len);
            return Encoding.UTF8.GetString(ret);
        }
        finally
        {
            cryptoStream.Close();
            mStream.Close();
            aes.Clear();
        }
    }

}
最后修改：2023 年 09 月 20 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏