В этой статье вы узнаете, как выполнить социальную аутентификацию на сервере GraphQL с помощью Passport.JS.

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

Хорошо пристегнитесь, потому что несколько строк кода, и у вас будет именно это.

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

Я также не буду вдаваться в подробности о том, как настроить авторизацию для вашей схемы, так как по этой теме было создано множество замечательных руководств.

Короткое путешествие по переулку памяти - до GraphQL ⏰

Аутентификация в REST проста: прикрепите промежуточное ПО к конечной точке, и все готово. Однако в graphQL есть только одна конечная точка, поэтому нам нужен другой подход.

Суть

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

Шаг 1. Во внешнем интерфейсе откройте всплывающее окно для входа в систему стороннего поставщика аутентификации.

Шаг 2. (Все еще в интерфейсе.) Получите токен доступа, который поставщик возвращает после того, как согласился войти в систему.

Шаг 3: (Да, все еще интерфейсный) Отправьте этот токен в серверную часть как часть входного аргумента вашей мутации.

Шаг 4: на серверной стороне проверьте токен.

Шаг 5. Если токен является подлинным, вы получите пользователя как часть проверочного ответа (по крайней мере, так обстоит дело с Passport.js, который мы будем использовать).

Шаг 6. Сохраните данные пользователя в своей базе данных.

Шаг 7. Верните JWT во внешний интерфейс. То, что вы делаете с этим токеном, выходит за рамки этого руководства, но его, вероятно, следует использовать для аутентификации каждого действия вошедшего в систему пользователя.

Вот и все, скелет для создания входа в социальные сети с помощью graphQL.

Я опущу шаги 1, 2 и 3, поскольку они уже были рассмотрены здесь. На практике не имеет значения, какие фреймворки / библиотеки вы используете в интерфейсе. Все, что имеет значение, - это захват кода доступа и запуск с ним мутации.

Хватит болтовни. Приступим.

Сначала вам нужно получить идентификаторы аутентификации и секреты от различных поставщиков.

Facebook

Шаг 1: перейдите на https://developers.facebook.com/apps/ и выберите Добавить новое приложение.

Шаг 2. Дайте своему приложению имя и ответьте на секретный вопрос.

Шаг 3: выберите «Интегрировать вход в Facebook» и нажмите «Подтвердить».

Шаг 4. Скопируйте значения Идентификатор приложения и Секрет приложения, которые скрываются где-то на одной странице.

Google

Шаг 1: перейдите в консоль разработчика: https://console.developers.google.com/ и создайте проект.

Шаг 2. Найдите в строке поиска «учетные данные oauth» и выберите один из всплывающих окон.

Шаг 3: попробуйте найти кнопку "Создать учетные данные". Если вы найдете его, нажмите на него. Выберите «Идентификатор клиента Oauth».

В качестве типа приложения выберите «веб-приложение».

Для авторизованного источника добавьте http: // localhost: 3000. В процессе производства вы, вероятно, захотите быть более конкретным.

Шаг 4. Нажмите "Создать" и скопируйте Идентификатор клиента и Секрет клиента, которые скрываются где-то на той же странице.

Сервер API

Создайте папку для вашего сервера:

mkdir graphql-social-auth && cd graphql-social-auth

Инициализировать приложение с помощью

npm init

или если вы используете пряжу

yarn init

Давайте запустим сервер API. Я буду использовать здесь apollo-server.

npm install --save apollo-server graphql

или если вы используете пряжу

yarn add apollo-server graphql

Apollo Server настроит для вас экспресс-сервер, если вы предоставите ему typeDefs и resolvers.

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

Создайте файл src / app.js и добавьте следующий код:

На этом этапе мы можем запустить сервер, запустив

node src/app.js

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

🚀 Server ready at https://localhost:4000/

Хотите знать, как изменить порт или подключить сервер к существующему приложению node.js? Ознакомьтесь с документацией apollo-server для получения дополнительной информации.

