Расширение функции входа в систему со сканированием кода WeChat на основе реализации входа в систему со сканированием кода Ruoyi.
Расширение функции входа в систему со сканированием кода WeChat на основе реализации входа в систему со сканированием кода Ruoyi.

Предисловие

В прошлый раз мы расширили функцию привязки WeChat на основе платформы Ruoyi. Теперь мы продолжим реализацию входа в систему с помощью сканирования QR-кода.

Идеи реализации

Когда компьютер нажимает WeChat для входа в систему, UUID генерируется и сохраняется в Redis, и появляется QR-код (с сгенерированным UUID) — это веб-страница на мобильной стороне. После сканирования кода в WeChat. открывается настроенная ссылка авторизации веб-страницы. Код получается посредством веб-авторизации, а openid пользователя получается и сохраняется в redis. Сторона ПК запрашивает openid пользователя на основе сгенерированного uuid посредством опроса для входа в систему.

Процесс реализации

Скан-код WeChat для входа в систему

Основываясь на вышеизложенных идеях Для реализации в сочетании с платформой Ruoyi необходимо разработать следующие интерфейсы и изменить страницу:

  • поколение uuid
  • привязка uuid openid
  • openid/uuid вход в систему
  • Авторизоваться Страница добавления скан-кода Авторизоваться Функция
поколение uuid

существовать ruoyi-admin/src/main/java/com/ruoyi/web/controller/common/WxController.java Среднее сложениепоколение uuid-метод:

Язык кода:java
копировать
/**
 * Сканировать код Авторизоватьсяиспользоватьuuidгенерировать */
@GetMapping("/uuid/get")
public AjaxResult getUUID() throws IOException
{
    AjaxResult ajax = AjaxResult.success();
    String uuid = IdUtils.simpleUUID();
    String verifyKey = CacheConstants.WX_OPENID_KEY + uuid;
    redisCache.setCacheObject(verifyKey, null, 1, TimeUnit.MINUTES);
    ajax.put("uuid", uuid);
    return ajax;
}

Метод в основном использует собственный метод Ruoyi ограниченьUUID и сохраняет его в redis (срок действия установлен на 1 минуту), что требует существования ruoyi-common/src/main/java/com/ruoyi/common/constant/CacheConstants.java Добавьте один в WX_OPENID_KEY Константы используются для хранения openid:

Язык кода:java
копировать
/**
 * WeChat openid redis key
 */
public static final String WX_OPENID_KEY = "wx_openid:";
uuid связывает openid пользователя

Такой же,существовать WxController.java средний добавить uuidобязательность метода openid пользователя:

Язык кода:java
копировать
/**
 * uuidобязательностьopenid
 */
@GetMapping("/uuid/bind/openid")
public AjaxResult bindOpenid(@RequestParam("code") String code, @RequestParam("uuid") String uuid) throws IOException
{
    AjaxResult ajax = AjaxResult.success();
    SysUser user = userService.getOpenid(code);
    String openid = user.getOpenid();
    String wxNickName = user.getWxNickName();
    String verifyKey = CacheConstants.WX_OPENID_KEY + uuid;
    long expire = redisCache.getExpire(verifyKey);
    redisCache.setCacheObject(verifyKey, openid);
    if (expire > 0) {
        redisCache.expire(verifyKey, expire, TimeUnit.SECONDS);
    }
    ajax.put("openid", openid);
    ajax.put("wxNickName", wxNickName);
    return ajax;
}

Этот метод используется для получения кода, перенаправленного WeChat при сканировании кода в WeChat, и случайного UUID, сгенерированного при нажатии на скан-код Авторизоваться,настраиватьиспользоватьПредыдущая статьясередина SysUserServiceImpl дополнительный getOpenid Метод получает openid пользователя и псевдоним WeChat и обновляет openid в кэше Redis, соответствующем UUID.

uuid вход в систему

существовать WxController.java Продолжайте добавлять метод входа в систему UUID:

