2013-02-09 19 views
57

Tôi mới với angularjs ...Làm thế nào để đạt được một hệ thống xác thực an toàn (!) Trong ứng dụng angularjs?

Tôi đã đọc tài liệu và hoàn thành hướng dẫn; tôi cũng đã cố gắng một cái gì đó khác của bản thân mình, và mọi thứ bắt đầu có ý nghĩa với tôi.

Bây giờ tôi tự hỏi làm thế nào để thực hiện một hệ thống xác thực an toàn .

Phần dễ dàng: không có mã số, tôi sẽ mô tả các hoạt động mã của tôi thực hiện:

Tôi đã là một hình thức cổ điển: username và nhập văn bản mật khẩu.

Người dùng điền vào biểu mẫu và nhấn ENTER.

Yêu cầu ajax bắt đầu và phản hồi là JSON cho tôi biết điều gì đó như "ok tôi biết bạn" hoặc "tôi không biết bạn là ai".

Điều tôi cần bây giờ là duy trì trạng thái đăng nhập của khách truy cập (hoặc không đăng nhập) giữa các chế độ xem khác nhau của đơn đăng ký của tôi.

Tôi đọc trên internet rằng, để đạt được mục tiêu này, ai đó đặt biến ($ scope.isLogged = true), người khác sử dụng cookie; nhưng các biến javascript và cookie có thể dễ dàng được chỉnh sửa bằng firebug hoặc các công cụ phát triển tương tự.

... và cuối cùng là câu hỏi:

Vì vậy, có cho bạn một số gợi ý để đạt được một hệ thống xác thực an toàn trong một ứng dụng angularjs?

Trả lời

54

Bạn không thể ủy quyền cho bất cứ điều gì trong angularjs, vì người sử dụng có controll đầy đủ của môi trường thực thi (cụ thể là trình duyệt). Mỗi kiểm tra, trường hợp, nếu - bất cứ điều gì bạn có thể nghĩ đến - có thể bị giả mạo. Có các thư viện javascript sử dụng các phím bất đối xứng để thực hiện mã hóa cục bộ để lưu trữ dữ liệu cục bộ một cách an toàn, nhưng thực ra chúng không phải là những gì bạn đang tìm kiếm.

Bạn có thể, và bạn nên, cho phép mọi thứ trên máy chủ - cách tiêu chuẩn bạn sẽ làm điều đó trong một phiên ứng dụng thông thường - sử dụng phiên; không có mã đặc biệt nào là cần thiết, các cuộc gọi ajax sử dụng các cookie phiên bình thường. Ứng dụng không cần biết liệu nó có được xác thực hay không. Nó chỉ cần kiểm tra xem máy chủ nghĩ gì.

Từ quan điểm của ứng dụng angularjs của bạn, bị "đăng nhập" hoặc "đăng xuất" chỉ là một gợi ý gui cho người dùng.

+15

+1, đặc biệt là đối với "Từ quan điểm của ứng dụng angularjs của bạn, bị" đăng nhập "hoặc" đăng xuất "chỉ là gợi ý gui cho người dùng." Nếu người dùng muốn giả mạo môi trường thực thi của họ, thì Angular cho rằng họ đã đăng nhập, do đó, miễn là máy chủ vẫn xác thực bất kỳ hành động nào thay đổi dữ liệu thực tế, v.v. –

+0

Xin chào, cảm ơn. Tôi quan tâm đến câu trả lời của bạn. Đặc biệt trong phần mà bạn đề cập đến phiên, bởi vì đó là cách truyền thống tôi đã làm việc ... tôi sử dụng PHP làm ngôn ngữ phía máy chủ ... chỉ là một câu hỏi khác (tôi không phải là lúc để thử nó ngay bây giờ, nhưng tôi sẽ làm asap [indipendently từ câu trả lời của bạn, tôi hứa :)]): nếu trong một yêu cầu ajax một tập hợp một phiên, sau đó phiên này vẫn còn có sẵn trong các yêu cầu tiếp theo, phải không? – Bruno

+0

@Bruno: vâng. "phiên" chỉ là một từ khác cho "cookie có số nhận dạng" và vì yêu cầu ajax chia sẻ cookie với các yêu cầu bình thường (và mỗi phiên), thì phía máy chủ của bạn sẽ hoạt động. – fdreger

4

Trước hết: Dữ liệu phía máy khách luôn có thể bị thao túng hoặc giả mạo.

Miễn là ID phiên hợp lệ không dễ đoán và các biện pháp như liên kết mã thông báo phiên với IP của khách hàng thì không có vấn đề gì lớn về nó.

Bạn có thể, theo lý thuyết, cũng mã hóa cookie, miễn là bạn làm như vậy ở phía máy chủ.

