Недавно я работал над проектом, в котором используется «Зарегистрируйтесь с помощью Github», и я подумал, что было бы неплохо поделиться своим опытом использования авторизации Github с Graphql и Apollo Server.

Авторизация: это процесс предоставления пользователю разрешения на доступ к определенному ресурсу. Обычно это происходит после аутентификации.

Пойдем прямо к делу,

Настройка Github OAuth.

Весь этот процесс потребует от вас создания приложения Github.

  1. Войдите в свою учетную запись Github и щелкните значок пользователя в правом верхнем углу, чтобы открыть раскрывающееся меню с настройками в качестве одного из вариантов, и щелкните его.

2. На странице настроек выберите «Настройки разработчика» на левой панели.

3. На странице настроек разработчика выберите «Приложения OAuth» на левой боковой панели. Создайте новое приложение OAuth, нажав кнопку справа.

4. Добавьте следующий параметр, чтобы создать новое приложение OAuth.

5. Наконец, зарегистрируйте приложение, нажав кнопку «Зарегистрировать приложение».

На следующей странице скопируйте ваши Client ID и Client Secret. Эти два аспекта важны, и их не следует жестко закодировать в вашей кодовой базе, а хранить ключи в файле .env. Они должны быть сохранены в файле env следующим образом.

CLIENT_ID=<your client_id>
CLIENT_SECRET=<your client_secret>
STATE=<a non readable string that we will use for security purposes>

Процесс авторизации.

Существует два способа реализации авторизации:

  • Поток веб-приложений
  • Поток приложений, не относящихся к веб-приложениям *

В этом руководстве мы будем использовать метод потока веб-приложения.

Поток веб-приложений

Процесс просто выглядит следующим образом:

  • Пользователи перенаправляются на запрос своей личности на GitHub.
  • GitHub перенаправляет пользователей обратно на ваш сайт
  • Ваше приложение обращается к API с токеном доступа пользователя.
  1. Запрос личности пользователя на GitHub.

URL-адрес, который будет использоваться в этом процессе:

GET https://github.com/login/oauth/authorize

Чтобы авторизовать пользователя, вы можете встроить ссылку на кнопку со значком Github с текстом «войти с помощью» рядом с ним, например, с помощью response.

const Login = () => (
  <div>
    <a href={`https://github.com/login/oauth/authorize?client_id=${process.env.CLIENT_ID}&state=${process.env.STATE`}>
      <span>Sign up with Github</sapn>
      <img src=`add a github logo image` alt="github">
    </a>
  </div>
);

Здесь мы будем использовать GitHub Client_ID, который мы сохранили в нашем .env файле, и добавим его к URL-адресу в качестве параметра запроса с ключом client_id. Параметр state используется для защиты от атак с подделкой межсайтовых запросов.

2. Перенаправление пользователя обратно на ваш сайт с GitHub.

Если пользователь принимает ваш запрос, GitHub перенаправляет обратно на ваш сайт с временным code в параметре кода, а также с состоянием, которое вы указали на предыдущем шаге в параметре state. Срок действия временного кода истечет через 10 минут. Если состояния не совпадают, значит, запрос был создан третьей стороной, и вам следует прервать процесс.

Скоро продолжение этой статьи.