From bb242ec32108aa23a8aafc91df8cbaf137b91157 Mon Sep 17 00:00:00 2001
From: iGeeky <igeeky.io@gmail.com>
Date: Sun, 18 Jun 2023 17:43:02 +0800
Subject: [PATCH] dashboard login with captcha

---
 console/src/api/user.js               |   8 ++
 console/src/i18n/langs/en.js          |   2 +
 console/src/i18n/langs/zh-cn.js       |   2 +
 console/src/icons/svg/refresh.svg     |   1 +
 console/src/views/login/index.vue     |  99 +++++++++++++++++++++-
 docs/deploy-cn.md                     |   1 +
 docs/deploy.md                        |   3 +-
 server/conf/config.js                 |   1 +
 server/package.json                   |   1 +
 server/src/controllers/captcha.js     |  25 ++++++
 server/src/controllers/user.js        |  11 +++
 server/src/middlewares/token-check.js |   1 +
 server/src/util/captcha-util.js       |  53 ++++++++++++
 server/test/24.captcha.test.js        | 117 ++++++++++++++++++++++++++
 14 files changed, 322 insertions(+), 3 deletions(-)
 create mode 100644 console/src/icons/svg/refresh.svg
 create mode 100644 server/src/controllers/captcha.js
 create mode 100644 server/src/util/captcha-util.js
 create mode 100644 server/test/24.captcha.test.js

diff --git a/console/src/api/user.js b/console/src/api/user.js
index 954a71c..6475652 100644
--- a/console/src/api/user.js
+++ b/console/src/api/user.js
@@ -60,6 +60,14 @@ export async function getLoginOptions() {
   })
 }
 
