加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 如何将常规用户名/密码登录与第三方社交登录集成为

发布时间:2020-12-17 17:39:54 所属栏目:安全 来源:网络整理
导读:我有一个Angular Spring启动单页Web应用程序.该服务器还充当Auth服务器,它为角应用程序发出令牌以用于进行Restful API调用. 我的旧登录流使用grant_type = password POST调用/ oauth / token端点来获取Bearer令牌.代表用户的所有进一步API调用将包括Bearer令
我有一个Angular Spring启动单页Web应用程序.该服务器还充当Auth服务器,它为角应用程序发出令牌以用于进行Restful API调用.

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

现在我需要整合社交登录(脸书,推特等),这意味着我没有用户名/密码来生成令牌,所以我不知道如何让它工作.

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

Spring Security and Angular JS

Spring Boot and OAuth

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

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

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

我可以对/ oauth / token端点进行POST调用,并使用返回的令牌对我的protected / api / blogs端点进行进一步的api调用.但我还没弄明白如何使以下事情奏效:

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

===更新===

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

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

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

解决方法

您不需要这么复杂的配置.将@ 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中删除配置块安全性和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”>登录< / a>.
i)用此one替换hello.js的内容.

But I’d like to have the traditional username/password form login experience (log user in directly instead of showing the Authorization page).

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

顺便说一下,我用这些更改创建了一个拉取请求.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读