Как я могу реализовать аутентификацию facebook в приложении MEAN, предотвращающем проблемы CORS?

Question

Я реализую приложение, использующее полный стек MEAN. Я создал страницу входа в систему, чтобы зарегистрироваться на facebook, чтобы показывать страницу профиля. Но я обнаружил некоторые проблемы. По этой причине я создал небольшую версию моего webapp, поддерживая ту же структуру проекта. Полный код, исполняемый (только заменив «идентификатор клиента» и «секретно») с «НПМ установки» и после «nodemon» доступен здесь: https://github.com/Ks89/MEAN-OAuth_Example

Если я позвоню (с браузером) на API отдыха что я создал для входа в facebook на «http://localhost:3000/api/auth/facebook», все будет хорошо! Но если я хочу сделать то же самое, нажав на кнопку «Вход», я получаю ошибку, как на рисунке:

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

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

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

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

Answer 1

Примеры маршрутов из ретрансляции passport-facebook предназначены для многостраничных приложений, а не для ajax-запросов. Если вы посмотрите, что делают эти маршруты, /auth/facebook - это просто перенаправление на Facebook, где ожидается, что пользователь войдет в систему, если это необходимо, и авторизуйте ваше приложение. Когда вы делаете тот же запрос из углового, он следует перенаправлению и пытается загрузить страницу Facebook, но браузер блокирует вас, как показывает скриншот на консоли. CORS будет актуальным, если Facebook захочет позволить вам запросить свою регистрационную форму по всему происхождению, но они не потому, что это в основном сделает вас фишером.

Похоже, вы пытаетесь справиться аутентификации, не покидая страницу, но в какой-то момент вы будете нуждаться пользователю покинуть свой сайт и быть перенаправлены на Facebook для того, чтобы завершить OAuth. Вы можете открыть всплывающее окно, содержащее диалог OAuth Facebook (похоже, что это делает SDK для Facebook по умолчанию) или просто используйте текущую вкладку вашего приложения с чем-то простым, как <a ng-href="{{facebookOauthUrl}}">Log in with Facebook</a>.