+export async function getCaptchaData() {
+  return await request({
+    url: '/captcha',
+    method: 'get',
+    params: { },
+  })
+}
+
 export async function listUsers(args) {
   return await request({
     url: '/user/list',
diff --git a/console/src/i18n/langs/en.js b/console/src/i18n/langs/en.js
index 3675ac5..db201a7 100644
--- a/console/src/i18n/langs/en.js
+++ b/console/src/i18n/langs/en.js
@@ -87,6 +87,7 @@ const en = {
 
     'loginPromptUsername': 'Username',
     'loginPromptPassword': 'Password',
+    'loginPromptCaptcha': 'Captcha',
     'loginPromptLoginForm': 'Console Login',
     'loginPromptStandardLogin': 'Standard',
 
@@ -248,6 +249,7 @@ const en = {
 
       'ERR_USERNAME_MISSING': 'Username missing!',
       'ERR_PASSWORD_MISSING': 'Password missing!',
+      'ERR_CAPTCHA_INVALID': 'captcha error',
       'ERR_APPID_NOT_FOUND': 'Appid not found!',
       'ERR_USER_NOT_FOUND': 'User not found',
       'ERR_PASSWORD_ERROR': 'Password error',
diff --git a/console/src/i18n/langs/zh-cn.js b/console/src/i18n/langs/zh-cn.js
index e643747..c373fe3 100644
--- a/console/src/i18n/langs/zh-cn.js
+++ b/console/src/i18n/langs/zh-cn.js
@@ -87,6 +87,7 @@ const zhcn = {
 
     'loginPromptUsername': '用户名',
     'loginPromptPassword': '密码',
+    'loginPromptCaptcha': '验证码',
     'loginPromptLoginForm': '控制台登录',
     'loginPromptStandardLogin': '标准登录',
 
@@ -248,6 +249,7 @@ const zhcn = {
 
       'ERR_USERNAME_MISSING': '缺少用户名',
       'ERR_PASSWORD_MISSING': '缺少密码',
+      'ERR_CAPTCHA_INVALID': '验证码错误',
       'ERR_APPID_NOT_FOUND': 'Appid不存在',
       'ERR_USER_NOT_FOUND': '用户不存在',
       'ERR_PASSWORD_ERROR': '密码错误',
diff --git a/console/src/icons/svg/refresh.svg b/console/src/icons/svg/refresh.svg
new file mode 100644
index 0000000..de7f665
--- /dev/null
+++ b/console/src/icons/svg/refresh.svg
@@ -0,0 +1 @@
+<svg height="800" viewBox="0 0 32 32" width="800" xmlns="http://www.w3.org/2000/svg"><path d="m15.544 28.08c-.002-.006-.008-.01-.012-.015l-2.873-4.489c-.204-.335-.646-.454-.992-.266l-.256.157c-.344.188-.337.673-.133 1.008l1.841 2.857c-.157-.035-.316-.063-.471-.103-3.224-.843-5.953-3.026-7.485-5.988-1.448-2.797-1.72-5.99-.766-8.992s3.118-5.452 5.915-6.899c.476-.247.662-.832.416-1.308-.246-.477-.832-.663-1.308-.416-3.258 1.686-5.763 4.54-6.874 8.036s-.794 7.215.892 10.473c1.786 3.448 4.963 5.989 8.72 6.973.043.011.087.017.13.028l-2.541 1.288c-.344.189-.458.613-.254.948l.098.256c.205.335.557.454.9.266l4.651-2.381c.006-.004.012-.003.018-.007l.312-.171c.172-.095.287-.249.332-.422.047-.172.025-.364-.076-.531zm13.015-18.055c-1.783-3.447-4.862-5.988-8.618-6.972-.267-.07-.541-.124-.814-.179l2.494-1.265c.344-.189.549-.614.345-.949l-.099-.255c-.205-.336-.648-.454-.991-.267l-4.651 2.381c-.006.003-.012.002-.018.006l-.312.171c-.173.095-.287.249-.332.422-.047.172-.025.364.077.53l.185.304c.003.006.008.01.012.016l2.873 4.489c.203.335.646.454.991.266l.226-.157c.344-.188.366-.673.163-1.008l-1.85-2.87c.407.063.811.138 1.207.242 3.226.845 5.856 3.027 7.387 5.986 1.448 2.797 1.72 5.99.765 8.991s-3.02 5.451-5.818 6.901c-.476.247-.662.831-.415 1.308.172.332.511.524.863.524.15 0 .302-.035.446-.109 3.259-1.686 5.664-4.54 6.776-8.035 1.111-3.497.794-7.217-.893-10.473z"/></svg>
\ No newline at end of file
diff --git a/console/src/views/login/index.vue b/console/src/views/login/index.vue
index 9634609..85b1d7f 100644
--- a/console/src/views/login/index.vue
+++ b/console/src/views/login/index.vue
@@ -45,6 +45,23 @@
             </span>
           </el-form-item>
         </el-tooltip>
+        <el-form-item v-if="captchaData.cid" prop="captchaText">
+          <div class="captcha">
+            <el-input
+              v-model="loginForm.captchaText"
+              :placeholder="$t('wolf.loginPromptCaptcha')"
+              name="captchaText"
+              tabindex="3"
+              minlength="4"
+              maxlength="6"
+            />
+            <div class="captchaImage" v-html="captchaData.captcha" />
+            <div v-if="countdownNum > 0" class="refresh-icon">
+              {{ countdownNum }}
+            </div>
+            <svg-icon v-else icon-class="refresh" class="refresh-icon" @click="loadCaptchaData" />
+          </div>
+        </el-form-item>
 
         <el-form-item v-if="showAuthTypeOption" prop="authType">
           <el-radio-group v-model="loginForm.authType" @change="authTypeChange">
@@ -69,7 +86,7 @@
 <script>
 import { validUsername } from '@/utils/validate'
 import SocialSign from './components/SocialSignin'
-import { getLoginOptions } from '@/api/user'
+import { getLoginOptions, getCaptchaData } from '@/api/user'
 
 export default {
   name: 'Login',
@@ -89,25 +106,40 @@ export default {
         callback()
       }
     }
+    const validateCaptcha = (rule, value, callback) => {
+      if (!value || value.length < 4) {
+        callback(new Error('Please enter the correct captcha'))
+      } else {
+        callback()
+      }
+    }
     return {
       loginForm: {
         username: '',
         password: '',
+        captchaText: '',
         authType: '1',
       },
       loginOptions: {
         password: {},
         ldap: {},
+        consoleLoginWithCaptcha: false,
+      },
+      captchaData: {
+        cid: '',
+        captcha: '',
       },
       loginRules: {
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
         password: [{ required: true, trigger: 'blur', validator: validatePassword }],
+        captchaText: [{ required: true, trigger: 'blur', validator: validateCaptcha }],
         authType: [{ required: true }],
       },
       passwordType: 'password',
       capsTooltip: false,
       loading: false,
       showDialog: false,
+      countdownNum: 0,
       redirect: undefined,
       otherQuery: {},
     }
@@ -147,6 +179,24 @@ export default {
     // window.removeEventListener('storage', this.afterQRScan)
   },
   methods: {
+    countdown(num) {
+      this.countdownNum = num
+      const timer = setInterval(() => {
+        this.countdownNum--
+        if (this.countdownNum < 0) {
+          clearInterval(timer)
+        }
+      }, 1000)
+
+      return {
+        stop: function() {
+          clearInterval(timer)
+        },
+        getNum: function() {
+          return this.countdownNum
+        },
+      }
+    },
     checkCapslock({ shiftKey, key } = {}) {
       if (key && key.length === 1) {
         if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
@@ -173,18 +223,26 @@ export default {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true
-          this.$store.dispatch('user/login', this.loginForm)
+          const loginForm = { ...this.loginForm }
+          if (this.captchaData.cid) {
+            loginForm.cid = this.captchaData.cid
+          }
+          this.$store.dispatch('user/login', loginForm)
           // login(this.loginForm)
             .then((res) => {
+              this.loginForm.captchaText = ''
               this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
               this.loading = false
             })
             .catch((err) => {
+              this.loginForm.captchaText = ''
+              this.loadCaptchaData()
               this.loading = false
               console.error('login failed! err: ', err)
             })
         } else {
           console.error('error submit!!')
+          this.loadCaptchaData()
           return false
         }
       })
@@ -196,9 +254,19 @@ export default {
         if (!this.loginOptions.ldap.supported) {
           this.loginForm.authType = '1'
         }
+        await this.loadCaptchaData()
       }
       // console.log('loginOptions: %s', JSON.stringify(this.loginOptions))
     },
+    async loadCaptchaData() {
+      this.countdownCounter = this.countdown(10)
+      if (this.loginOptions.consoleLoginWithCaptcha) {
+        const res = await getCaptchaData()
+        if (res.ok) {
+          this.captchaData = res.data
+        }
+      }
+    },
     authTypeChange(label) {
       localStorage.setItem('authType', label)
     },
@@ -308,6 +376,33 @@ $light_gray:#eee;
     padding: 15px 35px 0;
     margin: 0 auto;
     overflow: hidden;
+
+    .captcha {
+      display: flex;
+      height: 40px;
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+      flex-direction: row;
+
+      .captchaImage {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .refresh-icon {
+        display: flex;
+        width: 50px;
+        height: 40px;
+        align-items: center;
+        justify-content: center;
+        background: #060a10;
+        border-radius: 5px;
+        font-size: 25px;
+        color: #fbfbfb;
+      }
+    }
   }
 
   .tips {
diff --git a/docs/deploy-cn.md b/docs/deploy-cn.md
index 9f7f7ae..ce0f9b1 100644
--- a/docs/deploy-cn.md
+++ b/docs/deploy-cn.md
@@ -158,6 +158,7 @@ show tables;
   * WOLF_CRYPT_KEY 加密应用Secret及OAuth2登陆用户ID使用的Key.
   * RBAC_TOKEN_EXPIRE_TIME `Agent` 登录接口返回的token的有效期, 默认为30天. 单位为秒.
   * CONSOLE_TOKEN_EXPIRE_TIME `Console` 登录接口返回的token的有效期, 默认为30天. 单位为秒.
+  * CONSOLE_LOGIN_WITH_CAPTCHA 控制 `Console` 登录是否使用 Captcha 验证码。如果控制台部署在公网上，建议开启该功能以提高安全性。该环境变量的取值为 yes 或 no，默认为 no。
   * RBAC_SQL_URL 连接数据库的数据库链接. 默认为: `postgres://wolfroot:123456@127.0.0.1:5432/wolf`
   * RBAC_REDIS_URL redis缓存的链接. 默认为: `redis://127.0.0.1:6379/0`
   * MEM_CACHE_BY_REDIS 使用redis作为对象缓存. 默认为`no`. 当要部署多节点的`wolf`服务时,可使用redis作为对象缓存,解决缓存不一致问题.
diff --git a/docs/deploy.md b/docs/deploy.md
index 026d4ab..c90302e 100644
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -157,7 +157,8 @@ The output should be similar to the following, indicating that the database tabl
   * `RBAC_TOKEN_KEY`: A key used to encrypt the user token. It is highly recommended to set this value.
   * `WOLF_CRYPT_KEY`: A key used to encrypt the application secret and OAuth2 login user ID keys.
   * `RBAC_TOKEN_EXPIRE_TIME`: The expiration time of the token returned by the `Agent` login interface. The default is 30 days and the unit is seconds.
-  * `CONSOLE_TOKEN_EXPIRE_TIME`: The expiration time of the token returned by the Console login interface. The default is 30 days and the unit is seconds.
+  * `CONSOLE_TOKEN_EXPIRE_TIME`: The expiration time of the token returned by the `Console` login interface. The default is 30 days and the unit is seconds.
+  * `CONSOLE_LOGIN_WITH_CAPTCHA`: Controls whether Captcha verification is used for `Console` login. If the console is deployed on a public network, it is recommended to enable this feature to improve security. The environment variable can be set to `yes` or `no`, with a default value of `no`.
   * `RBAC_SQL_URL`: The link to the database. The default value is `postgres://wolfroot:123456@127.0.0.1:5432/wolf`.
   * `RBAC_REDIS_URL`: The link to the redis cache. The default value is `redis://127.0.0.1:6379/0`.
   * `MEM_CACHE_BY_REDIS`: Use redis as the object cache. The default is no. When deploying a multi-node wolf service, you can use redis as the object cache to resolve cache inconsistency issues.
diff --git a/server/conf/config.js b/server/conf/config.js
index 3342f01..7a4ce8f 100644
--- a/server/conf/config.js
+++ b/server/conf/config.js
@@ -4,6 +4,7 @@ const config = {
   cryptKey: process.env.WOLF_CRYPT_KEY || 'fbd4962351924792cb5e5b131435cd30b24e3570',
   rbacTokenExpireTime: parseInt(process.env.RBAC_TOKEN_EXPIRE_TIME) || 3600 * 24 * 30,
   consoleTokenExpireTime: parseInt(process.env.CONSOLE_TOKEN_EXPIRE_TIME) || 3600 * 24 * 30,
+  consoleLoginWithCaptcha: ((process.env.CONSOLE_LOGIN_WITH_CAPTCHA || 'no') === 'yes'),
   rbacRecordAccessLog: (process.env.RBAC_RECORD_ACCESS_LOG || 'yes') === 'yes',
   memCacheTTLSecond: 600,
   memCacheByRedis: (process.env.MEM_CACHE_BY_REDIS || 'no') === 'yes',
diff --git a/server/package.json b/server/package.json
index 6c8b817..e48f316 100644
--- a/server/package.json
+++ b/server/package.json
@@ -38,6 +38,7 @@
     "pg": "^8.7.3",
     "pg-escape": "^0.2.0",
     "sequelize": "^6.19.2",
+    "svg-captcha": "^1.4.0",
     "urlsafe-base64": "^1.0.0",
     "validator": ">=13.7.0"
   },
diff --git a/server/src/controllers/captcha.js b/server/src/controllers/captcha.js
new file mode 100644
index 0000000..6853edf
--- /dev/null
+++ b/server/src/controllers/captcha.js
@@ -0,0 +1,25 @@
+const util = require('../util/util')
+const {newCaptcha} = require('../util/captcha-util');
+
+const BasicService = require('./basic-service')
+
+
+class Captcha extends BasicService {
+  constructor(ctx) {
+    super(ctx, null)
+  }
+
+  async get() {
+    this.checkMethod('GET')
+    const {cid, data: captchaData} = await newCaptcha();
+    const data = {
+      "cid": cid,
+      "captcha": captchaData,
+    }
+    this.success(data);
+  }
+
+}
+
+module.exports = Captcha
+
diff --git a/server/src/controllers/user.js b/server/src/controllers/user.js
index 7e94e2c..7aad880 100644
--- a/server/src/controllers/user.js
+++ b/server/src/controllers/user.js
@@ -3,6 +3,7 @@ const UserModel = require('../model/user')
 const AccessDenyError = require('../errors/access-deny-error')
 const ApplicationModel = require('../model/application')
 const UserRoleModel = require('../model/user-role')
+const {captchaValidate} = require('../util/captcha-util');
 const {like} = require('../util/op-util')
 const Op = require('sequelize').Op;
 const errors = require('../errors/errors')
@@ -71,6 +72,15 @@ class User extends BasicService {
     const username = this.getRequiredArg('username')
     const password = this.getRequiredArg('password')
     const authType = this.getIntArg('authType', constant.AuthType.PASSWORD)
+    if (config.consoleLoginWithCaptcha) {
+      const cid = this.getRequiredArg('cid');
+      const captchaText = this.getRequiredArg('captchaText')
+      const {valid, errmsg} = await captchaValidate(cid, captchaText)
+      if (!valid) {
+        this.fail(200, errmsg);
+        return
+      }
+    }
 
     this.log4js.info('### user[%s] login authType=%s...', username, authType)
     const {userInfo, err: loginErr} = await this.userLoginInternal(username, password, {authType})
@@ -115,6 +125,7 @@ class User extends BasicService {
     const data = {
       password: {supported: true},
       ldap: ldapOptions(),
+      consoleLoginWithCaptcha: config.consoleLoginWithCaptcha,
     }
     this.success(data)
   }
diff --git a/server/src/middlewares/token-check.js b/server/src/middlewares/token-check.js
index 0521a4a..4b98585 100644
--- a/server/src/middlewares/token-check.js
+++ b/server/src/middlewares/token-check.js
@@ -13,6 +13,7 @@ const IGNORE_URLS = {
   'POST:/wolf/user/login': true,
   // 'POST:/wolf/user/logout': true,
   'GET:/wolf/user/loginOptions': true,
+  'GET:/wolf/captcha': true,
 }
 
 function needCheckToken(ctx) {
diff --git a/server/src/util/captcha-util.js b/server/src/util/captcha-util.js
new file mode 100644
index 0000000..cafb1d6
--- /dev/null
+++ b/server/src/util/captcha-util.js
@@ -0,0 +1,53 @@
+
+const config = require('../../conf/config')
+const svgCaptcha = require('svg-captcha')
+const log4js = require('./log4js')
+const {redisClient} = require('./redis-util')
+const util = require('./util')
+
+const ERR_CAPTCHA_INVALID = 'ERR_CAPTCHA_INVALID'
+
+function captchaKey(cid) {
+  return `cha:${cid}`
+}
+
+
+async function newCaptcha() {
+  const newCaptcha = svgCaptcha.create({
+    size: 4,
+    fontSize: 45,
+    noise: Math.floor(Math.random() * 4) + 1,
+    ignoreChars: '0o1i',
+    width: 120,
+    height: 40,
+    color: true,
+    background: '#ccc',
+  })
+  const text = newCaptcha.text;
+  const cid = util.randomString(20);
+  const key = captchaKey(cid);
+  const expiresIn = 60 * 5;
+  const res = await redisClient.set(key, text, 'EX', expiresIn);
+  if (res !== 'OK') {
+    throw new Error('redis set error');
+  }
+  const data = newCaptcha.data;
+  return {cid, data}
+}
+
+async function captchaValidate(cid, text) {
+  const key = captchaKey(cid);
+  const captchaText = await redisClient.get(key);
+  if (!captchaText) {
+    log4js.log("captcha {cid: %s} not found", cid);
+    return {valid: false, errmsg: ERR_CAPTCHA_INVALID}
+  }
+  if (captchaText != text) {
+    return {valid: false, errmsg: ERR_CAPTCHA_INVALID}
+  }
+  return {valid: true, errmsg: ''}
+}
+
+
+exports.newCaptcha = newCaptcha
+exports.captchaValidate = captchaValidate
diff --git a/server/test/24.captcha.test.js b/server/test/24.captcha.test.js
new file mode 100644
index 0000000..a838990
--- /dev/null
+++ b/server/test/24.captcha.test.js
@@ -0,0 +1,117 @@
+
+const mocha = require('./util/mocha')
+const util = require('./util/util')
+const config = require('../conf/config')
+const {redisClient} = require('../src/util/redis-util')
+const headers = util.adminHeaders()
+
+
+function getLoginOptionsSchema() {
+  const dataSchema = {
+    type: "object",
+    properties: {
+      password: {
+        type: "object",
+        properties: {
+          supported: {type: "boolean", enum: [true]},
+        },
+        required: ["supported"]
+      },
+      consoleLoginWithCaptcha: {type: "boolean", enum: [true]},
+    },
+    required: ["password", "consoleLoginWithCaptcha"]
+  }
+
+  const schema = util.okSchema(dataSchema)
+  return schema
+}
+
+function getCaptchaSchema() {
+  const dataSchema = {
+    type: "object",
+    properties: {
+      cid: {type: "string", },
+      captcha: {type: "string"},
+    },
+    required: ["cid", "captcha"]
+  }
+
+  const schema = util.okSchema(dataSchema)
+  return schema
+}
+
+async function getCaptchaText(cid) {
+  const key = `cha:${cid}`;
+  const text = await redisClient.get(key)
+  if (!text) {
+    console.error("Couldn't get captcha from redis: " + key)
+  }
+  return text || 'not-found'
+}
+
+describe('captcha', function() {
+  let cid = undefined;
+  before(function() {
+    config.consoleLoginWithCaptcha = true
+  });
+
+
+  it('ldap options, ', async function() {
+    const schema = getLoginOptionsSchema()
+    const args = {}
+    const url = '/wolf/user/loginOptions';
+    await mocha.get({url, headers, args, schema})
+  });
+
+  it('get captcha', async function() {
+    const schema = getCaptchaSchema();
+    const args = {}
+    const url = '/wolf/captcha'
+    const res = await mocha.get({url, headers, args, schema})
+    cid = res.body.data.cid
+  });
+
+  it('captcha cid missing', async function() {
+    const schema = util.failSchema('ERR_ARGS_ERROR', "cid missing, it's required.")
+    const username = 'root'
+    const password = 'error-password'
+    const body = {username, password}
+    const url = '/wolf/user/login';
+    await mocha.post({url, headers, body, status:400, schema})
+  });
+
+  it('captcha text missing', async function() {
+    const schema = util.failSchema('ERR_ARGS_ERROR', "captchaText missing, it's required.")
+    const username = 'root'
+    const password = 'error-password'
+    const body = {username, password, cid, captchaText: ''}
+    const url = '/wolf/user/login';
+    await mocha.post({url, headers, body, status:400, schema})
+  });
+
+  it('captcha error', async function() {
+    const schema = util.failSchema('ERR_CAPTCHA_INVALID')
+    const username = 'root'
+    const password = 'error-password'
+    const body = {username, password, cid, captchaText: 'error'}
+    const url = '/wolf/user/login';
+    await mocha.post({url, headers, body, schema})
+  });
+
+  it('captcha success', async function() {
+    const schema = util.failSchema('ERR_PASSWORD_ERROR')
+    const username = 'root'
+    const password = 'error-password'
+    const captchaText = await getCaptchaText(cid)
+    const body = {username, password, cid, captchaText: captchaText}
+    const url = '/wolf/user/login';
+    await mocha.post({url, headers, body, schema})
+  });
+
+  after(async function() {
+    config.consoleLoginWithCaptcha = false
+  });
+
+});
+
+