使用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页面。

（随着时间的流逝，如果您想知道的话，我更改了路径的名称，但这应该可行）