Skip to main content
 首页 » 编程设计

angularjs之在前端使用 OAuth 成功进行身份验证后如何与后端交互

2024年11月24日9mate10pro

我想构建小型应用程序。会有一些用户。我不想制作自己的用户系统。我想将我的应用程序与 oauth/oauth2.0 集成。

我的前端应用和oauth 2.0的集成没有问题。有很多有用的文章,如何做到这一点,甚至在 stackoverflow.com 上。例如 this post非常有帮助。

但。前端授权成功后怎么办?当然,我可以在客户端上设置标志,上面写着“好的,伙计,用户已通过身份验证”,但是我现在应该如何与后端交互?我不能只是提出一些要求。后端 - 一些应用程序,提供 API 功能。每个人都可以访问这个 api。

所以,无论如何我都需要一些身份验证系统在我的 FE 和 BE 之间。这个系统应该如何工作?

ps 我在英语方面有一些问题,可能是我不能正确地“向谷歌询问”。您能否提供正确的问题,请:) 或至少提供一些关于我的问题的文章。

UPD

我正在寻找概念。我不想为我当前的问题找到一些解决方案。我认为我使用哪个 FE 和 BE 并不重要(无论如何我会
在下面提供有关它的信息)

FE 和 BE 将使用 JSON 进行通信。 FE 将发出请求,BE 将发送 JSON 响应。我的应用程序将具有以下结构(可能):

  • 前端 - 可能是 AngularJS
  • 后端 - 可能是 Laravel(laravel 会实现逻辑,结构中也有数据库)

  • 也许像 google.com、vk.com、twitter.com 等“服务提供商”会记住用户的状态?在 FE 上成功进行身份验证后,我可以从 BE 询问用户状态吗?

    请您参考如下方法:

    在创建 API 时,我们有 3 个主要的安全问题。

  • 认证 :像 Google 这样的身份识别提供商只是部分解决方案。由于您不想为每个 API 请求提示用户登录/确认其身份,因此您必须自己为后续请求实现身份验证。您必须存储可供后端访问的:
  • 用户的 ID。 (取自身份提供商,例如:电子邮件)
  • 一个用户 token 。 (您生成的临时 token ,可以通过 API 代码进行验证)
  • 授权 :您的后端必须根据用户 ID 实现规则(这是您自己的业务)。
  • 运输安全 :HTTPS 和过期 cookie 是安全的,其他人无法重播。 (HTTPS 正在加密流量,因此可以抵御中间人攻击,而过期 cookie 可以及时阻止重放攻击)

  • 所以你的 API/后端有一个随机字符串的电子邮件查找表。现在,您不必公开用户的 ID。 token 是无意义的和临时的。

    在这个系统中,流程是这样工作的:
    User-Agent    IdentityProvider (Google/Twitter)   Front-End    Back-End 
     |-----------------"https://your.app.com"---------->| 
                                                        |---cookies-->| 
                                     your backend knows the user or not. 
                                           if backend recognizes cookie,  
                              user is authenticated and can use your API 
    

    别的:
                                                 if the user is unknown: 
                                                        |<--"unknown"-| 
                         |<----"your/login.js"----------+ 
                    "Do you Authorize this app?" 
     |<------------------+ 
     |--------"yes"----->| 
                         +----------auth token--------->| 
                         |<---------/your/moreinfo.js---| 
                         |-------access_token ---------->| 
                    1. verify access token 
                    2. save new user info, or update existing user 
                    3. generate expiring, random string as your own API token 
                                                        +----------->| 
     |<-------------- set cookie: your API token --------------------| 
    

    现在,用户可以直接使用您的 API:
     |--------------- some API request, with cookie ---------------->| 
     |<-------------- some reply, depends on your logic, rules ------| 
    

    编辑

    基于讨论 - 添加后端可以通过使用身份提供者验证访问 token 来验证用户:

    例如, Google exposes this endpoint检查 token XYZ123 :
    https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=XYZ123