Чтобы изучить недавно созданный GraphQL API, откройте в браузере ссылку, отображаемую в консоли, https://localhost:4000/. Apollo Server настраивает для вас GraphQL Playground, чтобы вы могли быстро запускать запросы и изучать схему.

Чтобы выполнить запрос, скопируйте следующий запрос и нажмите кнопку «▶ ️»:

query {
  hello
}

И сервер должен вернуть простой ответ:

{
  "data": {
    "hello": "world"
  }
}

Ура! Сервер работает. А теперь самое интересное.

  1. Нам нужно настроить нашу схему и преобразователи graphQL.
  2. Нам нужно настроить Passport и подключить его к нашим резольверам для проверки наших токенов из внешнего интерфейса.
  3. Нам также нужно будет настроить Mongo для хранения наших пользователей.

Я буду использовать MongoDB, потому что его проще настроить, но заменить его на MySQL не составит труда.

Сначала установим необходимые зависимости:

npm install --save passport passport-facebook-token passport-google-token mongoose jsonwebtoken

или если вы используете пряжу

yarn add passport passport-facebook-token passport-google-token mongoose jsonwebtoken

Затем откройте папку src и создайте следующие файлы:

mongoose.js
passport.js
typeDefs.js
resolvers.js

Добавьте в src / mongoose.js следующее:

Это подключит приложение к базе данных и настроит схему пользователя.

Он также создаст методы для создания JWT и поиска пользователей из Facebook и Google в нашей базе данных.

Добавьте в src / паспорт.js следующее:

Не забудьте заменить фиктивные идентификаторы и секреты клиентов на идентификаторы Facebook и Google.

С учетом сказанного и сделанного, все, что осталось, - это обновить типы и преобразователи graphQL.

Давайте переместим typeDefs и резолверы в отдельные файлы, чтобы наш app.js оставался аккуратным и аккуратным. Добавьте в src / typeDefs.js следующее:

Далее src / resolver.js:

Затем мы реорганизуем наш src / app.js, чтобы импортировать схему из отдельных файлов.

Наконец, мы добавляем объекты запроса и ответа из express в наш контекст graphQL. Это сделает их доступными в наших преобразователях мутаций для использования с Passport.JS.

И мы закончили.

Пробуем

Выполните следующую команду в отдельном окне, чтобы запустить демон Mongo:

mongod

Теперь перезапустите сервер API:

node src/app.js

Чтобы убедиться, что все работает правильно, давайте возьмем несколько токенов доступа и проведем несколько тестовых запусков.

Facebook

Шаг 1. Откройте настройки приложения на https://developers.facebook.com/apps/ и выберите Роли -› Тестовые пользователи на боковой панели слева.

Шаг 2. Нажмите "Изменить" и выберите "Изменить разрешения, предоставленные этим тестовым пользователем приложению".

Шаг 3. Добавьте адрес электронной почты к разрешениям и нажмите "Обновить".

Шаг 4. Нажмите "Изменить" и выберите "Получить токен доступа для этого тестового пользователя".

Шаг 5: Скопируйте токен доступа и запустите с ним мутацию authFacebook на игровой площадке graphQL.

Google

Насколько мне известно, у Google нет тестового пользовательского эквивалента для своих API. но мы можем использовать Oauth Playground, чтобы получить действительный токен доступа.

Шаг 1. Перейдите на https://developers.google.com/oauthplayground, выберите области Google OAuth2 API v2 и нажмите Авторизовать API:

Вы будете перенаправлены на экран согласия Google.

Шаг 2: предоставив согласие, найдите на странице кнопку «обменять код авторизации на жетоны» и нажмите на нее. Это сгенерирует действительный обновления и токен доступа для вошедшего в систему пользователя.

Шаг 3. Скопируйте сгенерированный токен доступа и запустите с ним мутацию authGoogle на игровой площадке graphQL.

Вот и все!

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

Ваше здоровье!

Лади Белло