[апплет h5+WeChat] Vue2 реализует функцию входа в систему с кодом сканирования h5

предисловие

Необходимо добавить функцию входа в систему со сканированием кода WeChat на странице h5 того же доменного имени.Если у пользователя уже есть учетная запись в мини-программе, он может войти в систему напрямую.

Использование : собственная разработка апплета vue2+WeChat Предпосылка
, что вышеуказанные функции могут быть реализованы : один и тот же пользователь имеет один и тот же UnionID для разных приложений на одной и той же открытой платформе WeChat . Имя домена настроено. Что можно использовать, чтобы отличить, является ли это одним и тем же пользователем? Номер мобильного телефона по-прежнему используется в текущем проекте.

текст

процесс

Вставить QR-код на страницу -> пользователь сканирует код, чтобы получить временный код -> отправить код в фон, и фон возвращает информацию о пользователе

1. Введите адрес на странице index.html (но сообщается об ошибке, мое решение ниже)

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

2. Добавьте следующий код на страницу, отображающую 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. После импорта адреса на шаге 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. После завершения входа обработайте код и удалите его. (просто чтобы ссылка выглядела свежее)

Другое для оптимизации

1. Режим истории не используется, поэтому после сканирования кода вы можете вернуться на ...8080/эту страницу только для получения кода. ( Не может содержать знак #, следующий # будет удален )
2. Вы можете обратиться к этому стилю и использовать значок для переключения метода входа в систему, поэтому пользовательский интерфейс довольно болезненный. vue - Подробное руководство по доступу к веб-сайту для функции входа в систему со сканированием кода WeChat, полный подробный процесс и полный пример исходного кода функции (с решениями распространенных проблем и схемой модификации стиля QR-кода) статья в платной колонке, не читал.
3. Затем вы можете добавить такие функции, как срок действия QR-кода, автоматическое/ручное обновление и т. д.