Để biết chi tiết về làm thế nào để mã hóa các tập tin cookie bạn, hãy xem các tài liệu của server-side của bạn (ví dụ http://expressjs.com/api.html#res.cookie cho Express.js)

+0

Trước hết, cảm ơn bạn đã trả lời! Tiến hành như bạn đề nghị, mỗi lần xem thay đổi, tôi đã thực hiện yêu cầu ajax để kiểm tra xem khóa phiên được lưu trữ trong biến/cookie có được tạo cùng lúc tại thời điểm xác thực không ... tôi có đúng không? hoặc tôi đang thiếu một số mảnh? – Bruno

+7

Về cơ bản, đối với mỗi yêu cầu HTTP cần người dùng được xác thực, máy chủ sẽ kiểm tra khóa phiên khi yêu cầu đến. Sau đó, nếu khoá phiên không đúng, máy chủ có thể gửi lại '401 không được ủy quyền' thay vì dữ liệu mà khách hàng muốn. –

47

Có thể bạn đã tìm được giải pháp, nhưng hiện tại tôi đã tạo ra một chương trình xác thực đang triển khai trong Ứng dụng góc của tôi.

Bật .run ứng dụng được đăng ký với một ActiveSession được đặt thành false. Sau đó, nó sẽ kiểm tra xem trình duyệt có cookie có mã thông báo và userId không.

Nếu CÓ, kiểm tra + userId thẻ trên máy chủ và cập nhật các dấu hiệu trên cả hai máy chủ và địa phương (token đó là một máy chủ tạo ra chìa khóa duy nhất cho mỗi người dùng)

Nếu KHÔNG chương trình vào ô đăng nhập, kiểm tra thông tin và một lần nữa nếu họ có hiệu lực không yêu cầu máy chủ t nhận mã thông báo mới và lưu cục bộ.

Mã thông báo được sử dụng để đăng nhập liên tục (nhớ tôi trong 3 tuần) hoặc khi người dùng làm mới trang trình duyệt.

Cảm ơn bạn

Authentication Scheme in Angular.js

+73

+1 để sử dụng giấy – Lee

+2

+1 từ tôi nữa, một bức ảnh có giá trị 1000 từ :) – BetaCoder

+1

cộng một cho việc đặt câu hỏi nghiêm túc ngay cả khi nó đến từ người bạn không biết – Adnan

18

đã trôi qua 3 tháng kể từ khi tôi hỏi câu hỏi này ... và bây giờ tôi muốn chia sẻ những gì đã trở thành phương pháp ưa thích của tôi khi tôi đã để đối phó với xác thực người dùng trong một ứng dụng web được xây dựng trên angularjs.

Tất nhiên câu trả lời fdreger vẫn là một câu trả lời tuyệt vời ...

Bạn không thể ủy quyền cho bất cứ điều gì trong angularjs, vì người sử dụng có đầy đủ controll của môi trường thực thi (cụ thể là, các trình duyệt).

Từ quan điểm của ứng dụng angularjs của bạn, bị "đăng nhập" hoặc "đăng xuất" chỉ là một gợi ý gui cho người dùng.

Vì vậy, một thời gian ngắn tiếp cận của tôi bao gồm trong:

1) ràng buộc cho mỗi tuyến đường thêm thông tin về các tuyến đường riêng của mình.

$routeProvider.when('/login', { 
    templateUrl: 'partials/login.html', controller: 'loginCtrl', isFree: true 
}); 

2) sử dụng dịch vụ để mantain dữ liệu về người dùng, và tình trạng thẩm định của mình.

services.factory('User', [function() { 
    return { 
     isLogged: false, 
     username: '' 
    }; 
}]); 

3) mọi người dùng cố gắng truy cập vào một con đường mới, kiểm tra xem anh ấy có việc cấp truy cập.

$root.$on('$routeChangeStart', function(event, currRoute, prevRoute){ 
    // prevRoute.isFree tell me if this route is available for all the users, or only for registered user. 
    // User.isLogged tell me if the user is logged 
}) 

Tôi cũng đã viết về phương pháp này (chi tiết hơn) trên blog của tôi, users authentication with angularjs.

0

Bạn cần tìm hiểu về phía máy chủ/cuối cơ sở dữ liệu của nó.

Thông tin đăng nhập của người dùng cần được lưu trữ ở đâu đó - 99,9% thời gian trong cơ sở dữ liệu phía máy chủ.

Lý tưởng cho một hệ thống thực sự an toàn bạn muốn hệ thống thành viên phụ trợ lưu trữ phiên trong bảng cơ sở dữ liệu có liên quan đến bảng thành viên chứa mật khẩu được mã hóa, đồng thời cung cấp giao diện RESTful. xây dựng các cuộc gọi api của bạn.

Một tập lệnh mà tôi đã sử dụng thành công rất nhiều là Amember https://www.amember.com/. Đó là một cách thực sự hiệu quả để đi mặc dù có rất nhiều kịch bản khác trên mạng, tôi đã có rất nhiều thành công với phiên bản này. Nó cũng là PHP để bạn có thể xây dựng một API cho các cuộc gọi http góc thực sự của mình dễ dàng.

Tất cả các khung javascript này đều tuyệt vời nhưng hiệu quả là bây giờ quá nhiều đang tập trung quá nhiều vào giao diện người dùng - tìm hiểu cơ sở dữ liệu/chương trình phụ trợ! :-)