cách tích hợp thông tin đăng nhập tên người dùng/mật khẩu thông thường với đăng nhập xã hội của bên thứ ba cho một ứng dụng web đơn khởi động Spring + Angular?

Question

Tôi có ứng dụng web trang đơn Angular + Spring. Máy chủ cũng hoạt động như một Máy chủ xác thực phát hành mã thông báo cho ứng dụng góc để sử dụng để thực hiện cuộc gọi API Restful.

Luồng đăng nhập cũ của tôi sử dụng lệnh gọi grant_type = password POST tới điểm cuối/oauth/token để nhận mã thông báo Bearer. Và tất cả các cuộc gọi API khác thay mặt cho người dùng sẽ bao gồm mã thông báo Bearer làm tiêu đề http "Ủy quyền".

Bây giờ tôi cần tích hợp đăng nhập xã hội (facebook, twitter, v.v.), có nghĩa là tôi không có tên người dùng/mật khẩu để tạo mã thông báo nên tôi không chắc chắn cách làm cho nó hoạt động.

Tôi đã sử dụng hai bài hướng dẫn sau đây là mẫu của tôi:

Spring Security and Angular JS

Spring Boot and OAuth

Trong ví dụ oauth-vani hướng dẫn đầu tiên, tên người dùng Passwork luồng đăng nhập sẽ xuất hiện trang uỷ quyền. Nhưng tôi muốn có trải nghiệm đăng nhập biểu mẫu tên người dùng/mật khẩu truyền thống (đăng nhập người dùng trực tiếp thay vì hiển thị trang ủy quyền). Trong hướng dẫn thứ hai, sau khi đăng nhập facebook, tôi muốn sử dụng id facebook để tra cứu cơ sở dữ liệu người dùng nội bộ của mình và tạo người dùng mới nếu không tồn tại và ghi lại người dùng đó với tư cách người dùng. Và sử dụng danh tính và quyền hạn của người dùng db nội bộ để cho phép các cuộc gọi API trong tương lai tới máy chủ API của tôi.

Tôi có một mẫu rút gọn ở tại https://github.com/dingquan/spring-angular-oauth

tôi có thể làm POST cuộc gọi đến/oauth/thẻ endpoint và sử dụng các dấu hiệu quay trở lại thực hiện cuộc gọi api hơn nữa để bảo vệ/api/blog endpoint của tôi. Nhưng tôi đã không tìm ra cách để làm những điều sau đây làm việc:

1. Tên đăng nhập/mật khẩu đăng nhập mà sẽ tạo ra một cookie phiên vì vậy tôi không cần phải gửi mã thông báo ủy quyền mang cho các cuộc gọi API trong tương lai cho điểm cuối tài nguyên

2. Sau khi đăng nhập facebook (liên kết đăng nhập facebook dưới dạng đăng nhập tên người dùng/mật khẩu), cuộc gọi đến điểm cuối của tôi vẫn không thành công với lỗi 401 (Tôi có nút "kiểm tra" để gọi điện/api)/blog, bạn có thể nhấp vào nó để xem hành vi). Vì vậy, những gì tôi thiếu để thực hiện cuộc gọi API thành công?

=== CẬP NHẬT ===

Chỉ cần làm rõ. Dưới đây là những mục tiêu tôi đang cố gắng để đạt được:

1. nhiều cách xác thực (truyền thống username/password, bên thứ ba oauth đăng nhập như facebook, có thể là số điện thoại di động + mã SMS trong tương lai)
2. chúng tôi làm cần mô hình người dùng của riêng chúng tôi được DB hỗ trợ để lưu trữ các thuộc tính người dùng khác, thông tin đăng nhập xã hội thuần túy là không đủ
3. thông tin đăng nhập xã hội cần được ẩn. Có nghĩa là người dùng không cần phải tạo tài khoản người dùng trong hệ thống của chúng tôi theo cách thủ công khi họ đăng nhập thông qua bên thứ 3 (facebook, v.v.). Chúng tôi không chỉ lấy dữ liệu hồ sơ xã hội của người dùng để điền trước biểu mẫu đăng ký.Chúng tôi muốn tự động tạo người dùng DB mới sau cảnh nếu không có người dùng db hiện tại nào được liên kết với tài khoản xã hội bên ngoài đã cho. tức là nếu người dùng đăng nhập qua facebook, họ không cần phải nhập tên người dùng/mật khẩu. Xác thực thông qua facebook sẽ tự động đăng nhập người dùng vào hệ thống của chúng tôi là tốt và người dùng sẽ có thể truy cập tài nguyên bị hạn chế sau khi đăng nhập facebook.

Có một số nhầm lẫn rằng tôi có thể yêu cầu mọi người đặt tên người dùng/mật khẩu facebook của họ vào biểu mẫu đăng nhập do ứng dụng của tôi lưu trữ và tôi sẽ đăng nhập facebook thay mặt người dùng. Đó không phải là những gì tôi đã yêu cầu.

Answer 1

Bạn không cần cấu hình phức tạp như vậy. Thêm @EnableOAuth2Sso vào số MainConfiguration của bạn và đặt thuộc tính ứng dụng thích hợp.

Đây là những gì tôi đã thực hiện để sử dụng Facebook làm máy chủ ủy quyền.

a) Xóa clientId và authServer từ UserServiceImpl. Nếu không, bạn sẽ bị buộc phải định cấu hình máy chủ ủy quyền không cần thiết.

b) Xóa hoàn toàn AuthorizationServerConfiguration.

c) Thêm @EnableWebSecurity và @EnableOAuth2Sso vào MainConfiguration.

d) Thay đổi MainConfiguration::configure để

http 
    .logout().logoutSuccessUrl("/").permitAll().and() 
    .authorizeRequests().antMatchers("/", "/login", "/home.html").permitAll() 
    .anyRequest().authenticated() 
    .and().csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse()); 

e) Xóa mọi thứ khác ngoại trừ lồng lớp AuthenticationSecurity từ MainConfiguration.

f) Thay đổi ResourceServerConfiguration::configure(HttpSecurity) để

http.antMatcher("/api/**").authorizeRequests().anyRequest().authenticated(); 

f) Remove thuộc tính tokenStore và phương pháp ResourceServerConfiguration::configure(ResourceServerSecurityConfigurer) từ ResourceServerConfiguration.

g) Xóa khối cấu hình security và facebook từ application.yml. Thay vào đó thêm này

security: 
    oauth2: 
    client: 
     client-id: <CLIENT_ID> 
     token-name: oauth_token 
     authentication-scheme: query 
     client-authentication-scheme: form 
     access-token-uri: https://graph.facebook.com/oauth/access_token 
     user-authorization-uri: https://www.facebook.com/dialog/oauth 
    resource: 
     user-info-uri: https://graph.facebook.com/me 
     client-id: <CLIENT_ID> 
     client-secret: <CLIENT_SECRET> 
     token-type: code 

h) Trong index.html thay đổi <a href="#/login">login</a>-<a href="/login">login</a>. i) Thay thế nội dung của hello.js bằng số one này.

Nhưng tôi muốn có trải nghiệm đăng nhập biểu mẫu tên người dùng/mật khẩu truyền thống (đăng nhập trực tiếp thay vì hiển thị trang ủy quyền).

Tôi sẽ không bao giờ sử dụng trang web yêu cầu thông tin xác thực của mình mà không chuyển hướng tôi đến nguồn gốc! Tôi không biết bạn và bạn đang bị nghi ngờ là một trang web lừa đảo. Bạn nên xem xét lại quyết định của mình.

Btw, tôi đã tạo yêu cầu kéo với những thay đổi này.