Язык кода:java
копировать
/**
 * uuidАвторизоваться
 */
@GetMapping("/uuid/login")
public AjaxResult loginByOpenId(@RequestParam("uuid") String uuid) throws IOException
{
    AjaxResult ajax = AjaxResult.success();
    String verifyKey = CacheConstants.WX_OPENID_KEY + uuid;
    String openid = redisCache.getCacheObject(verifyKey);
    ajax.put("status", 0);
    System.out.println("openid:{}" + openid);
    if(openid != null) {
        SysUser user = userService.selectUserByOpenId(openid);
        System.out.println("Пользователь: {}" + user);
        if (user == null)
        {
            System.out.println("У пользователя нет существования");
            return error("использовать Домашнее хозяйство не существуетсуществовать");        }
        LoginUser loginUser = new LoginUser(user.getUserId(), user.getDeptId(), user, permissionService.getMenuPermission(user));
        // генерироватьtoken
        String token = tokenService.createToken(loginUser);
        ajax.put("token", token);
        ajax.put("status", 1);
        redisCache.deleteObject(verifyKey);
    }

    return ajax;
}

Этот метод используется для внешнего опроса существования, случайный диапазон UUID, если существование запрашивается в кеше. openid Просто используйте openid Запросить пользователяинформация,так нужносуществовать ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysUserServiceImpl.java Дополним метод опроса пользователей через openid:

Язык кода:java
копировать
/**
 * от openidЗапросить пользователя
 *
 * @param openId имя пользователя
 * @return Информация об объекте пользователя
 */
@Override
public SysUser selectUserByOpenId(String openId)
{
    return userMapper.selectUserByOpenId(openId);
}

в то же времясуществоватьruoyi-system/src/main/java/com/ruoyi/system/mapper/SysUserMapper.javaСреднее сложение Соответствующее объявление метода:

Язык кода:java
копировать
/**
 * от openIdЗапросить пользователя
 *
 * @param openId openid
 * @return Информация об объекте пользователя
 */
public SysUser selectUserByOpenId(String openId);

исуществовать ruoyi-system/src/main/resources/mapper/system/SysUserMapper.xml Дополните соответствующий запрос sql для получения пользователей на основе openid WeChat:

Язык кода:xml
копировать
<select id="selectUserByOpenId" parameterType="String" resultMap="SysUserResult">
	<include refid="selectUserVo"/>
	where u.openid = #{openid} and u.del_flag = '0'
</select>

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

Изменение разрешения доступа к интерфейсу

Интерфейс сканирования кода Авторизоваться вызывается, когда существования нет Авторизоваться, поэтому нужно существование. ruoyi-framework/src/main/java/com/ruoyi/framework/config/SecurityConfig.java Добавьте соответствующие интерфейсы в список разрешенных:

Язык кода:java
копировать
requests.antMatchers("/login", "/register", "/captchaImage", "/bind-openid", "/uuid/get", "/uuid/login", "/uuid/bind/openid").permitAll()

На данный момент мы завершили разработку интерфейса, необходимого для Скан-кода WeChat для входа в систему, а затем доработаем страницу.

Авторизоваться Добавить страницу Скан-код WeChat для входа в систему

1.Добавить интерфейс。существоватьruoyi-ui/src/api/system/user.jsСреднее сложение Интерфейс, который мы написали выше:

Язык кода:js
копировать
// Запрос Авторизоватьсяиспользоватьuuid
export function getLoginUUid() {
    return request({
        url: '/uuid/get',
        method: 'get'
    })
}

// uuidАвторизоваться
export function uuidLogin(data) {
    return request({
        url: '/uuid/login?uuid=' + data.uuid,
        method: 'get'
    })
}

2.Модификация страницы。Исправлять Авторизоваться Страницаruoyi-ui/src/views/login.vue

2.1 Добавьте кнопку входа в WeChat и всплывающее окно:

