使用Spring Boot和Angular 2 CLI的Google OAuth2身份驗證

Question

我需要將社交登錄集成到我的Web應用程序中。 我將Spring Boot用於后端，將Angular 2作為前端技術。 我按照本教程設置了我的項目。

這可以完美地工作，並且Spring Boot在http：/ localhost：8080上運行，而Angular 2在http：/ localhost：4200上運行。 這樣做的原因是，我將Angular-cli用於實時重載開發服務器功能。

由於使用跨源策略，因此角度項目需要使用代理。 如上一教程中所述，您需要配置proxy.conf.json文件：

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

如果執行此操作，則可以按照以下方式訪問Spring API：例如http：/// localhost：4200 / api / users（每個“ / api”請求都將轉發到Spring服務器）。

以上所有內容均正常運行。 現在，我需要將Oauth2與Google登錄一起使用。 我試過很多教程喜歡這個人，但我似乎無法管理工作這一點。

如果我嘗試實現這一點並導航到http：/ localhost：8080（從Spring Boot地址），我將重定向到google登錄頁面，但是當嘗試相同的操作時，例如http：/ localhost：4200 / api / authenticate i只是總是立即重定向到http：/ localhost：4200 / login，而無需將我重定向到登錄頁面。

我在網上看起來很不錯，但似乎找不到這個特殊問題。 有人可以幫助我了解我在做什么或者我在做錯什么，也許有人可以提供示例代碼，那就太好了！

Answer 1

我找到了解決問題的方法。 首先，我有一個帶有“ href = / api / authenticate”的登錄鏈接，但這沒有用！

注意：@ EnableOAuth2Sso標准可保護服務器上的每條路徑，因此您只需要在經過安全保護的路徑上訪問API，即可將其重定向到登錄頁面。

由於某種原因，http：/ 4200 / api / authenticate什么也沒做，只是立即將我重定向到http：/ 4200 / login（我猜這必須是@ EnableOAuth2Sso的標准行為，如果身份驗證失敗或您未通過身份驗證？）

所以我將href更改為“ href = http：/ localhost：8080 / api / authenticate”。 這可以正常運行，並將我重定向到google登錄頁面。

我遇到的另一個問題是重定向URL。 我嘗試將重定向URL直接設置為'http：/ localhost：4200 / profile，以在登錄到用戶個人資料后進行導航，但是由於某些更奇怪的原因，此操作仍然無效。

經過一些測試，我發現您需要先重定向回您的api域（不知道為什么）。

因此，我將重定向URL設置為http：/ localhost：8080 / callback，然后在其中我重定向到端口4200上的配置文件頁面。

@GetMapping("/callback")
void redirect(HttpServletResponse response) throws IOException {
    response.sendRedirect("http://localhost:4200/profile");
}

搜索並測試了很長的路后，我覺得這在任何地方都沒有記錄。

Answer 2

抱歉，如果我在這個答案中有誤，因為這是一段時間之前的事，我記不清了。 但是我有一個登錄按鈕，如下面的代碼片段所示：

<a href="http://localhost:8080/api/login" class="btn loginBtn loginBtn-google">Login with Google</a>

有了@ EnableOAuth2Sso后，每個路徑都將通過OAuth2身份驗證自動保護。 因此，當您單擊登錄按鈕時，您將自動進入google auth頁面。

當您成功進行身份驗證時，我重定向到以下代碼：

@GetMapping("/api/login")
public void login(HttpServletResponse response) throws IOException {
    response.sendRedirect("http://localhost:4200/profile");
}

正如我在第一個答案中解釋的那樣，出於某種奇怪的原因，回調到Spring域而不是前端域是必要的。 如上面的代碼所示，然后重定向正確的forendend頁面。

（隨着時間的流逝，如果您想知道的話，我更改了路徑的名稱，但這應該可行）