Рука об руку научит вас аутентификации при входе в апплет

внешний интерфейс WeChat Апплет WeChat Ресурсы изображений

Введение

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

Процесс доступа

Блок-схема на официальном документе здесь достаточно понятна, и мы будем непосредственно расширять и дополнять схему.

img

Во-первых, когда вы увидите эту картинку, вы обязательно заметите, что связь и взаимодействие апплета — это не только интерфейс апплета и наш собственный сервер, но и сторонний сервер WeChat, так что какую роль выполняет Сервер WeChat играет в нем Шерстяная ткань? Давайте посмотрим на процесс аутентификации входа и разберемся.

1. Вызовите wx.login для генерации кода

Функция API wx.login() заключается в создании временных учетных данных для текущего пользователя.Эти временные учетные данные действительны только в течение пяти минут. После того, как мы получим эти учетные данные для входа, мы можем перейти к следующему шагу: получитьopenidиsession_key

wx.login({
    success: function(loginRes) {
        if (loginRes.code) {
            // example: 081LXytJ1Xq1Y40sg3uJ1FWntJ1LXyth
        }
    }
});

2. Получите openid и session_key

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

Итак, для чего используется session_key? С идентификатором пользователя нам нужно разрешить пользователю войти в систему, затемsession_keyЭто гарантирует достоверность операции сеанса, выполняемой текущим пользователем.Этот session_key передается нам сервером WeChat. Другими словами, мы можем использовать этот идентификатор, чтобы косвенно поддерживать состояние входа в систему пользователей нашего апплета, так как же нам получить этот session_key? Нам нужно запросить сторонний интерфейс, предоставляемый WeChat, на нашем собственном сервере.https://api.weixin.qq.com/sns/jscode2session, этот интерфейс должен иметь четыре поля параметров:

параметр ценность
appid апплет
secret секрет апплета
js_code Код, отправленный вызовом wx.login ранее
grant_type 'authorization_code'

Из этих параметров видно, что для запроса этого интерфейса мы должны сначала вызвать wx.login(), чтобы получить код текущего сеанса пользователя. Так зачем нам запрашивать этот интерфейс на стороне сервера? На самом деле, из соображений безопасности, если мы вызываем этот интерфейс через запрос на фронтенде, нам неизбежно нужно выставлять наружу appid нашего апплета и секрет апплета, а также выставлять session_key, выданный сервером WeChat. «люди с сердцем», это влечет за собой большие риски для безопасности нашего бизнеса. Помимо необходимости получения session_key на стороне сервера, нам также необходимо обратить внимание на два момента:

  • Существует взаимно однозначное соответствие между session_key и кодом, распространяемым WeChat, и один и тот же код можно обменять на session_key только один раз. Каждый раз, когда вызывается wx.login(), будет выдаваться новый код и соответствующий session_key.Чтобы обеспечить достоверность взаимодействия с пользователем и статус входа в систему, разработчик должен знать, что пользователю необходимо снова войти в систему перед вызовом wx. .авторизоваться()

  • Session_key чувствителен ко времени.Даже если wx.login не вызывается, session_key истечет.Время истечения срока действия положительно связано с частотой использования апплета пользователем, но конкретная продолжительность времени недоступна для разработчиков и пользователей .

function getSessionKey (code, appid, appSecret) {
    var opt = {
        method: 'GET',
        url: 'https://api.weixin.qq.com/sns/jscode2session',
        params: {
            appid: appid,
            secret: appSecret,
            js_code: code,
            grant_type: 'authorization_code'
        }
    };
    return http(opt).then(function (response) {
        var data = response.data;
        if (!data.openid || !data.session_key || data.errcode) {
            return {
                result: -2,
                errmsg: data.errmsg || '返回数据字段不完整'
            }
        } else {
            return data
        }
    });
}

3. Создайте 3rd_session

сказал ранее черезsession_keyЧтобы «косвенно» поддерживать состояние входа в систему, так называемое косвенное, то есть нам нужноСохраняйте данные для входа пользователя самостоятельно, здесь также учитывается фактор безопасности.Если session_key, распространяемый сервером WeChat, напрямую используется в качестве состояния входа в систему деловой стороны, он будет использоваться «умными людьми» для получения конфиденциальной информации о пользователе, такой как wx.getUserInfo( ) Этот интерфейс ну и session_key нужен для расшифровки конфиденциальной информации пользователей WeChat.

