1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/qqoq-vue-social-captcha

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
В этом репозитории не указан файл с открытой лицензией (LICENSE). При использовании обратитесь к конкретному описанию проекта и его зависимостям в коде.
Клонировать/Скачать
README.md 4.4 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 28.11.2024 13:36 c0f4ee2

Vue-social-captcha: компонент на Vue с функциями социальной капчи

Скриншоты: vue-contribution

Зависимости: axios

Установка:

$ npm install vue-social-captcha -S

Использование: В файле main.js импортируйте плагин и зарегистрируйте его:

# main.js
import captcha from 'vue-social-captcha'
Vue.use(captcha)

Затем используйте vue-social-captcha в проекте:

<template>
    <div id="app">
        <Captcha
            id="Captcha"
            scene="Login"
            type="Geetest"
            :parm="captchaOption"
            @callback="captchaNotice"
            url="http://pay.test.com/admin/captcha/"
        >
            <input id="Captcha" type="button" value="登陆"/>
        </Captcha>
    </div>
</template>

<script>
export default {
    name: 'app',
    data () {
        return {
            captchaOption: {
                // 各平台的参数,具体请参阅个平台文档
                // 以下为腾讯验证码的参数
                // appid: '',
                // 以下为极验验证码的 параметр
                product: 'bind',
            }
        }
    },
    methods: {
        // 回调监听
        // status: 1успех,2проверка,0сбой
        // res: данные, возвращённые третьей стороной
        captchaNotice(status, res){
            console.log(status)
            console.log(res)
        }
    }
}
</script>

Свойства (props): Используйте следующие свойства для настройки вашего проверочного кода:

Свойство Описание Тип Значение по умолчанию Обязательное
parm Параметры проверочного кода (см. документацию каждой платформы) Object Нет Да
url Адрес для проверки на сервере, формат возврата см. ниже String Нет Да
type Тип проверочного кода, возможные значения: TencentCaptcha, Geetest String Нет Да
id Идентификатор элемента привязки String Нет Да
scene Сцена использования, передаётся на сервер, используется для бизнес-логики String Нет Да

Запрос и ответ сервера:

  • Запрос данных: при запросе к серверу будут добавлены два параметра: g_type и g_scene. Они используются для логики приложения.
{
    g_type: 'TencentCaptcha', // тип проверочного кода
    g_scene: 'Login', // сцена использования
}
  • Ответ данных: ответ от сервера содержит три параметра: code, msg и data. Параметр code обязателен, он определяет статус проверки: 1 — успешно, 0 — неудачно. | Свойство | Описание | Обязательное | | ------------ | ------------ | ------------ | | code | Статус проверки, может принимать значения 1 или 0 | Да | | msg | Текст сообщения | Нет | | data | Требуется при типе проверочного кода Geetest | Нет | Пример ответа:
// Ответ от GeeTest
{
    "code":1,
    "msg":"Проверка прошла успешно",
    "data":
    {
        "success":1,
        "gt":"29e4e065c7ba05ff77ba896e5d577f89",
        "challenge":"bd26076b3afe9ed3c17738f3f8a7eec7",
        "new_captcha":1
    }
}
// Ответ от Tencent
{
    "code":1,
    "msg":"Проверка прошла успешно"
}

Ресурсы:

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/qqoq-vue-social-captcha.git
git@api.gitlife.ru:oschina-mirror/qqoq-vue-social-captcha.git
oschina-mirror
qqoq-vue-social-captcha
qqoq-vue-social-captcha
master