如何為Spring Boot + Angular單頁Web應用程序將常規用戶名/密碼登錄與第三方社交登錄集成？

Question

我有一個Angular + Spring啟動單頁Web應用程序。 該服務器還充當Auth Server的角色，為Angular應用發布令牌以進行Restful API調用。

我的舊登錄流程使用對/ oauth / token端點的grant_type = password POST調用來獲取Bearer令牌。 代表用戶的所有其他API調用將包括Bearer令牌作為“ Authorization” http標頭。

現在，我需要集成社交登錄名（facebook，twitter等），這意味着我沒有用戶名/密碼來生成令牌，因此我不確定如何使其工作。

我一直使用以下兩個教程作為模板：

Spring Security和Angular JS

Spring Boot和OAuth

在第一個教程的oauth-vanilla示例中，用戶名密碼登錄流程打開了授權頁面。 但我想擁有傳統的用戶名/密碼表單登錄體驗（直接登錄用戶而不顯示“授權”頁面）。

在第二個教程中，在facebook登錄后，我想使用facebook id查找我的內部用戶數據庫，並創建一個不存在的新用戶，然后以該用戶身份登錄。 並使用內部數據庫用戶的身份和權限來授權將來對我的API服務器的API調用。

我在https://github.com/dingquan/spring-angular-oauth上有一個簡化的示例

我可以對/ oauth / token端點進行POST調用，並使用返回的令牌對受保護的/ api / blogs端點進行進一步的api調用。 但是我還沒有弄清楚如何使以下事情起作用：

1. 用戶名/密碼登錄，它將創建一個會話cookie，因此我不需要將授權承載令牌發送給將來的API調用到資源端點

2. facebook登錄后（facebook登錄鏈接位於用戶名/密碼登錄表單下），對我的端點的調用仍然失敗，並顯示401錯誤（我有一個“測試”按鈕，它使/ api / blogs進行了調用，您可以單擊查看行為）。 那么，我錯過了什么使API調用成功？

===更新===

只是為了澄清。 這是我要實現的目標：

1. 多種身份驗證方式（傳統的用戶名/密碼，第三方oauth登錄（例如facebook），將來可能的手機號碼和SMS代碼）
2. 我們確實需要數據庫支持的自己的用戶模型來存儲其他用戶屬性，僅純社交登錄是不夠的
3. 社交登錄名必須是隱式的。 意味着一旦用戶通過第三者（facebook等）登錄，就不需要用戶在我們的系統中手動創建用戶帳戶。 我們不只是獲取用戶的社交資料數據來預先填充注冊表格。 如果沒有現有的數據庫用戶與給定的外部社交帳戶相關聯，我們希望在后台自動創建新的數據庫用戶。 即，如果用戶通過Facebook登錄，則無需輸入用戶名/密碼。 通過facebook進行身份驗證也會自動將用戶登錄到我們的系統，並且用戶在facebook登錄后應該能夠訪問受限資源。

我可能會要求人們將他們的Facebook用戶名/密碼放入由我的應用托管的登錄表單中，這會讓我感到困惑，我將代表用戶登錄。 那不是我要的。

Answer 1

您不需要如此復雜的配置。 將@EnableOAuth2Sso添加到您的MainConfiguration並設置適當的應用程序屬性。

這是我為了將Facebook用作授權服務器所做的工作。

a）從UserServiceImpl刪除clientId和authServer 。 否則，您將被迫配置不需要的授權服務器。

b）完全刪除AuthorizationServerConfiguration 。

c）將@EnableWebSecurity和@EnableOAuth2Sso添加到您的MainConfiguration 。

d）將 MainConfiguration::configure更改為

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

e）從MainConfiguration刪除除嵌套類AuthenticationSecurity之外的所有其他MainConfiguration 。

f）將 ResourceServerConfiguration::configure(HttpSecurity)更改為

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

F）刪除屬性tokenStore和方法ResourceServerConfiguration::configure(ResourceServerSecurityConfigurer)從ResourceServerConfiguration 。

g）從application.yml刪除配置塊security和facebook 。 而是添加這個

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）在index.html將<a href="#/login">login</a>更改為<a href="/login">login</a> 。 我）更換的內容hello.js與此一個 。

但我想擁有傳統的用戶名/密碼表單登錄體驗（直接登錄用戶而不顯示“授權”頁面）。

如果沒有將我重定向到原始站點，我將永遠不會使用需要我的憑據的網站！ 我不認識您，您也被懷疑是網絡釣魚網站。 您應該重新考慮您的決定。

順便說一句，我通過這些更改創建了一個請求請求。