Затем, если мы сгенерируем наш собственный идентификатор состояния входа в систему, мы можем использовать несколько распространенных необратимых алгоритмов хэширования, таких как md5, sha1 и т. д., чтобы вернуть сгенерированный идентификатор состояния входа (здесь мы вместе называем его «skey») во внешний интерфейс, И поддерживайте этот идентификатор состояния входа в систему на внешнем интерфейсе (обычно хранится в хранилище). На стороне сервера мы сохраняем сгенерированный ключ в таблице данных, соответствующей пользователю, а внешний интерфейс получает доступ к информации о пользователе, передавая ключ.

Здесь вы можете видеть, что мы использовали алгоритм sha1 для генерации ключа:

const crypto = require('crypto');

return getSessionKey(code, appid, secret)
    .then(resData => {
        // 选择加密算法生成自己的登录态标识
        const { session_key } = resData;
        const skey = encryptSha1(session_key);
    });
    
function encryptSha1(data) {
    return crypto.createHash('sha1').update(data, 'utf8').digest('hex')
}

4. checkSession

Раньше мы хранили skey во внешнем хранилище, и каждый раз при запросе пользовательских данных будет приноситься skey, ну и что, если session_key истекает в это время? Поэтому нам нужно вызвать API wx.checkSession(), чтобы проверить, истек ли срок действия текущего ключа session_key.Этому API не нужно передавать какие-либо информационные параметры о session_key, но апплет WeChat настраивает свою собственную службу, чтобы запрашивать последние данные пользователя. session_key, сгенерированный один раз, истек. Если срок действия текущего ключа session_key истек, позвольте пользователю снова войти в систему, обновите session_key и сохраните последний ключ в таблице данных пользователя.

Что касается шага checkSession, мы обычно включаем его в логику проверки состояния входа в систему при запуске апплета.Вот блок-схема проверки состояния входа:

img2

Следующий код представляет собой простой процесс проверки статуса входа:

let loginFlag = wx.getStorageSync('skey');
if (loginFlag) {
    // 检查 session_key 是否过期
    wx.checkSession({
        // session_key 有效(未过期)
        success: function() {
            // 业务逻辑处理
        },
    
        // session_key 过期
        fail: function() {
            // session_key过期，重新登录
            doLogin();
        }
    });
) else {
    // 无skey，作为首次登录
    doLogin();
}

5. Поддержка хранения выражений смайликов

Если имя пользователя WeChat необходимо сохранить в таблице данных, подтвердите формат кодирования таблицы данных и столбцов данных. Поскольку имя пользователя в WeChat может содержать значок смайлика, а обычно используемая кодировка UTF8 поддерживает только 1-3 байта, значок смайлика представляет собой именно 4-байтовую кодировку для хранения.

Здесь есть два пути (на примере mysql):

1. Установите набор символов для хранения

После версии mysql5.5.3 поддерживается установка набора символов базы данных, таблицы данных и столбца данных наutf8mb4, так что может быть/etc/my.cnfУстановите кодировку набора символов по умолчанию и формат кодировки на стороне сервера.

// my.cnf

[client]
default-character-set=utf8mb4
[mysql]
default-character-set=utf8mb4
[mysqld]
character-set-client-handshake = FALSE
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci

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

  • Установите набор символов базы данных наutf8mb4 
ALTER DATABASE 数据库名称 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci;
  • Установите набор символов таблицы данных наutf8mb4 
ALTER TABLE 数据表名称 CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
  • Установите набор символов поля столбца данных вutf8mb4 
ALTER TABLE 数据表名称 CHANGE 字段列名称 VARCHAR(n) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

здесьCOLLATEОтносится к отсортированному набору символов, который используется для сортировки и сравнения сохраненных символов.utf8mb4Есть два часто используемых сопоставления:utf8mb4_unicode_ciиutf8mb4_general_ci, обычно рекомендуется использоватьutf8mb4_unicode_ci, так как он основан на стандартахUnicode Collation Algorithm(UCA)Для сортировки вы можете точно сортировать на разных языках. Конкретное различие между этими двумя методами сортировки можно отнести к:What's the difference between utf8_general_ci and utf8_unicode_ci

  1. Кодируйте символы эмодзи в библиотеку с помощью sequenceize, а затем декодируйте их при использовании

Вот конфигурация сиквела, вы можете обратиться кУпорядочить документацию

{
       dialect: 'mysql',    // 数据库类型
       dialectOptions: {    
         charset: 'utf8mb4',
         collate: "utf8mb4_unicode_ci"
      },
}

Наконец

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

Технологический еженедельник IVWEBШок в сети, обратите внимание на публичный номер: сообщество IVWEB, регулярно публикуйте качественные статьи каждую неделю.

  • Сборник статей еженедельника:weekly
  • Командные проекты с открытым исходным кодом:Feflow
Категории