предисловие
Необходимо добавить функцию входа в систему со сканированием кода WeChat на странице h5 того же доменного имени.Если у пользователя уже есть учетная запись в мини-программе, он может войти в систему напрямую.
Использование : собственная разработка апплета vue2+WeChat Предпосылка
, что вышеуказанные функции могут быть реализованы : один и тот же пользователь имеет один и тот же UnionID для разных приложений на одной и той же открытой платформе WeChat . Имя домена настроено. Что можно использовать, чтобы отличить, является ли это одним и тем же пользователем? Номер мобильного телефона по-прежнему используется в текущем проекте.
текст
процесс
Вставить QR-код на страницу -> пользователь сканирует код, чтобы получить временный код -> отправить код в фон, и фон возвращает информацию о пользователе
- Введите адрес на странице index.html (но сообщается об ошибке, мое решение ниже)
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
- Добавьте следующий код на страницу, отображающую QR-код для создания экземпляра.
//login.vue
//二维码容器
<div id="login_container"></div>
//在mounted中执行下面的代码,获取二维码
//获得登录二维码
getwxCode() {
var obj = new WxLogin({
id: "login_container",
appid: "自己的",
scope: "snsapi_login",
redirect_uri: encodeURI("自己的"),
state: "",
style: "black",
href: "自定义的样式..../qrcode.css",
self_redirect: false,
});
},
В это время, если QR-код может отображаться правильно, если вы отсканируете код своим мобильным телефоном, он перейдет к redirect_uri
загруженному code
значению и соединит его позже.
3. Вообще говоря, redirect_uri должен быть установлен как промежуточная страница, и код должен обрабатываться на промежуточной странице.
Но поскольку используется режим истории, он сначала реализуется на домашней странице.
mounted() {
this.getCodeMes();
},
getCodeMes() {
let code = this.getQueryString("code");
console.log("code:", code);
if (!code) {
return
} else {
this.getLoginMes(code);
}
},
//使用正则读取url里的code
getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
// console.log(window.location.search);
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return "";
},
//对接后端接口,获取用户信息
getLoginMes(code) {
let params = {
code: code,
};
let queryParams = new URLSearchParams(params);
fetch("后端接口", {
method: "POST",
body: queryParams,
})
.then((response) => {
if (response.ok) {
return response.json();
}
console.log(response);
throw new Error("Network response was not ok.");
})
.then((data) => {
console.log(data);
//如果code过期失效了处理
if (data.code == "100") {
//清除一下地址上的code
window.history.replaceState(
null,
null,
window.location.href.split("?")[0] + window.location.hash
);
this.$router.push("/");
}
if (data.code == "200") {
localStorage.setItem(
"userinfo",
JSON.stringify(data.result)
);
setTimeout(() => {
window.history.replaceState(
null,
null,
window.location.href.split("?")[0] + window.location.hash
);
this.$router.push("/登入后的页面");
}, 2000);
}
})
.catch((error) => {
console.error("There was a problem with the network request:", error);
});
},
},
Это в основном все
возникшие проблемы
- После импорта адреса на шаге 1 Google Chrome сообщает о следующей ошибке:
Unsafe JavaScript attempt to initiate navigation for frame with URL 'http://www.xxx.xxx/' from frame with URL "https://open.weixin.com/xxxxxxx" The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor is it processing a user gesture
Решение: Замените импортированный файл js следующим.
Причина: Браузер запрещает перенаправление
Решение: Просто обратитесь к коду внутри
https://www.cnblogs.com/enhengenhengNymph/p/14450416.html
2. QR-код Невозможно нормально отобразить , и сообщается об ошибке: Oops! something went wrong
- Моя причина: неправильно написан "домен обратного вызова авторизации". Нет соответствия с открытой платформой.
- Другие возможные причины: сначала исключите, что это не проблема с регистрацией веб-сайта, не проблема с конфигурацией третьей стороны и платформы WeChat, или не указание имени бизнес-домена или имени домена безопасности интерфейса js в официальной учетной записи.
-ссылка _
Ссылки и дополнения
ссылка
0. WeChat Official: веб-приложение WeChat Login Development Guide
1. Vue WeChat скан-код для входа в систему, метод встраивания и подводные камни разработки : более подробно, от получения appid до стиля QR-кода. Недостаток в том, что нет дальнейшего описания процесса сканирования кодов.
2. Vue реализует вход в WeChat со скан-кодом на стороне ПК (веб-версия, встроенная в QR-код) : существует относительно полный процесс, использующий маршрутизацию для перехвата кода, а также включает привязку, если пользователь скан-кода не зарегистрирован? (у меня нет попробовал)
3. Внешний интерфейс реализует код сканирования WeChat для входа на веб-сайт на ПК (вложенная страница с QR-кодом). Он супер подробный, и встреча пакета: он очень подробный. Также есть разговор о стиле настройка, но картинка висит.
4. О генерации и встраивании QR-кодов подробнее : о генерации и встраивании QR-кодов подробнее
5. Как реализовать функцию входа по скан-коду WeChat (Vue) : очень подробно, включая использование Node.js на задней части Часть также написана. От регистрации до получения токена. 100 баллов!
6. Как апплет WeChat получает пользовательский unionId?
Пополнить
Другие ссылки и решения
Процесс входа в Vue WeChat : с использованием vue-wxlogin он выглядит аналогично, но нет необходимости вводить скрипт
другие оптимизации
- После завершения входа обработайте код и удалите его. (просто чтобы ссылка выглядела свежее)
Другое для оптимизации
1. Режим истории не используется, поэтому после сканирования кода вы можете вернуться на ...8080/
эту страницу только для получения кода. ( Не может содержать знак #, следующий # будет удален )
2. Вы можете обратиться к этому стилю и использовать значок для переключения метода входа в систему, поэтому пользовательский интерфейс довольно болезненный. vue - Подробное руководство по доступу к веб-сайту для функции входа в систему со сканированием кода WeChat, полный подробный процесс и полный пример исходного кода функции (с решениями распространенных проблем и схемой модификации стиля QR-кода) статья в платной колонке, не читал.
3. Затем вы можете добавить такие функции, как срок действия QR-кода, автоматическое/ручное обновление и т. д.