Xác thực với máy khách và máy chủ được tách riêng

Question

Tôi đã tạo ứng dụng web ở góc 2 cho phía máy khách và NodeJS với khung express cho phía máy chủ.

Đối với phía khách hàng, tôi đã tạo dự án với angular-cli chạy trên lite-server, vì vậy máy khách và máy chủ của tôi đang chạy trên 2 dịch vụ khác nhau.

Tôi muốn tích hợp xác thực ADFS. Để thực hiện xác thực, tôi đang sử dụng gói passport-saml. Có một phần mềm trung gian ở phía máy chủ API yêu cầu người dùng xác thực.

Quy trình xác thực hoạt động tốt khi tiếp cận trực tiếp với máy chủ (không có ứng dụng khách).

Tuy nhiên, tôi không truy cập được API thông qua @angular/http. Tôi đã thử một yêu cầu GET đơn giản từ máy chủ (với phần mềm trung gian ở điểm cuối) và kết quả là tôi nhận được trang xác thực mà không cần chuyển hướng (tôi không nghĩ đó là vấn đề cốt lõi, nhưng triển khai thực tế).

Tôi nên triển khai đúng cách xác thực khi sử dụng các dịch vụ riêng cho máy chủ và máy khách như thế nào?

Answer 1

Bạn không đưa ra nhiều chi tiết về phản ứng không thành công khi khách hàng thực hiện GET với máy chủ. Có phải là 400? 401? 404? 500? bạn đã nhận được một lỗi CORS?

Tại sao bạn sử dụng GET cho điểm cuối đăng nhập của mình. Bạn phải đăng thông tin đăng nhập ngay trong tải trọng POST?

Dù sao, trong mã angular2 của bạn, bạn phải có dịch vụ xác thực bằng phương thức đăng nhập. Các phương pháp đăng nhập nên làm một cái gì đó giống như ..

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

sau đó bạn có thể đăng ký để trở Quan sát theo phương pháp đăng nhập và nếu tất cả là tốt router.navigate vào trang chủ hoặc nếu nó đã không đi cũng hiển thị thông báo lỗi đăng nhập.

Answer 2

Xin chào, tôi cũng đang đối mặt với cùng một vấn đề mà dự án góc cạnh của tôi đã được lưu trữ trên cổng 4200. và nút của tôi trên cổng 3000. Khó thực hiện hộ chiếu khi chúng tôi có 2 cổng đang hoạt động.

bước 1 làm cho dự án góc tĩnh bằng cách thực hiện xây dựng thư mục công khai. đảm bảo angular-cli.json có *"outDir": "../public",*

bước 2 Bây giờ chúng ta có thể sử dụng cổng cùng một nút để truy cập rễ góc xin vui lòng thêm bên dưới mã trong nút của bạn 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')); 
}); 

này sẽ cho phép dự án góc của bạn truy cập thông qua cổng nút.

bước 3: Bây giờ chúng ta có thể thêm nút đăng nhập hộ chiếu trong UI và cung cấp cho các url <a href="/passport/auth/twitter">twitter</a>

Đây không phải là phương tiện giải thích cảm giác hỏi tôi những nghi ngờ.

Answer 3

Đặt url riêng cho ui và máy chủ trong ..src/môi trường/environment.ts

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

Trong nút app.js

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