Аутентификация с разделенным клиентом и сервером

Question

Я создал веб-приложение в угловом 2 для клиентской стороны и NodeJS с фреймворком express для серверной части.

Для клиентской стороны я сгенерировал проект с angular-cli, который работает на lite-server, поэтому мой клиент и сервер работают на двух разных сервисах.

Я хочу интегрировать аутентификацию ADFS. Чтобы реализовать аутентификацию, я использую пакет passport-saml. На моей серверной стороне есть промежуточное ПО API, для которого требуется аутентификация пользователя.

Процесс аутентификации отлично работает при непосредственном доступе к серверу (без клиента).

Однако я не могу получить доступ к API через @angular/http. Я пробовал простой запрос GET с сервера (с промежуточным программным обеспечением в конечной точке), и в результате я получаю страницу аутентификации без перенаправления (я не думаю, что это основная проблема, но фактическая реализация).

Как правильно реализовать аутентификацию при использовании отдельных служб для сервера и клиента?

Answer 1

Вы не даете подробностей о том, что произошло с отказом, когда клиент выполнил GET на сервере. Было ли это 400? 401? 404? 500? вы получили ошибку CORS?

Почему вы используете GET для своей конечной точки входа. Вы должны быть учетной записью POSTing прямо в полезной нагрузке POST?

В любом случае, в вашем угловом коде 2 вы должны иметь авторизованную службу с методом входа в систему. Метод Логин должен сделать что-то вроде ..

login(credentials) { 
    return http.post(your_server_url, payload); 
} 

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

Answer 2

Привет, Я тоже столкнулся с той же проблемой, что и мой угловой проект, размещенный на порте 4200. и мой узел на 3000 портах. Сложно реализовать паспорт, когда у нас есть 2 порта.

Этап 1 Сделать угловой проект статическим, выполнив ng build в общую папку. убедитесь, что angular-cli.json имеет *"outDir": "../public",*

шаг 2 Теперь мы можем использовать тот же самый порт узла для доступа угловых корней добавьте ниже коды в узле app.js

var path = require('path'); 
    // Set Static Folder 
app.use(express.static(path.join(__dirname, 'public'))); 
app.get('*', function(req, res) { 
    res.sendFile(path.join(__dirname, 'public/index.html')); 
}); 

Это позволит вашему угловому проекту доступен через порт узла.

шаг 3: Теперь мы можем добавить кнопку паспорта для входа в интерфейс и дать URL-адрес <a href="/passport/auth/twitter">twitter</a>

это не пояснительные средства чувствовать спросить меня сомнения.

Answer 3

Установить отдельные адреса для интерфейса и сервера в ..src/сред/environment.ts

export const environment = { 
    production: false, 
    BASE_URL: 'http://localhost:4200', 
    API_BASE_URL: 'http://localhost:5000', 
}; 

В узле app.js

app.use('/', express.static('public')); 
    app.get('*', function (req, res) { 
    res.sendFile(path.join(process.cwd(), 'public', 'index.html')); 
    });