Автор оригинала: FreeCodeCamp Community Member.
Оладиппо Белло
В этой статье вы узнаете, как выполнить Социальная аутентификация в Graphql Сервер с Passport.js Отказ
Возможно, у вас есть система аутентификации, используя директивы или бесспорные обертки для защиты вашей схемы от несанкционированного доступа и задаются вопросом, как добавить аутентификацию через Google, Facebook или любой поставщик OAuth для вашего API.
Хорошо ремень, потому что несколько строк кода, и у вас будет только что.
Я не буду углублен тем, как работают Jwts или как получить Токен доступа от провайдера. Этот учебник будет сосредоточен на использовании Токен доступа Получается на клиенте, чтобы получить пользовательские данные от провайдера для регистрации и входа в систему.
Я также не захожу как настроить авторизацию для вашей схемы как много удивительных Учебники были сделаны на эту тему.
Короткая поездка вниз по переулке памяти – перед GraphQL ⏰
Аутентификация в покое простое: придерживайтесь промежуточного программного обеспечения на конечную точку, и вы закончите. В GraphQL, однако, есть только одна конечная точка, поэтому нам нужен другой подход.
Гист
После того, как вы понимаете, как пойти по внедрению социального входа в систему, небо будет пределом относительно кадра, языка или базы данных, которую вы решите использовать в конце. Так вот идет:
Шаг 1 : На внешнем интерфейсе получите появление поставщика аутентификации 3-го вечеринки.
Шаг 2 : (Все еще на интерфейсе) возьмите токен доступа Поставщик возвращает после согласования войти в систему.
Шаг 3 : (Yep, еще интерфейс) Отправьте этот токен к задней части как часть входного аргумента вашей мутации.
Шаг 4 : На заднем дне проверьте токен.
Шаг 5 : Если токен аутентичен, вы получите пользователь как часть ответа проверки (по крайней мере, это дело с Passport.js, которые мы будем использовать).
Шаг 6 : Сохраните данные пользователя в вашу базу данных.
Шаг 7 : Верните JWT в интернет. То, что вы делаете с этим токеном, не имеет возможности для этого учебника, но он, вероятно, должен использоваться для аутентификации каждого из зарегистрированных действий пользователя.
Там у вас есть, скелет для создания социального входа в систему с graphql.
Я оставлю шаги 1, 2 и 3, как они уже были покрыты здесь Отказ На практике не имеет значения, какие рамки/библиотеки вы используете на переднем конце. Все, что имеет значение, схватывает код доступа и запустить с ним мутацию.
Достаточно Chit-Chat. Давайте начнем.
Сначала вам нужно для получения идентификаторов аутентификации и секреты от различных поставщиков.
Шаг 1 : Перейти к https://developers.facebook.com/apps/ и выберите «Добавить новое приложение».
Шаг 2 : Дайте свое приложение имя и заполните вопрос безопасности.
Шаг 3 : Выберите «Интегрировать логин Facebook» и нажмите «Подтвердить».
Шаг 4 : Скопируйте ID приложения и Секрет приложения Значения, которые прячаются где-то на одной странице.
Шаг 1 : Перейти к консоли разработчиков: https://console.developers.google.com/ и создать проект
Шаг 2 : Посмотрите кнопки «Учетные данные OAUTH» в панели поиска и нажмите «Один вариант».
Шаг 3 : Попробуйте найти кнопку «Создание учетных данных». Если вы найдете его, продолжайте и нажмите на него. Выберите «oAuth Client ID».
Для типа приложения выберите « Веб-приложение ‘ Отказ
Для уполномоченного происхождения Добавьте http://localhost: 3000. В производстве вы, вероятно, захотите быть немного более конкретным.
Шаг 4 : Нажмите «Создать и скопируйте» ID клиента и Секрет клиента которые прячаются где-то на одной странице.
API Server.
Создайте папку для вашего сервера:
mkdir graphql-social-auth && cd graphql-social-auth
Инициализировать приложение с участием
npm init
или если вы используете пряжа
yarn init
Давайте запустим сервер API. Я буду использовать apollo-сервер здесь.
npm install --save apollo-server graphql
или если вы используете пряжу
yarn add apollo-server graphql
APOLLO Server установит экспресс-сервер для вас, если вы предоставляете его Typedefs и Резольверы Отказ
Typedefs обозначает определения типа, которые определяют «форму» ваших данных. Резольверы, с другой стороны, несут ответственность за получение данных для этих типов.
Создайте файл src/app.js и добавьте следующий код:
На данный момент мы можем запустить сервер, запустив
node src/app.js
После запуска сервера он должен распечатать сообщение для консоли, указывающей, что он готов.
? Server ready at http://localhost:4000/
Удивительно, как изменить порт или подключить сервер к существующему приложению Node.js? Проверьте аполлон-сервер Документация для получения дополнительной информации.
Чтобы исследовать вновь созданные API GraphQL, откройте браузер к ссылке, показанной в консоли, http://localhost: 4000/ Отказ APOLLO Server устанавливает игровую площадку GraphQL для вас, чтобы вы могли быстро запустить запросы и просматривать схему.
Чтобы запустить запрос, скопируйте следующий запрос, а затем нажмите кнопку «▶ ️»:
query { hello}И сервер должен вернуть простой ответ:
{ "data": { "hello": "world" }}Ура! Сервер работает. Теперь здесь приходит веселая часть.
- Мы должны настроить нашу схему и резользеры GraphQL.
- Мы должны настроить паспорт и подключить его к нашим резольсам, чтобы подтвердить наши жетоны с переднего конца.
- Нам также потребуется настроить MongoDB для обработки хранения наших пользователей.
Я буду использовать 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.jspassport.jstypeDefs.jsresolvers.js
Добавьте следующее в SRC/Mongoose.js:
Это подключит приложение к базе данных и настроить пользовательскую схему.
Он также создаст методы для создания JWTS и поиск пользователей из Facebook и Google в нашей базе данных.
Добавьте следующее в SRC/Passport.js:
Не забудьте заменить фиктивные идентификаторы клиента и секрет с теми из Facebook и Google.
С этим сказанным и сделанным, все, что осталось сейчас, обновляет типы и резользеров GraphQL.
Давайте переместим Typedefs и Resolvers для отдельных файлов, чтобы сохранить наше приложение. Добавьте следующее в SRC/Typedefs.js:
Следующий SRC/Resolver.js:
Далее мы рефикторуем нашу SRC/App.js для импорта схемы из отдельных файлов.
Наконец мы добавляем объекты запроса и ответа из Express на наш график контекст Отказ Это сделает их доступными в наших мутационных резольстах для использования с Passport.js Отказ
И мы закончили.
Проверяя это
Запустите следующую команду в отдельном окне, чтобы запустить демон Mongo:
mongod
Теперь перезапустите сервер API:
node src/app.js
Чтобы убедиться, что все работает должным образом, давайте схватим некоторые Доступ к токенам и пройти некоторые тесты.
Шаг 1: Откройте настройки приложения на https://developers.facebook.com/apps/ и выберите роли -> Тестируйте пользователей на боковой панели слева.
Шаг 2: Нажмите на редактирование и выберите «Изменить разрешения) Этот тестовый пользователь, предоставленный приложением»
Шаг 3: Добавьте электронную почту в разрешения и нажмите «Обновить».
Шаг 4: Нажмите на редактирование и выберите «Получить токен доступа для этого тестового пользователя»
Шаг 5: Скопируйте Токен доступа И запустите мутацию authfacebook с ней на детской площадке GraphQL.
Насколько я знаю, Google не имеет тестового пользователя, эквивалентного для своих API. Но мы можем использовать детскую площадку OAUTH, чтобы захватить себя действительным токен доступа.
Шаг 1: Перейти к https://developers.google.com/oauthPlayground Выберите символы «Google Oauth2 API V2» и нажмите «Авторизовать API»:
Вы будете перенаправлены на экран согласия Google.
Шаг 2: После предоставления вашему согласию найдите «Код авторизации Exchange для кнопки токенов» на странице и нажмите на него. Это будет генерировать действительный Обновить и Токен доступа для подписанного пользователя.
Шаг 3: Скопируйте генерируемые Токен доступа И запустить мутацию Authgoogle с помощью на игровой площадке GraphQL.
Это оно!
Вы сделали все это до конца! Если вы застряли по пути, не стесняйтесь проверить код в этом Репозиторий Отказ Если у вас есть какие-либо вопросы или отзывы, дайте мне знать в комментариях ниже.
Ваше здоровье!
Ladi Bello.