Demo

索引.html

<script type="text/javascript">    $.get("/user", function(data) {        $("#user").html(data.name);        $(".unauthenticated").hide()        $(".authenticated").show()    });</script>

請注意，此 JavaScript 需要調用服務器端端點。??/user??

端點??/user??

現在，您將添加剛才提到的服務器端終結點，調用它。它將發回當前登錄的用戶，我們可以在主類中輕松完成此操作：??/user??

社交應用.java

@SpringBootApplication@RestControllerpublic class SocialApplication {    @GetMapping("/user")    public Map user(@AuthenticationPrincipal OAuth2User principal) {        return Collections.singletonMap("name", principal.getAttribute("name"));    }    public static void main(String[] args) {        SpringApplication.run(SocialApplication.class, args);    }}

請注意 、 和注入到處理程序方法中的用法。??@RestController????@GetMapping????OAuth2User??

公開主頁

您需要進行最后一項更改。

此應用程序現在可以正常工作并像以前一樣進行身份驗證，但它仍然會在顯示頁面之前重定向。為了使鏈接可見，我們還需要通過擴展來關閉主頁上的安全性：??WebSecurityConfigurerAdapter??

社交應用

@SpringBootApplication@RestControllerpublic class SocialApplication extends WebSecurityConfigurerAdapter {    // ...    @Override    protected void configure(HttpSecurity http) throws Exception {        // @formatter:off        http            .authorizeRequests(a -> a                .antMatchers("/", "/error", "/webjars/**").permitAll()                .anyRequest().authenticated()            )            .exceptionHandling(e -> e                .authenticationEntryPoint(new HttpStatusEntryPoint(HttpStatus.UNAUTHORIZED))            )            .oauth2Login();        // @formatter:on    }}

Spring Boot 對 a 附加了特殊含義，該類的注釋為 ： 它使用它來配置攜帶 OAuth 2.0 身份驗證處理器的安全過濾器鏈。??WebSecurityConfigurerAdapter????@SpringBootApplication??

上述配置指示允許的端點的白名單，其他每個端點都需要身份驗證。

您希望允許：

但是，您不會在此配置中看到任何有關此配置的內容。所有內容（包括）都保持安全，除非由于最后的配置而指明。??/user????/user????.anyRequest().authenticated()??

最后，由于我們通過 Ajax 與后端接口，因此我們希望將端點配置為使用 401 響應，而不是重定向到登錄頁面的默認行為。配置為我們實現了這一目標。??authenticationEntryPoint??

完成這些更改后，應用程序就完成了，如果您運行它并訪問主頁，您應該會看到一個樣式精美的 HTML 鏈接，指向“使用 GitHub 登錄”。該鏈接不會將您直接帶到 GitHub，而是轉到處理身份驗證（并將重定向發送到 GitHub）的本地路徑。進行身份驗證后，您將被重定向回本地應用程序，它現在顯示您的姓名（假設您已在 GitHub 中設置權限以允許訪問該數據）。

添加注銷按鈕

在本節中，我們將修改點擊我們通過添加一個允許用戶注銷應用程序的按鈕來構建應用程序。這似乎是一個簡單的功能，但它需要一點小心來實現，所以值得花一些時間討論如何做到這一點。大多數更改都與以下事實有關：我們正在將應用程序從只讀資源轉換為讀寫資源（注銷需要更改狀態），因此在任何不僅僅是靜態內容的實際應用程序中都需要相同的更改。

客戶端更改

在客戶端上，我們只需要提供一個注銷按鈕和一些 JavaScript 來回調服務器以請求取消身份驗證。首先，在 UI 的“經過身份驗證”部分，我們添加按鈕：

索引.html

  Logged in as:   
    Logout  

然后我們提供它在 JavaScript 中引用的函數：??logout()??

索引.html

var logout = function() {    $.post("/logout", function() {        $("#user").html("");        $(".unauthenticated").show();        $(".authenticated").hide();    })    return true;}

該函數執行 POST 操作，然后清除動態內容。現在我們可以切換到服務器端來實現該端點。??logout()????/logout??

添加注銷端點

Spring 安全性內置了對端點的支持，該端點將為我們做正確的事情（清除會話并使 cookie 無效）。要配置端點，我們只需擴展以下中的現有方法：??/logout????configure()????WebSecurityConfigurerAdapter??

社交應用.java

@Overrideprotected void configure(HttpSecurity http) throws Exception {    // @formatter:off    http        // ... existing code here        .logout(l -> l            .logoutSuccessUrl("/").permitAll()        )        // ... existing code here    // @formatter:on}

端點要求我們向其 POST 并保護用戶免受跨站點請求偽造（CSRF，發音為“海上沖浪”）的侵害，它需要將令牌包含在請求中。令牌的值鏈接到當前會話，這是提供保護的原因，因此我們需要一種方法將這些數據放入我們的 JavaScript 應用程序中。??/logout??

許多JavaScript框架都內置了對CSRF的支持（例如，在Angular中，他們稱之為XSRF），但它的實現方式通常與Spring Security的開箱即用行為略有不同。例如，在Angular中，前端希望服務器向它發送一個名為“XSRF-TOKEN”的cookie，如果它看到這一點，它將把值作為名為“X-XSRF-TOKEN”的標頭發送回去。我們可以用簡單的jQuery客戶端實現相同的行為，然后服務器端的更改將與其他前端實現一起工作，沒有或很少的更改。為了向 Spring Security 傳授這一點，我們需要添加一個創建 cookie 的過濾器。

在我們執行以下操作：??WebSecurityConfigurerAdapter??

社交應用.java

@Overrideprotected void configure(HttpSecurity http) throws Exception {    // @formatter:off    http        // ... existing code here        .csrf(c -> c            .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())        )        // ... existing code here    // @formatter:on}

在客戶端中添加 CSRF 令牌

由于此示例中我們沒有使用更高級別的框架，因此您需要顯式添加 CSRF 令牌，您剛剛將其作為后端的 cookie 提供。為了使代碼更簡單一些，請包含庫：??js-cookie??

絨球.xml

    org.webjars    js-cookie    2.1.0

然后，您可以在 HTML 中引用它：

索引.html

<script type="text/javascript" src="/webjars/js-cookie/js.cookie.js"></script>

最后，您可以在 XHR 中使用方便的方法：??Cookies??

索引.html

$.ajaxSetup({  beforeSend : function(xhr, settings) {    if (settings.type == "POST" || settings.type == "PUT"        || settings.type == "DELETE") {      if (!(/^http:.*/.test(settings.url) || /^https:.*/        .test(settings.url))) {        // Only send the token to relative URLs i.e. locally.        xhr.setRequestHeader("X-XSRF-TOKEN",          Cookies.get("XSRF-TOKEN"));      }    }  }});

準備滾動！

完成這些更改后，我們已準備好運行應用程序并嘗試新的注銷按鈕。啟動應用并在新的瀏覽器窗口中加載主頁。單擊“登錄”鏈接將您帶到GitHub（如果您已經登錄，則可能不會注意到重定向）。單擊“注銷”按鈕以取消當前會話并將應用程序返回到未經身份驗證的狀態。如果您好奇，您應該能夠在瀏覽器與本地服務器交換的請求中看到新的 cookie 和標頭。

請記住，現在注銷端點正在與瀏覽器客戶端一起使用，然后所有其他HTTP請求（POST，PUT，DELETE等）也將正常工作。因此，對于具有一些更現實功能的應用程序來說，這應該是一個很好的平臺。

使用 GitHub 登錄

在本部分中，您將修改注銷您已經構建的應用程序，添加貼紙頁面，以便最終用戶可以在多組憑據之間進行選擇。

讓我們將Google添加為最終用戶的第二個選項。

初始設置

要使用 Google 的 OAuth 2.0 身份驗證系統進行登錄，您必須在 Google API 控制臺中設置一個項目以獲取 OAuth 2.0 憑據。

按照OpenID Connect頁面，從“設置 OAuth 2.0”部分開始。

完成“獲取 OAuth 2.0 憑據”說明后，您應該有一個新的 OAuth 客戶端，其憑據由客戶端 ID 和客戶端密鑰組成。

設置重定向 URI

此外，還需要提供重定向 URI，就像之前為 GitHub 所做的那樣。

在“設置重定向 URI”子部分中，確保“授權的重定向 URI”字段設置為 。??http://localhost:8080/login/oauth2/code/google??

添加客戶端注冊

然后，您需要將客戶端配置為指向谷歌。由于 Spring Security 是在考慮多個客戶端的情況下構建的，因此您可以將我們的 Google 憑據添加到您為 GitHub 創建的憑據旁邊：

應用程序.yml

spring:  security:    oauth2:      client:        registration:          github:            clientId: github-client-id            clientSecret: github-client-secret          google:            client-id: google-client-id            client-secret: google-client-secret

如您所見，Google是Spring Security提供開箱即用支持的另一個提供商。

添加登錄鏈接

在客戶端中，更改是微不足道的 - 您只需添加另一個鏈接：

索引.html

  
    With GitHub: click here  
  
    With Google: click here  

如何添加本地用戶數據庫

許多應用程序需要在本地保存有關其用戶的數據，即使身份驗證委托給外部提供程序也是如此。我們不在這里顯示代碼，但很容易通過兩個步驟完成。

提示：在對象中添加一個字段以鏈接到外部提供程序中的唯一標識符（不是用戶名，而是外部提供程序中帳戶的唯一名稱）。??User??

為未經身份驗證的用戶添加錯誤頁面

在本部分中，您將修改兩個提供商之前構建的應用，用于向無法進行身份驗證的用戶提供一些反饋。同時，您將擴展身份驗證邏輯以包含僅允許屬于特定 GitHub 組織的用戶的規則。“組織”是GitHub特定領域的概念，但可以為其他提供商設計類似的規則。例如，對于 Google，您可能只想對來自特定網域的用戶進行身份驗證。

切換到 GitHub

這兩個提供商示例使用 GitHub 作為 OAuth 2.0 提供程序：

應用程序.yml

spring:  security:    oauth2:      client:        registration:          github:            client-id: bd1c0a783ccdd1c9b9e4            client-secret: 1a9030fbca47a5b2c28e92f19050bb77824b5ad1          # ...

檢測客戶端中的身份驗證失敗

在客戶端上，您可能希望為無法進行身份驗證的用戶提供一些反饋。為了促進這一點，您可以添加一個 div，您最終將向其添加一條信息性消息。

索引.html

然后，添加對終結點的調用，并用結果填充 ：??/error????

$.get("/error", function(data) {    if (data) {        $(".error").html(data);    } else {        $(".error").html("");    }});

protected void configure(HttpSecurity http) throws Exception {  // @formatter:off  http      // ... existing configuration      .oauth2Login(o -> o            .failureHandler((request, response, exception) -> {          request.getSession().setAttribute("error.message", exception.getMessage());          handler.onAuthenticationFailure(request, response, exception);            })        );}

@GetMapping("/error")public String error(HttpServletRequest request) {  String message = (String) request.getSession().getAttribute("error.message");  request.getSession().removeAttribute("error.message");  return message;}

@Beanpublic OAuth2UserService oauth2UserService(WebClient rest) {    DefaultOAuth2UserService delegate = new DefaultOAuth2UserService();    return request -> {        OAuth2User user = delegate.loadUser(request);        if (!"github".equals(request.getClientRegistration().getRegistrationId())) {            return user;        }        OAuth2AuthorizedClient client = new OAuth2AuthorizedClient                (request.getClientRegistration(), user.getName(), request.getAccessToken());        String url = user.getAttribute("organizations_url");        List> orgs = rest                .get().uri(url)                .attributes(oauth2AuthorizedClient(client))                .retrieve()                .bodyToMono(List.class)                .block();        if (orgs.stream().anyMatch(org -> "spring-projects".equals(org.get("login")))) {            return user;        }        throw new OAuth2AuthenticationException(new OAuth2Error("invalid_token", "Not in Spring Team", ""));    };}

@Beanpublic WebClient rest(ClientRegistrationRepository clients, OAuth2AuthorizedClientRepository authz) {    ServletOAuth2AuthorizedClientExchangeFilterFunction oauth2 =            new ServletOAuth2AuthorizedClientExchangeFilterFunction(clients, authz);    return WebClient.builder()            .filter(oauth2).build();}