Язык кода:html
копировать
<div class="text-center">
    <img class="mt10 wechat-icon" src="@/assets/images/wx-login.png" alt="Вичат Авторизоваться" @click.stop="wxlogin()">
</div>

<el-dialog title="Сканировать код Авторизоваться" custom-class="bind-dialog" class="new-common-dialog" :visible.sync="bindWxVisible" :close-on-click-modal="false" :close-on-press-escape="false" @close="wxLoginClose" width="320px">
    <div class="qr-code">
        <vue-qr :text="qrUrl" :size="280"></vue-qr>
        <div v-if="bindTimeout" class="tip text-center">
            Срок действия QR-кода истек, пожалуйста, нажмите
            <i class="el-icon-refresh" @click="wxlogin"></i> обновить
        </div>
    </div>
</el-dialog>

2.2 Импорт зависимых интерфейсов и связанных с ними методов:

Язык кода:js
копировать
import {
    getToken
} from "@/utils/auth";
import {
    getLoginUUid,
    getUUid,
    uuidLogin
} from "@/api/system/user";
import vueQr from 'vue-qr'

2.3 Цитирование компонента QR-кода:

Язык кода:js
копировать
components: {
    vueQr,
},

Новые атрибуты в данных 2.4:

Язык кода:js
копировать
timer: null,
    bindWxVisible: false,
    bindTimeout: false,
    qrUrl: '',

2.5ruoyi-ui/src/store/modules/user.js Как добавить кэш входа в файлы:

Язык кода:js
копировать
// uuidАвторизоваться
uuidLogin({
    commit
}, userInfo) {
    setToken(userInfo.token)
    commit('SET_TOKEN', userInfo.token)
},

2.6 Добавьте на страницу входа методы, связанные с входом в WeChat:

Язык кода:js
копировать
 wxlogin() {
    getLoginUUid().then(response => {
        console.log(response.uuid)
        const uuid = response.uuid
        const redirect_uri = `http://web-hub.uat.kai12.cn/auth.html?backUrl=${локальная машинаIP}:8080/uuid/bind/openid?uuid=${uuid}`        const codeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=Официальный аккаунтappid&redirect_uri=${encodeURIComponent(redirect_uri)}&response_type=code&scope=snsapi_userinfo&state=123456#wechat_redirect`
        this.qrUrl = codeUrl
        console.log(this.qrUrl)
        this.bindWxVisible = true
        let that = this
        let counter = 1
        this.timer && clearTimeout(this.timer)
        this.timer = setInterval(function() {
            uuidLogin({
                    uuid: uuid
                })
                .then((res) => {
                    console.log(res)
                    counter++
                    console.log(counter)
                    if (counter === 60) {
                        clearTimeout(that.timer)
                        that.bindTimeout = true
                    }
                    if (res.status === 1) {
                        clearTimeout(that.timer)
                        that.bindWxVisible = false
                        that.$message({
                            type: 'success',message: 'Авторизоватьсяуспех',                        })
                        clearTimeout(that.timer)
                        that.$store.dispatch("uuidLogin", res)
                        setTimeout(() => {
                            that.$router.push({
                                path: that.redirect || "/"
                            }).catch(() => {});
                        }, 1500)
                    }
                })
                .catch((err) => {
                    that.bindWxVisible = false
                    clearTimeout(that.timer)
                })
        }, 1000)
    });
},
wxLoginClose() {
    this.timer && clearTimeout(this.timer)
},

В основном это делается путем опроса случайно сгенерированного uuid, сканирования кода с помощью мобильного телефона и перенаправления кода на серверную часть. uuid/bind/openid Интерфейс также завершает передачу параметров UUID для осуществления входа в систему.

Тогда давайте проверим это:

Ссылки

