Разработка официальной учетной записи WeChat — примечания к авторизации на веб-странице WeChat

WeChat

Авторизация WeChat

Краткий процесс

Войдите (домашняя) страница -> данные запроса -> 401, требуется информация о пользователе -> инициировано интерфейсомАвторизация WeChat-> Пользователь подтверждает авторизацию -> WeChat перенаправляет на адрес обратного вызова -> Получить код, обменять код на авторизацию веб-страницы access_token, сгенерировать токен -> Прямо сейчас перейти на страницу и отправить токен на передний план end -> Внешний интерфейс посвящен всей странице для получения токена (постарайтесь не позволять пользователю видеть токен явно), а затем перенаправить на страницу, где пользователь впервые вошел

...сложное право...давайте проигнорируем вышеприведенный абзац

微信授权流程
Что ж, я провел одну ночь, рисуя это, я могу пожаловаться на неполное содержание, но, пожалуйста, постарайтесь распознать стиль рисования. Иначе можно только прочитать вышеприведенный абзац, подумать над этим

Объяснение и описание авторизованного адреса WeChat

Истинное лицо URL-адреса авторизации WeChat

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URL&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

URL авторизации WeChat, по сути, и есть такая строка

объяснять

поле Требуется ли имея в виду иллюстрировать
APPID да Уникальный APPID официального аккаунта
REDIRECT_URL да обратный адрес,Требуется обработка urlEncode После авторизации WeChat перейдет на этот адрес. Если не указано иное, адрес обратного вызова является фоновым интерфейсом, отвечающим за получение кода. Код подключается к адресу обратного вызова в виде параметра ?code=123456.
STATE нет Параметр состояния будет приведен после перенаправления, а разработчик может заполнить значение параметра a-zA-Z0-9, до 128 байт Как правило, внешний интерфейс может указать бэкэнду перейти на адрес страницы перед авторизацией, позволить бэкэнду получить код и перенаправить на адрес, а данные токена принести после адреса.
response_type да Тип возврата, введите код здесь
scope да Область авторизации приложения:snsapi_base(Не всплывает страница авторизации, прыгайте напрямую, только получайте openid пользователя),snsapi_userinfo(Всплывает страница авторизации, и через openid можно получить никнейм, пол и местоположение. И, даже если не обращать внимания, пока пользователь авторизуется, вы также можете получить его информацию)
#wechat_redirect да Независимо от того, открываете ли вы его напрямую или выполняете перенаправление страницы 302, вы должны ввести этот параметр

Пример

redirect_uri: http://xxxx.xxxxx.com/api/customer/wechat/authorize

состояние:http://xxxx.xxxx.com/#/wechatLogin

redirect_uri WeChat требует обработки кодирования

состояние связано с тем, что используется хеш-маршрутизация, есть #, который конфликтует с '#wechat_redirect', поэтому его необходимо закодировать

Так или иначе, redirect_uri и состояние обрабатываются encodeURIComponent, это верно

Веселая версия

https://open.weixin.qq.com/connect/oauth2/authorize
?appid= **xxxxx**
&redirect_uri= **http%3A%2F%2Fxxxx.xxxx.com%2Fapi%2Fcustomer%2Fwechat%2Fauthorize**
&response_type=code
&scope=snsapi_userinfo
&state= **http%3A%2F%2Fxxxx.xxxx.com%2F%23%2FwechatLogin**
#wechat_redirect

нормальная версия

https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxx&redirect_uri=http%3A%2F%2Fxxxx.xxxx.com%2Fapi%2Fcustomer%2Fwechat%2Fauthorize&response_type=code&scope=snsapi_userinfo&state=http%3A%2F%2Fxxxx.xxxx.com%2F%23%2FwechatLogin#wechat_redirect

Поместив его в браузер WeChat, он выглядит нормально.

элемент конфигурации

  1. Установить доменное имя обратного вызова авторизации WeChat

  1. Привязать как разработчик официального аккаунта

Пока вы являетесь администратором или оператором официальной учетной записи, вы имеете право добавлять/удалять разработчика официальной учетной записи. но! ! ! Не так просто стать разработчиком! ! !
enter description here

Прежде всего, его должны искать люди, использующие WeChat. Тогда подпишитесь на этот публичный аккаунт На что еще вы обращаете внимание в WeChat Developer Center? ...ждите потрескивающей кучи вещей

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

enter description here

инструмент:Инструменты разработчика WeChat

Об авторе: Ли Яохуэй, веб-разработчик веб-интерфейса Reed Technology, представительные работы: апплет Feihuating, ген выносливости, красный конверт YY emoji, мини-игра YY Stacking Square Live Competition. Он хорош в создании веб-сайтов, разработке официальной учетной записи, разработке апплета WeChat, мини-игр и разработке официальной учетной записи, уделяя особое внимание исследованиям в области интерфейса, рендеринга на стороне сервера, технологии SEO, дизайна взаимодействия, рендеринга изображений, анализа данных и т. д. .

Добро пожаловать, чтобы сражаться плечом к плечу с нами:web@talkmoney.cn

доступwww.talkmoney.cnпонять больше