使用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进行实时重新加载开发服务器功能。

由于跨域策略，angular项目需要使用代理。 如前面的教程所述，您需要配置proxy.conf.json文件：

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

如果您这样做，就可以像以下这样访问Spring API：例如，http:/localhost:4200/api/users（每个 '/api' 请求将被转发到Spring服务器）。

以上所有内容都完美运行。现在我需要使用带有Google登录的Oauth2。我尝试了很多教程，比如这篇，但似乎无法解决这个问题。

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

我在网上搜索了很多地方，但似乎找不到这个特定的问题。有人能帮我理解或指出我的错误吗？也许有人有示例代码，那就太好了！

- Arno Bruynseels

Answer 1

我找到了解决问题的方法。首先，我有一个“href=/api/authenticate”的登录链接，但这并没有起作用！

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

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

因此，我将我的href更改为'href=http:/localhost:8080/api/authenticate'。这完美地工作，并将我重定向到谷歌登录页面。

我遇到的另一个问题是重定向URL。我尝试将重定向URL直接设置为'http:/localhost:4200/profile'，以便在登录后导航到用户的个人资料，但由于某些奇怪的原因，这并没有起作用。

经过一些测试，我发现您首先需要将重定向URL重定向回API域（不知道为什么）。

因此，我将重定向URL设置为http:/localhost:8080/callback，然后在端口4200上重定向到配置文件页面。

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

在搜索和测试了很长时间之后，我觉得这个问题没有被记录在任何地方。

- Arno Bruynseels

---

你在哪里指定了“/callback”作为认证的URL？我遇到了类似的情况……如果你能帮我解决问题，我会非常感谢你的:) - Yogen Rai

我在你的问题上增加了一个额外的答案。 - Arno Bruynseels

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域而不是前端域。如上面的代码所示，然后将重定向到正确的前端页面。

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

- Arno Bruynseels