Как внедрить сервис кодов подтверждения Tencent в проект Vue

внешний интерфейс JavaScript Тенсент Vue.js
Как внедрить сервис кодов подтверждения Tencent в проект Vue

Что такое проверочный код Tencent? Похоже на это...👇


В последнее время проект компании требует внедрения верификации Tencent Cloud, требования следующие:Чтобы предотвратить злонамеренное считывание SMS-кода подтверждения другими лицами, когда пользователь получает код подтверждения несколько раз в течение короткого периода времени, ему необходимо позвонить по коду подтверждения Tencent.После успешного подтверждения код подтверждения будет продолжать быть отправлены автоматически., я сначала ослеп, и статей по теме в интернете было не много, но сейчас подключился, и обнаружил, что это очень просто (может потому, что слишком просто, никто не написал 2333...)

Не много ББ, старт!

Сначала посмотрите на процесс вызова интерфейса документа:


(Адрес документа:cloud.Tencent.com/document/cheat…)

Он разбит на несколько небольших шагов:

  1. Зайдите в Tencent Cloud в фоновом режиме, чтобы получить JS-адрес;
  2. Фон передается на фронтенд через интерфейс;
  3. Внешний интерфейс загружает код подтверждения в соответствии с адресом JS;
  4. После успешной проверки вы получите билет (то есть кучу строк), а затем передадите его фону;
  5. Билет проверки фона, если он будет пройден, вы получите код подтверждения по SMS (или по электронной почте).

Если нас не волнует фон, что нам нужно делать во внешнем интерфейсе?

Сначала добавьте метку к компоненту .vue, который должен ввести проверочный код Tencent👇:

<div id="TCaptcha" style="width:300px;height:40px;" ></div>

Затем, когда вы часто вызываете API для отправки СМС-сообщений много раз, пока не сработает необходимость вызова проверочного кода Tencent (это суждение сообщается вам в фоновом режиме, например, в JSON-файле есть переменная isShow параметры интерфейса в нашем проекте, если он равен 1, то To Trigger Tencent Cloud Verification, состояние по умолчанию 0, значит верификация Tencent не требуется. Спрашивайте свой бэкграунд для конкретной ситуации, смешно вручную)


На картинке выше показан реальный обратный вызов интерфейса в нашем проекте.Вы можете видеть, что в обратном вызове есть обратный вызов.Js-адреса такжеbusinessId;

Этот адрес Js — это то, как вы получаете облачную аутентификацию. Вам нужно написать метод для динамического добавления этого Js в тег body👇:


Параметр src предназначен для передачи адреса Js при вызове интерфейса получения кода подтверждения для возврата данных.

Функция capInit доступна только при вводе Js, иначе будет сообщено об ошибке, поэтому установите задержку (код относительно прост, можно использовать промис).

Затем после проверки пользователя вызывается callback-функция и передаются параметры проверки в формате json. 👇

//回调函数：验证码页面关闭时回调
cbfn(res) {
   if (res.ret == 0) {
      // 用户验证成功,获取到ticket，然后你需要将这个ticket和之前的businessId一起传给后台
      // 若后台验证成功，用户就可以收到验证码了，无需你再做其他操作
      alert(res.ticket);
      capDestroy()
   }
   else {
     //用户关闭验证码页面，没有验证
     capDestroy()    //销毁之前创建的script标签
   }
}

Повторите: пользователь успешно аутентифицирован, билет получен, а затем вам нужно передать билет и предыдущий бизнес-идентификатор на серверную часть. Если фоновая проверка прошла успешно, пользователь может получить проверочный код, и вам не нужно выполнять никаких других операций.

Наконец (копия)capInit(iframe_div, options)Эта функция, параметры, является объектом Json, вы можете установить несколько параметров. 👇

1. iframe_div (обязательно): элемент, который встраивает iframe с изображением капчи.
2. варианты: {callback:xxx,showheader:xxx, themeColor:xxxxxx,type:"embed"}, объект формата json

callback: Функция обратного вызова для закрытия кодовой страницы подтверждения. После аутентификации пользователя будет вызвана функция и переданы параметры аутентификации в формате json.
{ret:xxx,ticket:"xxx"}
ret=0 указывает, что проверка пользователя завершена, и бизнес может проверить билет;
ret=1 означает, что пользователь не подтвердил проверочный код, и в настоящее время параметр билета отсутствует.
Билет с параметрами должен быть отправлен на серверную часть бизнеса. Конкретные поля см. в разделе разработки серверной части.
themeColor: Установите цвет темы страницы, значение представляет собой шестнадцатеричный цвет, например ff572d. После настройки кнопки и значки на странице изменят цвет на установленный
showHeader: Отображение заголовка страницы с кодом подтверждения (возврат и помощь, только для мобильных страниц)
ложь: не отображать
type: Дополнительный параметр на стороне ПК для настройки стиля кода подтверждения. Выполнение определенного стиля можно просмотретьОфициальный сайт проверочного кода
«точка»: срабатывает (по умолчанию)
"встроить": встроенный
"всплывающее окно": всплывающее окно
pos: Установите атрибут местоположения всплывающего кода подтверждения, этот параметр действителен только для всплывающего кода подтверждения ПК.
absolute: абсолютное позиционирование
исправлено: абсолютное позиционирование относительно окна браузера
статическое: статическое позиционирование
относительный: относительное позиционирование
keepOpen: установить проверку через свойства страницы
false: проверка обновления прохода (по умолчанию)
true: сохранить отображение, не обновлять
lang: Установите тип языка кода подтверждения.
Упрощенный китайский: 2052 (по умолчанию)
Традиционный китайский: 1028
Английский: 1033

Не забудьте вовремя вызвать capDestroy(), чтобы уничтожить созданные вами теги скрипта, иначе тегов скрипта будет много...

В документации сказано вызывать capDestroy() перед вызовом capInit(), но я попробовал, это не сработало, и, наконец, поместил его в обратный вызов, независимо от того, прошла ли проверка успешно или пользователь не прошел проверку, и проверка всплывающее окно закрывается, вызовите его снова capDestroy().

Адрес API веб-страницы ПК с проверочным кодом Tencent:cloud.Tencent.com/document/cheat…

Если у вас есть какие-либо вопросы или что не так, пожалуйста, оставьте сообщение для обсуждения~~


Категории