跳到主要内容

连接到Karing

物料​

  • karing version >= 1.0.37.490
  • karing-connect
    • 包含app接口的二次包装karing.js
    • 以及v2board、sspanel的连接案例代码

一、演示​

机场连接到karing​

  • 以下视频将展示 当机场(服务商/ISP站点) 与karing配置完连接的情况下

  • 用户在app上完成登录闭环, 在机场页面登录账号

    • 自动导入配置、自动完成机场信息拉取, 并覆盖原有karing默认配置.

  • 视频演示:

流程对比​

  • 对比用户完整使用魔法软件的流程, 采用karing-connect方式之后, 将大大简化.

  • 尤其是小白用户, 不需要理解订阅与配置，仅需知道 咒语 和 机场账号

  • connect diff

二、什么是 karing-connect​

  • 用户从karing内置webview容器打开机场(VPN服务商)登录页面, 实现登录即导入配置.

完成连接之后的优势​

  • 用户登录闭环, 一键连接.
  • APP内置机场信息
    • 可添加 机场首页、FAQ、客服、社交账号等信息，置顶显示在Karing菜单.
  • 功能可配置:
    • 提供消息推送功能, 可自定义平台、渠道、版本.
    • 套餐到期续费提醒, 可直接点击进入机场产品页.
    • todo 机场可根据自身特性定制部分APP默认配置, 比如ipv6、dns等.
  • 无附加广告:
    • Karing设置页专项流量广告位仅显示该机场链接.
    • APP内不再露出其他竞品服务
  • 安全:
    • 所有连接使用的代码公开透明, 机场也可自主部署, 根据需求修改.
    • karing不记录+收集任何账号密码.

未来可能​

  • todo 机长可修改默认配置及规则
  • todo 机场专版APP, 自定义logo、名称、配置

三、绑定/连接的方法​

三步走​

  • 1 通过 https://harry.karing.app/provider 注册并创建服务商
  • 2 修改机场代码, 增加连接页面, 比如 http://v2board.local/karing-connect.html
    • 载入 karing.js
    • 并调用 _karing对象的config方法导入配置
  • 3 在服务商管理后台 添加 咒语 和 连接页地址

案例连接​

  • 如果你使用的是 sspanel和v2board比较新的版本, 那么这里已经有两个完整案例供参考:

📄️ 🎻案例: 通过V2Board绑定Karing

📄️ ⛷️案例: SSPanel连接Karing

karing-connect 文件说明​

├── karing.js        Karing APP开放接口的二次封装
├── karing.min.js    karing.js的压缩版本, 未做混淆
├── sspanel
│   └── KaringController.php   sspanel案例中新加的控制器
└── v2board
    ├── custom.js              v2board案例中添加的js代码
    └── karing-connect.html    案例连接页面

karing.js 使用示例​

载入方式​

  1. 修改html
<script src="https://harry.karing.app/assets/karing.min.js"></script>
  1. js加载
// 创建 script 标签
var script = document.createElement('script');
script.src = "https://harry.karing.app/assets/karing.min.js";

// 当脚本加载完成后, 执行某一方法
script.onload = function () {
    something_todo();
};

// 将 script 标签添加到 document 中，开始加载 JS 文件
document.body.appendChild(script);

主要方法调用​


// 预设 PID
(async function () {
    try {
        //参数:
        //  PID 在harry后台创建服务商时 自动分配的id
        //  预设的意义在于预加载配置文件
        //      1.校验配置.
        //      2.减少后续用户等待时间.
        const result = _karing.prepare(PID);
        if (result == '') {
            //3秒自动关闭提示框
            _karing.toast('Successfully prepared, next step...', true, 3);
        }
        else {
            _karing.error('prepare failed, err:', result);
        }
    } catch (error) {
        console.error('Preparation failed:', error);
    }
})();

// 添加karing配置
window.onload = async function () {
    try {
        //参数:
        //  PID置空 app自动读取prepare设置的值
        //  user_nick: 用户昵称
        //  link: 机场订阅链接
        //  link_name: 订阅名称, 可用机场名
        const result = await _karing.config(null, user_nick, link, link_name);
        if (result == '') {
            //3秒自动关闭提示框
            _karing.toast('Import configuration successful, enjoy!', true, 3);
        }
        else {
            _karing.error('config failed, err:', result);
        }
    } catch (error) {
        console.error('Configuration failed:', error);
    }
};

四、和karing进行合作​