Тихая авторизация веб-страницы WeChat

WeChat

предисловие

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

Предварительная конфигурация WeChat

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

Для разработки функции авторизации веб-страницы WeChat должна быть учетная запись службы (для предприятий), а отдельные лица могут подавать заявку только на учетную запись подписки. Но мы можем завершить разработку функции, подав заявку на номер теста интерфейса.

Откройте страницу управления тестовыми номерами и укажите информацию о тестовых номерах appID и appsecret . Требует от нас предоставления доступного доменного имени для проверки доступности ресурсов сервера.

Конкретный метод:

  1. Заполните адрес своего сервера в информации о конфигурации интерфейса, Токен (настраиваемый и свободный)
  2. Служба WeChat отправит запрос на ваш сервер с рядом параметров, попросив вас вернуть соответствующие параметры.
// 服务端代码如下 
// 获取 测试号管理微信号 token
router.get('/token',async ctx=>{
  const token = 'customToken'
  const {
    signature,
    timestamp,
    nonce,
    echostr
  } = ctx.query
  // 进行字典排序加密
  let str = [token, timestamp, nonce].sort().join("");
  let sha = sha1(str)
  // 校验微信加密签名,返回echostr内容
  if (sha === signature) {
    ctx.body = echostr
  } else {
    ctx.body = "wrong"
  }
})

После успешной проверки сервера отсканируйте QR-код тестового номера, чтобы добавить список пользователей и начать разработку.

Шаги развития

Поместите формат ссылки

Формат ссылки, размещаемой в сервисном номере, следующий (склеивается вручную):

open.WeChat.QQ.com/connect/OA U…

должен быть в курсе

  1. Доменное имя адреса redirect_uri должно соответствовать доменному имени безопасности интерфейса js.

  2. scope Область авторизации приложения: snsapi_base (страница авторизации не выскочит, прыгнет напрямую, можно будет получить только openid пользователя), snsapi_userinfo (всплывет страница авторизации, а никнейм, пол и местоположение можно будет получить через openid .

Код биржи для авторизации веб-страницы access_token

В перенаправленной ссылке самого redirect_uri нет кода.Когда мы открываем опубликованную ссылку в браузере WeChat, WeChat автоматически переходит на целевой адрес и вставляет значение кода после ссылки. Для удобства просмотра я открыл указанную выше ссылку в инструменте разработчика WeChat, чтобы получить ссылку следующим образом.

Клиент получает код в ссылке и передает его серверу. Код сервера выглядит следующим образом: вызовhttps://open.weixin.qq.com/connect/oauth2/authorizeПередайте соответствующие параметры на сервер WeChat, чтобы получить access_token

router.get('/access-token',async ctx=>{
  const grant_type = 'authorization_code'
  const code = ctx.query.code 
  // 拿到 access_token
  let wechatInfo = await fetchGet('/oauth2/access_token',{
    appid,
    secret,
    code,
    grant_type
  })
  console.log('wechatInfo',wechatInfo);
  // {"access_token":"28_pC4LZEoIa2boBlUlT2X3itT_yDAzrwiPXgqbxEAgf2XC7Eye2jHj3_WW4Xqf8ra0b-gPaCIC6bmiuS5O_VMQ4g","expires_in":7200,"refresh_token":"28_m5hfO9IYieZKJUCU7I_0LzJMdfFLmO10nX0IHiBEkW63yNTy2XBJS2wvke1uISSrKbsS9f3n7PpEjRRQgjl8CA","openid":"oNqRVxFO4TCF0CehAJfWGJI_kU14","scope":"snsapi_base"}
})

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

Если область видимости — snsapi_userinfo, после авторизации пользователя он перейдет на адрес redirect_uri, а сервер получит access_token и openid после запроса интерфейса connect/oauth2/authorize. Затем используйте эти два параметра для получения информации о пользователе.

const { access_token,refresh_token,openid } = wechatInfo
let userinfo = await fetchGet('/userinfo',{
  access_token,
  openid,
  lang:'zh_CN'
})
console.log('userinfo',userinfo);
// {"openid":"oNqRVxFO4TCF0CehAJfWGJI_kU14","nickname":"浼氶","sex":0,"language":"zh_CN","city":"","province":"","country":"","headimgurl":"http:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/QpnatTdwxlVfGO1ZdZYlACghRbXhq8sibI2GF8x0XhVqcmPKl7OQxI5wOobHiaiblOr0kaojXLGbicibc8pa8zk2wPg\/132","privilege":[]}

Убедитесь, что access_token действителен, и обновите access_token.

Используйте этот интерфейс, чтобы оценить действительность access_token

https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID

Чтобы обновить access_token, используйте refresh_token, возвращенный предыдущим интерфейсом /oauth2/access_token, в качестве параметра для настройки обновленного интерфейса и получения последнего интерфейса.

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

"errcode":40163,"errmsg":"code been used

Описание кода: Код используется в качестве тикета в обмен на access_token. Код при авторизации каждого пользователя будет разным. Код можно использовать только один раз, и срок его действия автоматически истечет, если его не использовать в течение 5 минут.

Об этой ошибке будет сообщено позже, если интерфейс connect/oauth2/authorize вызывается с тем же кодом.

будь осторожен

Если пользователь подписался на официальную учетную запись, он может получить информацию о пользователе через openid.

• Использовать тихую авторизацию для пользователей, заходящих с официального входа в аккаунт

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

код недействителен

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

    const url = location.href.replace(/code=\w+&/g,'')
        history.replaceState(history.state,document.title,url)

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

• Ссылка не может быть передана напрямую при повторном совместном использовании.open.weixin.qq.com/... адрес, второе решение - судить о том, есть ли в ссылке код. Если кода нет, используйте location.href=url, чтобы сразу перейти к нашему склеенномуopen.weixin.qq.com/... но это приведет к тому, что страница начнет мигать, а интерактивный опыт не очень хорош.

• Отрицательный эффект заключается в том, что если страница использует код для авторизации второй страницы, код был обработан на первой странице, и страница будет снова обновлена ​​через location.href. с участием.

• Параметры, переданные в ссылке, нестабильны. Если вы добавите параметры на последующих страницах, страница будет принудительно обновлена ​​из-за возврата на домашнюю страницу. Вы можете рассмотреть возможность локального сохранения параметров.

Официальная документация WeChat

Категории