Авторизация 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, он выглядит нормально.
элемент конфигурации
- Установить доменное имя обратного вызова авторизации WeChat
- Привязать как разработчик официального аккаунта
Прежде всего, его должны искать люди, использующие WeChat. Тогда подпишитесь на этот публичный аккаунт На что еще вы обращаете внимание в WeChat Developer Center? ...ждите потрескивающей кучи вещей
Но вы нормальный человек, просто следуйте подсказке WeChat, и все будет в порядке~
инструмент:Инструменты разработчика WeChat
Об авторе: Ли Яохуэй, веб-разработчик веб-интерфейса Reed Technology, представительные работы: апплет Feihuating, ген выносливости, красный конверт YY emoji, мини-игра YY Stacking Square Live Competition. Он хорош в создании веб-сайтов, разработке официальной учетной записи, разработке апплета WeChat, мини-игр и разработке официальной учетной записи, уделяя особое внимание исследованиям в области интерфейса, рендеринга на стороне сервера, технологии SEO, дизайна взаимодействия, рендеринга изображений, анализа данных и т. д. .
Добро пожаловать, чтобы сражаться плечом к плечу с нами:web@talkmoney.cn
доступwww.talkmoney.cnпонять больше