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

Вход на сайт с помощью GitHub. OAuth

11 марта 2017
В прошлой статье я описывал реализацию OAuth протокола Twitter, которая оказалась наиболее сложной из всех. Сложность заключается в создании дополнительного запроса для получения request-токена, это нулевой этап twitter oauth-flow. Далее каждый запрос к API должен иметь заголовок, содержащий тело всего запроса в зашифрованном виде. И, наконец, все заголовки каждого запроса должны быть упорядочены по алфавиту, это относится и к заголовку с зашифрованным телом запроса, в нем тоже все должно быть отсортировано и только после зашифровано.

В этой статье я расскажу как добавить на сайт кнопку авторизации с помощью GitHub, и подводных камнях, о которых не пишут в этих ваших интернетах

Для начала, традиционно регистрируем приложение на гитхабе, вот здесь.

Заполняем простую форму, единственное, на что нужно обратить внимание - Homepage URL и Authorization callback URL. Есть правило - начало Authorization callback должно равняться homepage url. Например, если homepage "http://localhost", то callback может быть только "http://localhost/callback"; или homepage url "http://localhost/mysite/index", то то callback " http://localhost/mysite/index/callback". Как то так.



После того, как приложение создано - скопируйте полученные client_id и client_sercret, к ним будем обращаться неоднократно.



План реализации кнопки "войти с помощью Github"


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

Шаг 1
На странице авторизации добавляем ссылку или кнопку, которая должна иметь href
"https://github.com/login/oauth/authorize?client_id=d0362b7341b4613591607&redirect_uri= https%3A%2F%2Flocalhost%2Fcallback"

Где client_id это ваш ID, который был присвоен после регистрации приложения, redirect_uri=https://localhost/callback в URL-кодированном виде (можно не кодировать, браузер все сделает за вас, но это не путь джедая)

Важно!
Ваш сайт должен работать по https-протоколу. Это обязательное условие, которого требуют ВСЕ OAuth-провайдеры

Шаг 2
Проверяем - открываем форму авторизации, кликаем на созданную кнопку и перемещаемся на гитхаб. Если все ок, то примерно такую форму авторизации


Шаг 3
Использую гит-аккаунт авторизуемся. Если все ок - перекинет на callback url, то есть обратно на ваш сайт. Кроме этого будет передан параметр code, он понадобится для получения access_token

Шаг 4
Для определения связи github-аккаунта с акком на вашем сайте нужно получить уникальный для каждого github-пользователя access_token. Для этого дергаем url https://github.com/login/oauth/access_token POST-запросом. В теле запроса нужно передать code (шаг 3), client_id и client_secret. В ответ получаем токен пользователя, который следует сохранить в базе

Шаг 5
Ищем токен, полученный на четвертом шаге, в базе. Если есть совпадение - авторизуем пользователя в рамках своего сайта, как будто он вбил свой логин и пароль на форме и нажал войти.
Если нет совпадений - пользователь авторизовался с помощью гитхаба впервые. Тот самый момент, когда нужно запросить данные о пользователе. Дергаем GET-запросом https://api.github.com/user. Если все правильно, то в ответ получим JSON-объект пользователя, содержащий id, логин, никн, мега-аву и еще 9000 полей.
Get-запрос (querystring) должны содержать параметры: access_token (шаг 4), client_id и client_secret. Еще в заголовки запроса нужно добавить заголовок Connection и User-Agent. Если этого не сделать - то получите ошибку (если используете HttpClient или WebRequest).

The server committed a protocol violation. Section=ResponseStatusLine.


Лечится добавлением строки в web.config
<system.net> <settings> <httpWebRequest useUnsafeHeaderParsing="true" /> </settings> </system.net>


Но правильнее посылать запрос с заголовками "Connection: close" и "User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64)".

Финалочка
После получения JSON-объекта с данными пользователя предлагаем ему привязать его аккаунт (на вашем сайте) к аккаунту на гитхабе. Если у него нет аккаунта, то пусть зарегистрируется (часть полей уже можно заполнить за него, взяв их из полученного JSON), после успешной регистрации автоматически связываем созданный акк с акком на гитхабе. В дальнейшем пользователь сможет использовать как свой гит-аккаунт, так и вновь зарегистрированный.

Весь код доступен на гите
 
2671
0

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

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