Недавно я изучал знания, связанные с Java, и мой друг посоветовал взглянуть на фреймворк Ruoyi, поэтому я расширил функцию входа в WeChat на основе фреймворка Ruoyi (отдельные версии внешнего и внутреннего интерфейса).
Стандартный вход в систему с помощью скан-кода требует подачи заявки на учетную запись открытой платформы WeChat и наличия утвержденного приложения на веб-сайте, то есть: входа в приложение WeChat на веб-сайте, что является громоздким процессом. Во избежание проблем операция входа в систему выполняется на основе авторизации официальной веб-страницы учетной записи WeChat. Вы также можете изучить процесс сканирования QR-кода для входа в систему.
Чтобы отсканировать QR-код для входа на основе авторизации веб-страницы официального аккаунта, нам нужно только подготовить официальную учетную запись (требуется сертифицированная сервисная учетная запись или требуется прямая заявка на тестовую официальную учетную запись).
Поскольку платформа Ruoyi уже имеет собственную таблицу пользователей, вход для сканирования кода здесь необходимо разработать в двух частях:
Сценарий привязки WeChat заключается в том, что нам нужно сначала войти в систему Ruoyi, затем открыть страницу личной информации, нажать кнопку привязки WeChat на странице, чтобы отобразить QR-код, а затем отсканировать код с помощью WeChat на мобильном телефоне. телефон для завершения привязки.
Процесс сканирования кода для части привязки примерно следующий:
После нажатия кнопки привязки WeChat на ПК ключ пользователя получается из текущего токена входа. На основе ссылки для объединения ключа пользователя на передней панели появляется QR-код. Адрес QR-кода (со сгенерированным ключом пользователя). — это ссылка для авторизации веб-страницы. WeChat. После сканирования кода для его открытия вы можете напрямую авторизовать официальную веб-страницу учетной записи. После получения кода вы будете перенаправлены на внутренний интерфейс, чтобы получить openid пользователя и обновить его. пользовательскую таблицу для завершения привязки.
На основе этого процесса и в сочетании с платформой Ruoyi нам необходимо разработать следующие интерфейсы и изменить страницу:
Поскольку нам нужен доступ к информации пользователей WeChat, нам нужно спросить sys_user
В таблицу пользователей добавляются два поля: wx_nick_name, openid.
1.существоватьruoyi-admin/src/main/java/com/ruoyi/web/controller/common/
Создать новый нижеWxController.java
Используется для обработки запросов, связанных с WeChat.。然后существоватьWxController
Добавьте WeChat вопенидбиндингметод:
/**
* Получить открытый идентификатор
*/
@GetMapping("/bind-openid")
public AjaxResult getOpenid(@RequestParam("code") String code, @RequestParam("key") String key) throws IOException
{
AjaxResult ajax = AjaxResult.success();
SysUser u = userService.getOpenid(code);
String openid = u.getOpenid();
LoginUser userCache = redisCache.getCacheObject(CacheConstants.LOGIN_TOKEN_KEY + key);
SysUser user = new SysUser();
user.setUserId(userCache.getUserId());
user.setOpenid(openid);
user.setWxNickName(u.getWxNickName());
userService.updateUserOpenid(user);
ajax.put("openid", openid);
ajax.put("wxnickname", u.getWxNickName());
return ajax;
}
Этот метод в основном завершает прием кода авторизации общедоступной учетной записи WeChat, запрашивает интерфейс WeChat для получения openid пользователя, получает идентификатор пользователя из кэша повторного отображения информации для входа текущего пользователя, а затем обновляет openid пользователя WeChat в таблице пользователей для завершения. привязка.
Для удобства код перенаправляется непосредственно на адрес интерфейса.
2.существоватьruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysUserServiceImpl.java
Добавьте WeChat в code Получить пользователя openid метод:
/**
* по коду Получить пользователяopenid
*
* @param code Код авторизации веб-страницы официального аккаунта WeChat
* @return useropenid
*/
@Override
public SysUser getOpenid(String code) {
RestTemplate restTemplate = new RestTemplate();
JSONObject jsonData = null;
// Создайте URL-адрес для получения access_token
String url = "https://api.weixin.qq.com/sns/oauth2/access_token?"
+ "appid=" + appId
+ "&secret=" + secret
+ "&code=" + code
+ "&grant_type=authorization_code";
System.out.println("url: " + url);
ResponseEntity<String> responseEntity = restTemplate.getForEntity(url, String.class);
System.out.println("responseEntity: " + responseEntity);
if (responseEntity.getStatusCodeValue() == 200 && responseEntity.getBody() != null) {
jsonData = JSONObject.parseObject(responseEntity.getBody());
}
String userInfoUrl = "https://api.weixin.qq.com/sns/userinfo?lang=zh_CN"
+ "&access_token=" + jsonData.getString("access_token")
+ "&openid=" + jsonData.getString("openid");
ResponseEntity<String> responseUserEntity = restTemplate.getForEntity(userInfoUrl, String.class);
if (responseUserEntity.getStatusCodeValue() == 200 && responseUserEntity.getBody() != null) {
JSONObject jsonUserData = JSONObject.parseObject(new String(responseUserEntity.getBody().getBytes(StandardCharsets.ISO_8859_1), StandardCharsets.UTF_8));
System.out.println("jsonUserData: " + jsonUserData);
SysUser user = new SysUser();
user.setOpenid(jsonUserData.getString("openid"));
user.setWxNickName(jsonUserData.getString("nickname"));
return user;
}
return null;
}
Поскольку здесь используются официальное приложение и секрет учетной записи, нам необходимо ruoyi-admin/src/main/resources/application.yml
Добавьте соответствующую конфигурацию в файл конфигурации:
# Официальная конфигурация аккаунта
wechat:
# Идентификатор приложения
appid:
# ключ приложения
secret:
После добавления конфигурации вам необходимо SysUserServiceImpl
Добавьте соответствующие частные атрибуты в:
@Value("${wechat.appid}")
private String appId;
@Value("${wechat.secret}")
private String secret;
3.существоватьruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysUserServiceImpl.java
Добавьте изменения вuseropenidизметод:
/**
* Изменить идентификатор пользователя
*
* @param user Информация о пользователе
* @return результат
*/
@Override
public int updateUserOpenid(SysUser user)
{
return userMapper.updateUser(user);
}
Нам нужно быть здесь ruoyi-system/src/main/java/com/ruoyi/system/mapper/SysUserMapper.java
Добавьте соответствующее объявление метода в:
/**
* редактировать Информацию о пользователе
*
* @param user Информация о пользователе
* @return результат
*/
public int updateUser(SysUser user);
и в ruoyi-system/src/main/resources/mapper/system/SysUserMapper.xml
Дополните соответствующий SQL-код обновления, то есть добавьте решение об обновлении OpenID и псевдонима WeChat в установленную часть обновленного пользовательского SQL-запроса:
<update id="updateUser" parameterType="SysUser">
...
<if test="openid != null and openid != ''">openid = #{openid},</if>
<if test="wxNickName != null and wxNickName != ''">wx_nick_name = #{wxNickName},</if>
...
</update>
Поскольку была добавлена информация об открытом идентификаторе WeChat и псевдониме.,Поэтому его необходимо изменитьruoyi-common/src/main/java/com/ruoyi/common/core/domain/entity/SysUser.java
документ,Добавьте псевдоним WeChat и атрибуты openid:
/** Никнейм пользователя WeChat */
@Excel(name = "Никнейм пользователя WeChat")
private String wxNickName;
/** openid */
@Excel(name = "openid")
private String openid;
public String getOpenid()
{
return openid;
}
public void setOpenid(String openid)
{
this.openid = openid;
}
public String getWxNickName()
{
return wxNickName;
}
public void setWxNickName(String wxNickName)
{
this.wxNickName = wxNickName;
}
Таким образом, мы завершили разработку интерфейса привязки openid WeChat.
Следующим шагом является запрос информации о привязке WeChat.
1.существоватьruoyi-admin/src/main/java/com/ruoyi/web/controller/common/WxController.java
Дополнительные домохозяйстваuuidЗапросopenidметод:
/**
* Вошедший в систему пользователь uuid запрос openid
*/
@GetMapping("/uuid")
public AjaxResult getCode(@RequestParam("uuid") String uuid) throws IOException
{
AjaxResult ajax = AjaxResult.success();
LoginUser userLogin = redisCache.getCacheObject(CacheConstants.LOGIN_TOKEN_KEY + uuid);
SysUser user = userService.selectUserById(userLogin.getUserId());
System.out.println("user-openid: " + user.getOpenid());
System.out.println("user-wxnickname: " + user.getWxNickName());
if (user.getOpenid() != null) {
ajax.put("openid", user.getOpenid());
ajax.put("wxnickname", user.getWxNickName());
}
ajax.put("status", user.getOpenid() != null ? 1: 0);
return ajax;
}
2.существоватьruoyi-system/src/main/resources/mapper/system/SysUserMapper.xml
изselectUserVoЗапросsqlСреднее сложениеopenid、Запрос псевдонима WeChat:
<sql id="selectUserVo">
select ...,
u.openid, u.wx_nick_name,
...
from sys_user u
</select>
Таким образом, запрашиваемая информация о пользователе будет содержать связанную информацию WeChat.
Поскольку пользователь не вошел в систему на мобильном телефоне при сканировании кода для привязки, все ruoyi-framework/src/main/java/com/ruoyi/framework/config/SecurityConfig.java
Добавьте интерфейс привязки в список разрешенных:
requests.antMatchers("/login", "/register", "/captchaImage", "/bind-openid").permitAll()
На этом этапе интерфейс привязки, который необходимо разработать, был изменен. Давайте изменим страницу.
vue-qr
генерировать,существовать前端项目根目录npm install vue-qr
Вот и все。ruoyi-ui/src/api/system/user.js
Среднее сложение我们上面写好из Запрособязательность状态接口: export function getUUid(data) {
return request({
url: '/uuid?uuid=' + data.uuid,
method: 'get'
})
}
3.Модификация страницы。Изменить страницу личной информацииruoyi-ui/src/views/system/user/profile/userInfo.vue
。
3.1 Добавьте кнопку привязки WeChat и всплывающее окно:
<el-form-item label="Вичат">
<span class="mr10">{{form.wxnickname || 'Не связан'}}</span>
<el-button v-if="form.openid == '' || form.openid == null" :loading="bindloading" size="medium" type="primary" class="btn" @click.stop="wxBind()">绑 定</el-button>
<el-button v-else :loading="bindloading" size="medium" type="primary" class="btn" @click.stop="unBind()">解
绑</el-button>
</el-form-item>
<el-dialog title="Привязать WeChat" 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>
</el-dialog>
3.2 Импортируйте зависимые интерфейсы и связанный метод:
import {
updateUserProfile,
getUUid
} from "@/api/system/user";
import {
getToken
} from '@/utils/auth'
import vueQr from 'vue-qr'
3.3. Ссылка на компонент QR-кода:
components: {
vueQr,
},
3.4 Новые атрибуты в данных:
timer: null,
bindWxVisible: false,
bindloading: false,
qrUrl: '',
3.5 Измените метод мониторинга пользователей, чтобы на странице отображался псевдоним WeChat:
user: {
handler(user) {
console.log('user', this.user)
if (user) {
this.form = {
nickName: user.nickName,
wxnickname: user.wxNickName,
phonenumber: user.phonenumber,
email: user.email,
sex: user.sex,
openid: user.openid
};
}
},
immediate: true
}
3.6 Добавьте соответствующую информацию о привязке WeChat:
wxBind() {
let token = getToken()
const key = JSON.parse(atob(token.split('.')[1]))['login_user_key'];
const redirect_uri = `http://web-hub.uat.kai12.cn/auth.html?backUrl=${локальный IP}:8080/bind-openid?key=${key}`
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
this.timer = setInterval(function() {
getUUid({
uuid: key
})
.then((res) => {
console.log(res)
if (res.status === 1) {
that.bindWxVisible = false
that.form.openid = res.openid
that.form.wxnickname = res.wxnickname
that.$message({
type: 'success',
message: «Операция прошла успешно»,
})
clearTimeout(this.timer)
}
})
.catch((err) => {
clearTimeout(that.timer)
})
}, 1000)
},
wxLoginClose() {
this.timer && clearTimeout(this.timer)
},
В основном это делается путем получения токена, кэшированного браузером, и его анализа из файла пользователя Ruoyi. login_user_key
Чтобы добиться привязки ассоциации.
На этом весь процесс привязки WeChat примерно завершен.
Проверьте это: