更新记录

1.0.0(2025-07-02)

插件发布1.0.0版本

  • 支持设置SPA安全码
  • 支持免密登录
  • 支持VPN账号登录
  • 支持获取登录状态
  • 支持注销功能

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- - - - 5.0 × ×
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
× × × × × × - × × × ×

uni-app x

Chrome Safari Android iOS 鸿蒙 微信小程序
- - 5.0 × × ×

sq-atrust

插件说明

本插件支持 uni-app 和 uni-app x 项目深信服SDK只能真机环境下运行调试。

获取插件对象

import * as aTrustVPN from "@/uni_modules/sq-atrust";

演示界面

<template>
  <view class="content">
    <view class="logo">
      <text class="txt"><image class="txt" id="d2"></image></text>
      <text class="tip">测试Demo</text>
    </view>
    <form @submit="formSubmit">
    <view class="form-box">
        <view class="row-input">
            <text style="width: 110upx;margin-right: 0px;"> VPN地址</text><input type="text" name="mVpnAddress" :value="mVpnAddress" placeholder="服务器" />
        </view>
    <text  class="logo1 tip">账号密码登录</text>
    <view class="row-input">
      <image style="margin-right: 1px;"  ></image>
      <input type="text" name="mUserName" :value="mUserName" placeholder="账号" />
    </view>
    <view class="row-input">
      <image style="margin-right: 1px;" > </image>
      <input type="password" name="mUserPassword" :value="mUserPassword" placeholder="请输入密码"  />
    </view>
    <button class="login-btn" :loading='loading' form-type='submit'>登录</button>
    <button class="login-btn" @click="openSpa" >SPA配置</button>
    <button class="login-btn" @click="logoutVPN" >VPN注销</button>
    </view>
    </form>
    <!--需要自己引入插件,作用就是弹框设置SPA或者修改密码-->
    <uni-popup ref="popup" type="dialog">
      <uni-popup-input2-dialog
          ref="dialog"
          :title="'修改密码'"
          :mode="'input'"
          :double-input="true"
          :value="''"
          :value2="''"
          :placeholder1="'旧密码'"
          :placeholder2="'新密码'"
          @confirm="handleConfirm"
          @close="handleClose"
      />
    </uni-popup>

    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-input-dialog ref="inputClose"  mode="input" title="SPA配置" :value=mSpa
                              placeholder="输入SPA值" @confirm="setSpa"></uni-popup-input-dialog>
    </uni-popup>

  </view>
</template> 

开启全局监听

在根目录下App.vue中添加
import * as aTrustVPN from "@/uni_modules/sq-atrust";
//#ifdef APP-PLUS
`//初始sdk
aTrustVPN.initSDK();
// 注册注销监听
aTrustVPN.onLogout((type, message) => {
  console.log("收到注销事件", type, message);
  uni.showToast({
    title:  '注销成功',
    duration: 3000,
    success: () => {
      uni.reLaunch({
        url: '登录页面'
      });
    }
  }) 
//是否正常登录,没有就跳转到登录页面
let ticketStatus = aTrustVPN.autoTicket()
console.log('是否免密登录成功', ticketStatus)
if (!ticketStatus) {
  uni.reLaunch({
    url: '登录页面'
  });
}
//#endif`

登录页面

data() {
    return {
        showSpa:false, 
        showRepw:false,
        oldPassword:'',
        newPassword:'',
        mSpa:'aaaaaa',
        mVpnAddress: 'https://IP:端口/', 
        mUserName: 'xxx',
        mUserPassword: 'bbbb',
    }
},

设置SPA安全码

methods: {
    setSpa() {
        //都需要需要添加空判断
      if(!this.mVpnAddress){
        util.toastError('请设置请求地址!')
        return
      }
      if(!aTrustVPN.isSpaSeedExist(this.mVpnAddress)){
        const config={"var1":this.mVpnAddress, "var2":this.mSpa,
          success: (e) => { //已经登陆
            util.toastSuccess('SPA设置成功!')
            this.$refs.inputDialog.close()
            },
          fail: (e) => {
            util.toastError('SPA设置失败!')
          },
          complete: (e) => { console.log('前端接收结果',result)
            uni.hideLoading();
          },
        }
        aTrustVPN.setSpaConfig(config)
      }else{
        util.toastSuccess('SPA设置成功!')
        this.$refs.inputDialog.close()
      }
    },
    loginVPN() {
      if(!(this.mVpnAddress && this.mUserName && this.mUserPassword)){
        util.toastError('缺失必要输入值!')
        return
      }
      if (this.getAuthStatus() != "AuthStatusAuthOk") {
        uni.showLoading({
          title: '请稍候...'
        })
        let loginConfig = {
          "var1": this.mVpnAddress, "var2": this.mUserName, "var3": this.mUserPassword,
          success: (result) => {
            uni.hideLoading();
            console.log(result)
            if (result.currentAuthType == 'AUTH_TYPE_NONE') {
              util.toastSuccess('VPN认证成功!')
              uni.reLaunch({
                url: '/pages/auth/login'
              });
            }
          },
          fail: (e) => {
            uni.hideLoading();
            console.log(e);
          },
          complete: (result) => {
            console.log(result)
            uni.hideLoading();
            //修改账号密码
            if (resutl.name() == 'AUTH_TYPE_PASSWORD') {
              //跳转到修改用户名密码界面
              this.openDialog();
            }
          },
        }
        aTrustVPN.startPrimaryAuth(loginConfig)
      }else {
        util.toastSuccess('VPN认证成功!')
        uni.reLaunch({
          url: '/pages/auth/login'
        });
      }
    },
    logoutVPN() {
      if(this.getAuthStatus()=="AuthStatusAuthOk"){
            aTrustVPN.logout();
      }else{
        util.toastSuccess('尚未登录!')
      }
    },
    getAuthStatus() { 
      let res = aTrustVPN.getAuthStatus();
      console.log(res);
      return res;
    },
    loginAutoTicket() {
      //自动免密上线接口,该接口可以实现免密认证。
      if(this.getAuthStatus()!="AuthStatusAuthOk"){
        let res= aTrustVPN.autoTicket();
        console.log(res,this.getAuthStatus());
        return res;
      }
      return false;
    },
     formSubmit: function(e) {
      if(!aTrustVPN.isSpaSeedExist(this.mVpnAddress)){
        util.toastError('请先设置SPA!')
        return
      }
      this.loginVPN()
    }
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.BLUETOOTH" />

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据,插件相关功能调用神奇提供的原生SDK

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问