boy illustration
Устраните проблему совместимости между версией Spring Boot и Gradle Java: возникла проблема при настройке корневого проекта «demo1» > Не удалось.
boy illustration
Научите вас шаг за шагом, как настроить Nginx.
boy illustration
Это руководство — все, что вам нужно для руководства по автономному развертыванию сервера для проектов Python уровня няни (рекомендуемый сборник).
boy illustration
Не удалось запустить docker.service — Подробное объяснение идеального решения ️
boy illustration
Настройка файлового сервера Samba в системе Linux Centos. Анализ NetBIOS (супер подробно)
boy illustration
Как настроить метод ssh в Git, как получить и отправить код через метод ssh
boy illustration
RasaGpt — платформа чат-ботов на основе Rasa и LLM.
boy illustration
Nomic Embed: воспроизводимая модель внедрения SOTA с открытым исходным кодом.
boy illustration
Улучшение YOLOv8: EMA основана на эффективном многомасштабном внимании, основанном на межпространственном обучении, и эффект лучше, чем у ECA, CBAM и CA. Малые цели имеют очевидные преимущества | ICASSP2023
boy illustration
Урок 1 серии Libtorch: Тензорная библиотека Silky C++
boy illustration
Руководство по локальному развертыванию Stable Diffusion: подробные шаги и анализ распространенных проблем
boy illustration
Полностью автоматический инструмент для работы с видео в один клик: VideoLingo
boy illustration
Улучшения оптимизации RT-DETR: облегченные улучшения магистрали | Support Paddle облегченный rtdetr-r18, rtdetr-r34, rtdetr-r50, rtdet
boy illustration
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | Деформируемое внимание с большим ядром (D-LKA Attention), большое ядро ​​​​свертки улучшает механизм внимания восприимчивых полей с различными функциями
boy illustration
Создано Datawhale: выпущено «Руководство по тонкой настройке развертывания большой модели GLM-4»!
boy illustration
7B превышает десятки миллиардов, aiXcoder-7B с открытым исходным кодом Пекинского университета — это самая мощная модель большого кода, лучший выбор для корпоративного развертывания.
boy illustration
Используйте модель Huggingface, чтобы заменить интерфейс внедрения OpenAI в китайской среде.
boy illustration
Оригинальные улучшения YOLOv8: несколько новых улучшений | Сохранение исходной информации — алгоритм отделяемой по глубине свертки (MDSConv) |
boy illustration
Второй пилот облачной разработки | Быстро поиграйте со средствами разработки на базе искусственного интеллекта
boy illustration
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция с нулевым кодированием и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
boy illustration
Решенная Ошибка | Загрузка PyTorch медленная: TimeoutError: [Errno 110] При загрузке факела истекло время ожидания — Cat Head Tiger
boy illustration
Brother OCR, библиотека с открытым исходным кодом для Python, которая распознает коды проверки.
boy illustration
Новейшее подробное руководство по загрузке и использованию последней демонстрационной версии набора данных COCO.
boy illustration
Выпущен отчет о крупной модели финансовой отрасли за 2023 год | Полный текст включен в загрузку |
boy illustration
Обычные компьютеры также могут работать с большими моделями, и вы можете получить личного помощника с искусственным интеллектом за три шага | Руководство для начинающих по локальному развертыванию LLaMA-3
boy illustration
Одной статьи достаточно для анализа фактора транскрипции SCENIC на Python (4)
boy illustration
Бросая вызов ограничениям производительности небольших видеокарт, он научит вас запускать большие модели глубокого обучения с ограниченными ресурсами, а также предоставит полное руководство по оценке и эффективному использованию памяти графического процессора!
boy illustration
Команда Fudan NLP опубликовала 80-страничный обзор крупномасштабных модельных агентов, в котором в одной статье представлен обзор текущего состояния и будущего агентов ИИ.
boy illustration
[Эксклюзив] Вы должны знать о новой функции JetBrains 2024.1 «Полнострочное завершение кода», чтобы решить вашу путаницу!
boy illustration
Краткое изложение базовых знаний о регистрации изображений 1.0