Angular 5 / Express / CORS с Facebook OAuth

Итак, у меня проблема с тем, чтобы мое приложение стека MEAN предоставляло oauth для Facebook с помощью PassportJS. А именно, я не могу понять, как заставить CORS работать на стороне Angular приложения.

В моем приложении приложение angular отправляет запрос на получение через действие щелчка пользователя:

<button (click) = "onFacebookLogin()" class = "loginBtn loginBtn-facebook"> 
    <span><img src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png"/></span>| Login with Facebook
</button>

что в конечном итоге приводит к этому запросу на получение в моем loginService:

facebookLoginUser(): Observable <User> {
  return this.http.get('users/auth/facebook')
}

Это, конечно, приводит меня к моему маршруту, который использует паспорт.js:

// This part is in a 'users' module which is why you don't see 'users' prepend the route
router.get('/auth/facebook', passport.authenticate('facebook', {
    scope: ['email', 'photos']
}))

Теперь этот фрагмент кода возвращает ошибку от Facebook, в которой говорится, что «фотографии» - неправильная область видимости (к этому я обращусь позже). Моя проблема в том, что запрос не отправляет ошибку на мой сервер, а вместо этого доставляет ошибку (и я предполагаю конечный объект) в приложение angular (я вижу ошибку в консоли браузера). Браузер, естественно, жалуется на это, поскольку facebook пытается связаться с ним по запросу, который он не инициировал (cors). У меня вопрос, как мне это исправить?

Рекомендации из вопроса это SO говорят, что я должен перейти к предложению, которое мне нужно перейти на страницу, с которой я делаю запрос. Я попытался сделать кнопку ссылкой с элементом привязки и href, но это не сработало. Также в этом вопросе используется angular.js, и я не думаю, что предоставление нового маршрута с моим маршрутизатором и создание совершенно нового представления кажется очень разумным. Кроме того, я все еще чувствую, что Facebook будет возвращать пользователя в приложение angular, а не в мое экспресс-приложение, как я собирался. Кто-нибудь знает, что мне делать?

Обновлять Код ошибки

Failed to load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Ffacebook%2Fcallback&scope=email%2Cphotos&client_id=2087173708182970: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Очень громоздкое описание. Какую ошибку вы видите в консоли браузера? Как вы думаете, почему вам нужно настроить что-то, связанное с CORS, в приложении angular? CORS - это на самом деле переговоры между сервером и браузером, он не требует от вас какой-либо настройки клиентского приложения.

Alexander Leonov 20.04.2018 17:41

извините, если я не совсем понял, и я обновил вопрос с ошибкой, предоставленной браузером.

Stephen Agwu 20.04.2018 19:00

Я думаю, что это вопрос cors из-за предоставленной мне ошибки и того факта, что другие вопросы, которые я искал, наводят на мысль, что это как-то связано с cors. Другой вопрос, который я искал, говорит, что мой сервер отвечает на мое приложение angular перенаправлением 302 на facebook. Я подтвердил это на вкладке сети devtools. Я считаю, что facebook реагирует на это перенаправление (на мое приложение angular), а не нацеливается на мое экспресс-приложение. Мне интересно, что с этим делать

Stephen Agwu 20.04.2018 19:03

Что ж, если вы считаете, что это связано с CORS, вам необходимо предоставить все связи между браузером и сервером, связанные с этим вызовом. 302 может быть фактически запрещенным кодом на некоторых этапах согласования CORS.

Alexander Leonov 20.04.2018 20:13

похоже, что он нацелен на ваш сервер (если у вас нет приложения Angular в порту 3000). Попробуйте ngrok и настройте URI обратного вызова Facebook на свой URL-адрес Ngrok. Найдите ngrok

Chau Tran 20.04.2018 20:40

Ну это у меня плохо. В разделе разработчиков Facebook я ввел то, что я считал http uri. Между тем я не знал, что Facebook автоматически преобразует это в протокол https (что бы я ни делал! Даже если у меня не установлен принудительный https !!). Поскольку я не настроил соединение ssl / tsl, я не могу получить обратный вызов. Я не уверен, что это конец, все проблемы, но я знаю, что это проблема, с которой я столкнулся сейчас. Извините, друзья.

Stephen Agwu 21.04.2018 00:15

На самом деле это не проблема CORS, а проблема в том, что этот запрос изначально был сделан неправильно. Пользователь должен взаимодействовать с диалоговым окном входа в систему - и этого, конечно, не произойдет, если вы попытаетесь запросить его в фоновом режиме. Вам нужно перенаправить пользователя к URL-адресу диалога входа в систему в его браузере - все, что пытается сделать что-либо AJAX-y в этом отношении, в корне неправильно с самого начала.

CBroe 23.04.2018 09:12

Хорошо, я понял. Но как правильно сделать это перенаправление?

Stephen Agwu 23.04.2018 14:34

наконец понял это

Stephen Agwu 23.04.2018 15:28
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
9
265
1

Ответы 1

Как прокомментировал CBroe, метод, который я использовал для вызова, был неправильным, так как его нельзя было выполнить ахаксиальным способом. В итоге я использовал тег привязки с атрибутом target=_blank с href, который указывал прямо на маршрут моего внутреннего паспорта facebook oauth. Так что-то вроде этого:

<a href = "http://localhost:3000/users/auth/facebook" target = "_blank" class = "loginBtn loginBtn-facebook">
    <span><img src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png"/></span>| Login with Facebook
</a>

Все работает сейчас

Другие вопросы по теме