heap.tech
лаборатория велосипедов
×

Вход на сайт через социальные сети. Twitter OAuth

03 марта 2017
Уже давно хотел, даже мечтал, разобраться с протоколом OAuth и, конечно, добавить на сайт кнопку входа через социальные сети: vk, fb, twitter, instagram и иже с ними. В этих интернетах полно гайдов, примеров и реализаций, как хороших, так и не очень. В первую очередь я захотел добавить вход через twitter, нашел пару примеров, но ни один из них не захотел нормально работать. Challenge accepted.

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


С начала пжлст


Для начала, чтобы использовать кнопку входа через twitter, нужно пройти квест на темного эльфа создать своё приложения. Это просто - здесь нужно зарегистрировать свое приложение заполнив простую форму: имя приложения, описание, url вебсайта и callback (можно оставить пустым и изменить позднее). Но callback таки всеже придется указать, это необходимо для OAuth.

Готово, приложение создано. Теперь нужно сгенерировать секретные ключи - открываем вкладку Keys and Access Tokens и нажимаем на две кнопки: Regenerate Consumer Key и, чуть ниже, Regenerate My Access Token. Готово, теперь самое интересное - что дальше.


Суть пжлст


Вводная часть - у меня есть ключи приложения twitter и я хочу добавить кнопку авторизации с помощью этой социальной сети.

План реализация кнопки, по шагам

1. Пользователь заходит на форму авторизации на моем сайте
2. Нажимает на кнопку "войти с помощью twitter"
3. Его перекидывает на сайта твитера - там он авторизуется
4. После авторизации на сайте TW его перекидывает на мой сайт
5. Мой сайт должен определить, был ли привязан аккаунт твиттера к аккаунту на моем сайте. Если да - выполнить вход на сайт (авторизовать пользователя и перекинуть его на главную). Если нет - показать формы для создания новой или привязки существующей учетки моего сайта к твиттер-аккаунту.
6. Профит.


Я не люблю ждать, поэтому сразу ко второму шагу


Немного теории - любой запрос к API твитера должен иметь обязательные параметры в заголовке Authorization:
"oauth_consumer_key" - копипаст с сайта TW (вкладка Keys and Access Tokens)
"oauth_nonce" - рандомная строка
"oauth_signature_method" - всегда HMAC-SHA1
"oauth_timestamp" - время создания запроса в unix-формате
"oauth_token" - Access Token (вкладка Keys and Access Tokens, в самом низу, он имеет вид 1234567890-dfgsdfgsdfgsd....
"oauth_version" - всегда 1.0
"oauth_signature"

спойлер
полный листинг кода создания и формирования запросов в конце статьи


Параметр oauth_signature должен содержать все параметры запроса (спокойствие, без рекурсии - все параметры, кроме самого себя) плюс URL (API endpoint) и метод запроса (get, post, head etc) в зашифрованном виде (SHA1 алгоритм).

Еще важно помнить, что все обязательные и дополнительные параметры должны быть отсортированы по алфавиту.

С теорией все. Практика. Пользователь нажимает "войти через twitter". Первое, что нужно сделать - это отправить запрос для получения REQUEST_TOKEN на этот URL https://api.twitter.com/oauth/request_token. Запрос должен содержать, кроме обязательных параметров, параметр oauth_callback содержащий адрес (например "http://localhost/callback"), на который будет переадресован пользователь, после того как вобьет свой логин и пароль на сайте TW.


Шаг 3.


Перекидываем пользователя по URL https://api.twitter.com/oauth/authenticate?oauth_token={ТОКЕН_ИЗ_ШАГА_ДВА}.


Шаг 4.


Пользователь авторизовался (уже был авторизован) в твиттере и его перекинуло обратно на наш сайт, именно на тот URL, который был задан в параметре oauth_callback (второй шаг). Редирект на наш сайт будет содержать два параметра: oauth_token и oauth_verifier. Эти два параметра нужны для получения access_token. access_token - это уникальный для каждого пользователя токен. Именно по этому токену мы будем проверять, привязан ли у этого пользователя аккаунт на нашем сайте или нет.

Для получения access_token нужно отправить POST запрос на https://api.twitter.com/oauth/access_token. В тело запроса (то есть в request body, но не в заголовок) нужно запихнуть полученное значение параметра oauth_verifier. А в заголовке Authorization заменить значение oauth_token на полученное на шаге 4. В ответе на запрос получаем access_token, id и никнейм пользователя. Сохраняем.


Пятый шаг


Имея access_token пользователя проверяем, есть ли у него (на нашем сайте) учетка, привязанная к твиттер-аккаунту. Если есть - то авторизуем пользователя на сайте (для этого используются механизмы авторизации вашего сайта, как будто пользователь ввел свой логин и пароль). Если у пользователя нет привязанного или вообще аккаунта - предлагаем ему привязать/зарегистрироваться. В следующий раз ему уже не придется этого делать, потомучто мы сохранили связь между access_token, полученный от твитера, и учеткой пользователя на нашем сайте.


Пятый и 1\2 шаг


Чтобы получить все данные пользователя (инициалы, ссылка на аватарку, ник, последний твит и еще овер 9000 полей) нужно дернуть url https://api.twitter.com/1.1/account/verify_credentials.json. В качестве параметров ничего передавать не надо, поэтому его нужно делать сразу после того, как получили access_token. Запрос всегда возвращает данные последнего пользователя, для которого был получен токен.


Финалочка


Полный листинг кода здесь, остается только скопипастить и задать ваши секретные токены, они есть на сайте твитера (см картинку).


 
1895
0

Оставлять комментарии могут только зарегистрированные пользователи

пока никто не оставлял комментариев