Доступ к веб-сайту QQ Входная функция

JavaScript

Оригинальная ссылка:Доступ к веб-сайту Функция входа QQ

Описание требования

На веб-сайте должна быть реализована функция входа в систему QQ.

иллюстрировать

  1. Функция входа в систему QQ, упомянутая в этой статье, реализована официальным протоколом OAuth2.0, который обладает большей автономией. Еще один относительно простой метод разработки JS-SDK, хоть и очень простой, но недостаточно автономный, поэтому не был принят на вооружение.
  2. URL-адреса, созданные ниже, используют синтаксис JavaScript ES6.

Зарегистрируйтесь как разработчик

Сначала войдитеОфициальный сайт QQ в Интернете, номер QQ, используемый при входе в систему, будет связан с соответствующей информацией, обратите на это внимание.

После входа в систему щелкните свой аватар QQ в правой части верхней панели навигации, чтобы войти в интерфейс регистрации/аутентификации разработчика.

Здесь вы можете зарегистрироваться в качестве разработчика как «компания» или «частное лицо». Сначала я использовал для регистрации актуальную информацию компании, но она всегда подсказывала, что проверка не удалась, но я не говорил, почему она не удалась, в конце концов, я просто использовал свои личные данные для регистрации, и вскоре она прошла успешно.

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

Создать веб-приложение

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

существуетQQ ИнтернетНа панели навигации в верхней части веб-сайта нажмитеУправление приложением. Нажмите на страницувеб приложениеэту вкладку, затем нажмитеСоздать приложение, и заполните соответствующую информацию по мере необходимости.

Обратите внимание, что здесь необходимо указать два URL-адреса, одинадрес веб-сайта, то есть веб-сайт, который должен разрешить пользователям входить в систему через QQ. другойДомен обратного вызова веб-сайта, это URL-адрес, который отвечает за связь с сервером Tencent и реализацию функции входа в QQ после того, как пользователь инициирует запрос на вход в QQ.Два URL-адреса следует различать.

После того, как созданная заявка на сайт будет одобрена, нажмитеПроверитьКнопки, детали интерфейса приложения веб-сайта могут быть назначены этому веб-сайтуAPP IDа такжеAPP Key, который будет использоваться позже, когда будет реализована функция входа в систему QQ.

Кроме того, вы также можете увидеть приложения сайта, прошедшие проверку, доступно два интерфейса приложений.АвторизоватьсяОн включен по умолчанию, второйunionidНужно открыть его вручную, здесь он откроется первым, и он будет израсходован.

Обзор процесса

Далее вам нужно написать код для реализации функции входа в систему QQ. Вот краткое описание всего процесса:

  1. Получите доступ к указанному веб-сайту по мере необходимости, и отобразится интерфейс входа в систему QQ. После выбора учетной записи QQ для входа вы будете отправлены на ранее заполненнуюДомен обратного вызова веб-сайтаКод авторизации.
  2. Домен обратного вызова веб-сайтаиспользовать этотКод авторизации, в сочетании с другими данными отправить запрос на указанный адрес, а полученный ответ содержитТокен доступа.
  3. Домен обратного вызова веб-сайтаповторное использованиеТокен доступаОтправьте запрос на указанный адрес, и полученный ответ будет содержать информацию о зарегистрированной учетной записи QQ.OpenID(Не касается конфиденциальности пользователя).
  4. Домен обратного вызова веб-сайтаЧтобы получитьOpenIDПосле этого соедините ранее полученныеAccess TokenИ другие данные, вы можете вызвать интерфейс QQ для достижения определенных функций. Например, вы можете позвонитьget_user_infoИнтерфейс для получения псевдонима, аватара и пола вошедшего в систему пользователя для отображения на странице интерфейса.

1. Получите код авторизации

На странице входа, написанной вами, после нажатия значка QQ запросите следующий адрес:

https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=${appId}&redirect_uri=${redirectUrl}&state=${state}&scope=${scope}

В приведенном выше адресе appId — это идентификатор приложения веб-сайта, redirectUrl — это домен обратного вызова веб-сайта приложения веб-сайта, состояние — это строка, определяемая пользователем, а область действия — это список авторизации, запрошенный у пользователя.

Вне области параметры являются обязательными, область действия, если не написано, то по умолчанию только интерфейс get_user_info запрос на авторизацию, чтобы получить несколько основных сведений о пользователе: никнейм QQ, аватар QQ, пол.

После инициирования запроса пользователь будет перенаправлен на официальную страницу входа в QQ, где пользователь выбирает номер QQ, который необходимо войти в систему, и нажимает «Войти».Домен обратного вызова веб-сайтаОбратный вызов, инициированный сервером Tencent, будет получен.

такой как ранее заполненныйДомен обратного вызова веб-сайтадляa.com/api/getauthcodeЕсли это так, сервер Tencent отправитДомен обратного вызова веб-сайтаОтправьте следующий запрос:

GET /getauthcode?code=F91C6110********

В полученном выше запросе в строке запроса URLcode=Следующая строка — это код авторизации, отправленный сервером Tencent.

2. Получите токен доступа

Получите код авторизации, объедините другие данные и запросите следующий адрес:

https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id=${appId}&client_secret=${appKey}&code=${authCode}&state=${state}&redirect_uri=${redirectUrl}

Домен обратного вызова веб-сайтаВы получите следующий ответ:

access_token=FF3A****&expires_in=7776000&refresh_token=2516****

Он включает в себя токен доступа, и этот токен доступа имеет срок действия 90 дней, но он не будет соответствовать официальным документам.Автоматическое обновление при повторном входе пользователя в систему, но несколько последовательных входов в систему за короткий промежуток времени (в течение дня) не будут обновляться.

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

3. Получите OpenID

После того, как у вас есть токен доступа, вы можете использовать его для получения OpenID текущей учетной записи QQ. Запросите следующий адрес:

https://graph.qq.com/oauth2.0/me?access_token=${accessToken}

Домен обратного вызова веб-сайтаВы получите следующий ответ:

callback( {"client_id":"appId","openid":"openId"} );

Приведенный выше ответ содержит APP ID и OpenID. APP ID можно использовать для подтверждения того, что это законный запрос веб-сайта. OpenID, естественно, является OpenID учетной записи QQ, вошедшей в систему.

В-четвертых, вызовите интерфейс для доступа к данным

С токеном доступа, полученным на втором этапе, и OpenID, полученным на третьем этапе, вы можете использовать его для доступа к интерфейсу QQ и получения соответствующей информации о пользователе.

Например, запрос следующим образомget_user_infoИнтерфейс может получать такую ​​информацию, как псевдоним пользователя, аватар QQ.

https://graph.qq.com/user/get_user_info?access_token=${accessToken}&oauth_consumer_key=${appId}&openid=${openId}

использованная литература

Категории