Question

我需要将社交登录集成到我的web应用程序中。我使用Spring Boot作为后端，Angular 2作为前端技术使用。我按照this教程设置了我的项目。

这非常有效，Spring Boot在http：/ localhost：8080和Angular 2上运行在http：/ localhost：4200上。原因是我使用Angular-cli进行实时重载开发服务器功能。

由于Cross Origin策略，angular项目需要使用代理。如前一个教程中所述，您需要配置proxy.conf.json文件：

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

如果这样做，您可以按如下方式访问Spring API：http：/ localhost：4200 / api / users例如（每个＆＃39; / api＆＃39;请求将被转发到Spring服务器）。< / p>

以上所有事情都很完美。现在我需要在谷歌登录时使用Oauth2。我尝试了许多教程，例如this，但我似乎无法解决这个问题。

如果我尝试实现这个并导航到http：/ localhost：8080（来自Spring Boot地址），我会被重定向到google登录页面，但是当尝试相同的事情时，例如http：/ localhost：4200 / api / authenticate我只是总是重定向到http：/ localhost：4200 / login immediatly而不会将我重定向到登录页面。

我在网上看了一下，但似乎无法找到这个特殊的问题。任何人都可以帮助我理解或者我做错了什么，也许有人会有很好的示例代码！

Answer 1

我找到了解决问题的方法。首先我有'href = / api / authenticate'的登录链接，但这不起作用！

注意：@ EnableOAuth2Sso标准保护服务器上的每个路径，因此您只需要在受保护的路径上访问API以重定向到登录页面

出于某种原因http：/ 4200 / api / authenticate什么也没做，只是立即将我重定向到http：/ 4200 / login（我想如果身份验证失败或未经过身份验证，这必须是@ EnableOAuth2Sso的标准行为？）

所以我将我的href改为'href = http：/ localhost：8080 / api / authenticate'。这完美无缺，并将我重定向到谷歌登录页面。

我遇到的另一个问题是重定向网址。我尝试将重定向网址直接设置为'http：/ localhost：4200 / profile，登录到用户配置文件后进行导航，但由于某些奇怪的原因，这不起作用。

经过一些测试后，我发现你需要先重定向到你的api域（不明白为什么）。

所以我将重定向网址设置为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身份验证页面。

当您成功进行身份验证时，我重定向到以下代码：

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

正如我在第一个回答中所解释的那样，由于一些奇怪的原因，它是回复你的Spring域而不是你的前端域。如上面的代码所示，然后重定向正确的forntend页面。

（随着时间的推移，我改变了路径的名称，如果你想知道但这应该有效）

使用Spring Boot和Angular 2 CLI进行Google OAuth2身份验证

2 个答案: