如何将常规用户名/密码登录与第三方社交登录集成为Spring Boot Angular单页Web应用程序？-Java 学习之路

我有一个Angular Spring启动单页Web应用程序 . 该服务器还充当Auth服务器，它为角应用程序发出令牌以用于进行Restful API调用 .

我的旧登录流使用grant_type = password POST调用/ oauth / token endpoints 来获取Bearer令牌 . 代表用户的所有进一步的API调用将包括承载令牌作为“授权”http头 .

现在我需要整合社交登录（facebook，twitter等），这意味着我没有用户名/密码来生成令牌，所以我不知道如何让它工作 .

我一直在使用以下两个教程作为我的模板：

Spring Security and Angular JS

Spring Boot and OAuth

在第一个教程的oauth-vanilla示例中，用户名passwork登录流程会打开授权页面 . 但我想拥有传统的用户名/密码表单登录体验（直接登录用户而不是显示授权页面） .

在第二个教程中，在登录facebook之后，我想使用facebook id查找我的内部用户数据库并创建一个新用户（如果不存在）并以用户身份登录 . 并使用内部db用户的身份和权限来授权将来对我的API服务器的API调用 .

我在https://github.com/dingquan/spring-angular-oauth有一个剥离的样本

我可以对/ oauth / token endpoints 进行POST调用，并使用返回的令牌对我的protected / api / blogs endpoints 进行进一步的api调用 . 但我还没弄清楚如何使以下事情奏效：

将创建会话cookie的用户名/密码登录，因此我不需要发送授权承载令牌以用于将来对资源 endpoints 的API调用
在facebook登录后（facebook登录链接在用户名/密码登录表单下），对我的终端的调用仍然失败，出现401错误（我有一个“测试”按钮，可以调用/ api / blogs，你可以点击在它上面看行为） . 那么我错过了什么使API调用成功？

===更新===

只是为了澄清 . 以下是我要实现的目标：

多种身份验证方式（传统用户名/密码，第三方oauth登录如facebook，未来可能是手机号码短信代码）
我们确实需要我们自己的DB支持的用户模型来存储其他用户属性，纯社交登录是不够的
社交登录需要隐含 . 意味着用户在通过第三方（Facebook等）登录后，不需要手动在我们的系统中创建用户帐户 . 我们're not just grabbing users'社交 Profiles 数据预先填写注册表 . 如果没有现有的db用户与给定的外部社交帐户关联，我们希望在场景后自动创建新的DB用户 . 即如果用户通过Facebook登录，则无需输入用户名/密码 . 通过Facebook进行身份验证也会自动将用户登录到我们的系统中，用户应该能够在登录Facebook后访问受限资源 .

有一些混乱，我可能会要求人们将他们的Facebook用户名/密码放在我的应用程序托管的登录表单中，我将代表用户登录facebook . 这不是我要求的 .

1 回答

5
您不需要这么复杂的配置 . 将 @EnableOAuth2Sso 添加到 MainConfiguration 并设置适当的应用程序属性 .

以下是我使用Facebook作为授权服务器所做的工作 .

a) 从 UserServiceImpl 删除 clientId 和 authServer . 否则，您将被迫配置不需要的授权服务器 .

b) 完全删除 AuthorizationServerConfiguration .

c) 将 @EnableWebSecurity 和 @EnableOAuth2Sso 添加到 MainConfiguration .

d) 将 MainConfiguration::configure 更改为
```
http
    .logout().logoutSuccessUrl("/").permitAll().and()
    .authorizeRequests().antMatchers("/", "/login", "/home.html").permitAll()
    .anyRequest().authenticated()
    .and().csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
```
e) 从 MainConfiguration 删除除嵌套类 AuthenticationSecurity 之外的所有其他内容 .

f) 将 ResourceServerConfiguration::configure(HttpSecurity) 更改为
```
http.antMatcher("/api/**").authorizeRequests().anyRequest().authenticated();
```
f) 从 ResourceServerConfiguration 删除属性 tokenStore 和方法 ResourceServerConfiguration::configure(ResourceServerSecurityConfigurer) .

g) 从 application.yml 删除配置块 security 和 facebook . 而是添加这个
```
security:
  oauth2:
    client:
      client-id: <CLIENT_ID>
      token-name: oauth_token
      authentication-scheme: query
      client-authentication-scheme: form
      access-token-uri: https://graph.facebook.com/oauth/access_token
      user-authorization-uri: https://www.facebook.com/dialog/oauth
    resource:
      user-info-uri: https://graph.facebook.com/me
      client-id: <CLIENT_ID>
      client-secret: <CLIENT_SECRET>
      token-type: code
```
h) 在 index.html 中将 <a href="#/login">login</a> 更改为 <a href="/login">login</a> . i) 用one替换 hello.js 的内容 .

但我想拥有传统的用户名/密码表单登录体验（直接登录用户而不是显示授权页面） .

我永远不会使用需要我的凭据的网站，而不会将我重定向到原点！我不认识你，你被怀疑是一个网络钓鱼网站 . 你应该重新考虑你的决定 .

顺便说一下，我用这些更改创建了一个拉取请求 .
回复于 2024-04-20T19:24:58+08:00

如何将常规用户名/密码登录与第三方社交登录集成为Spring Boot Angular单页Web应用程序？

1 回答

相关问题