Корпоративный WeChat JS SDK: аутентификация

Описание

1. Перейдите на боковую панель входа и получите доступ к определённому веб-адресу.
2. Веб-интерфейс анализирует этот адрес и обращается к аутентификационному адресу корпоративного WeChat. После перенаправления он возвращается на исходный веб-адрес.
3. Затем происходит аутентификация на веб-сервере.

Проект состоит из двух частей:

• получение информации о пользователе;
• внедрение разрешений wx.config. Эти две части независимы друг от друга.

Подготовка

Требуется доступное доменное имя, например: http://t9mvyd.39nat.com.

Настройте Nginx так, чтобы различные проекты можно было нормально просматривать через указанное доменное имя.

Настройка сторонних приложений

В административной панели предприятия создайте стороннее приложение, а затем боковую рамку. Настройте URL следующим образом: http://t9mvyd.39nat.com?corpId=APPID.

Здесь используется метод непосредственного внедрения corpId. В файле index.ts на веб-входе выполняется анализ.

Получение кода

window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URIresponse_type=code&scope=SCOPE&state=STATE#wechat_redirect`;

Согласно адресу перенаправления, возвращённому по ссылке, можно получить код.

Кэширование кода и corpId

Для одного приложения в течение его жизненного цикла код и corpId остаются неизменными. Поэтому их можно сохранить в sessionStorage или внутреннем хранилище.

Получение информации о пользователе

Сервер должен предоставить интерфейс для получения информации о пользователях на основе кода и corpId.

Получение подписи

Одно приложение может получать не более 100 подписей в день. Подпись для всего приложения должна быть кэширована как на сервере, так и на веб-странице.

Подписи получаются с корпоративного WeChat и применяются ко всему приложению.

Получите подпись корпоративного WeChat и подпись приложения. Сохраните эту информацию.

Аутентификация

Вызов каждого API корпоративного WeChat требует аутентификации. Разные URL-адреса также требуют аутентификации.

Поэтому при переходе на каждую страницу вызывайте wx.config и wx.agentConfig.

Интерфейсы и API

setAuthContext устанавливает обязательные свойства.

Пример:

import { setAuthContext } from 'wxcom-js-jdk';

setAuthContext({
  jsApiList(['chooseImage']);
})

registerFetchDataFunction регистрирует методы получения билетов и информации о пользователях.

Этот метод позволяет зарегистрировать системные методы получения билетов и пользовательской информации на серверной стороне. Необходимо определить два метода:

• getTicket = (corpId) => {//система сама реализует};
• getUserInfo = (corpId, code) => {//система сама реализует}, где код возвращается корпоративным WeChat.

Затем зарегистрируйте эти два метода в js-sdk:

import { registerFetchDataFunction } from 'wxcom-js-sdk';
registerFetchDataFunction({
  fetchTicket: getTicket,
  fetchUser: getUserInfo
});

Вызовите метод weComStart на странице входа.

import { weComStart } from 'wecom-js-sdk';

weComStart();

Также можно отдельно вызывать методы getWeComCode, getReferTickets и getReferUser на странице входа.

Отладка

Можно включить режим отладки в wx.config.

import { openDebug } from 'wxcom-js-sdk';

// Вызов в месте входа
openDebug((result) => {
    // true означает включение, false — выключение. Для справки
    if(result) {
      Toast.info('debug включён')
    }
  });

Можно оставить режим отладки включённым. Поскольку при включении требуется дважды нажать на страницу 8 раз, иначе отладка не включится.

Использование

1. Добавьте пакет yarn add wecom-js-sdk.
2. В месте входа проекта, например в файле index.js:

import { setAuthContext, registerFetchDataFunction, weComStart, openDebug } from 'wecom-js-sdk';
import { getTicket, getUserInfo } from './service'; // Импорт собственных методов из локального, обычно предоставляемых данными с сервера

setAuthContext({});
registerFetchDataFunction({
    fetchTicket: getTicket,
    fetchUser: getUserInfo
  });

weComStart();

openDebug(); // Рекомендуется всегда включать. После стабилизации системы можно отключить.

3. Выполните аутентификацию на страницах, где необходимо вызвать wx.xxxx.

import { doAuth } from 'wecom-js-sdk';
const jsApiList = ['chooseImage']; // Здесь определите список jsApi, необходимый для текущей страницы

doAuth(jsApiList);

Таким образом завершается обычная аутентификация.

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

• const [tickets, userInfo] = await weComStart(); или

• weComStart().then(props => {// tickets = props[0], userInfo = props[1]}).

• Можно напрямую вызывать внутренние методы.

import { getReferTickets, getReferUser } from 'wecom-js-sdk';

Наконец, не забудьте включить https://res.wx.qq.com/open/js/jweixin-1.2.0.js в свой HTML-файл!