前后端分离架构下github oauth的实现思路

Steak Overcooked
,
1

关于前后端分离的框架下,github oauth完成授权后,最后的回调地址,会去请求后端flask的api,后端的信息可以从github提供的token信息完成更新.但对于前端特别是spa单页应用它是感知不到的.对于前后端分离架构下,flask有没有最佳解决案例.

oauth
oauth906×826 74.5 KB

1-7问题不大,8是由后端发起的,这个在flask中大概如何实现呢

2

看图里 8 并不是由后端主动发起的响应，而不是由前端发起的请求 5 返回的响应 8。所以你只需要创建一个视图函数来接受请求 5，在视图函数里向 UAA 授权中心发起请求（可以使用 requests）获取 access token（6、7），然后再返回给前端（8）。

（后续有问题在这里回复就可以，不用发到微信）

3

因为前后端分离中的后端几乎都是返回 json 格式的信息，几乎不存在直接跳前端页面的做法，并且前后端分离都是用token获取用户信息。前端只有拿到相应的token才能获取到github用户的资料。所以这里的问题变成了如何通过后端把用户的 token 给到前端页面。

4

Flask 视图函数返回字典会自动转换并生成 JSON 响应：

@app.route('/token')
def get_token():
    return {'token': '...'}

前端怎么拿到取决于语言和框架。

5

可能没理解我的意思哈,我问的不是后端怎么生成json数据以及前端怎么调用后端的api.可能是个前后端的综合问题,我找找资料,有了答案我贴过来.

6

我来简单回答一下，图片中已经很详细、简单易懂的画出来oauth的流程，以及每部分的功能（这与前后端分离这种架构方式无关，由于http协议的性质，所以前后端本身就是分离的）

oauth授权流程如下:

  1. A 网站让用户跳转到 GitHub。
  2. GitHub 要求用户登录，然后询问"A 网站要求获得 xx 权限，你是否同意？"
  3. 用户同意，GitHub 就会重定向回 A 网站，同时发回一个授权码。
  4. A 网站使用授权码，向 GitHub 请求令牌。
  5. GitHub 返回令牌.
  6. A 网站使用令牌，向 GitHub 请求用户数据。

注意： 这里的网站指的是 WebSite。 作为区分，1-3准确的说是前端页面，4-6说的是后端。

用户点击完同意后，oauth（GitHub）就会跳转回你的网站（前端）。
此时，前端已经拿到了oauth发放的授权码（说的可能不准确，反正就是一个钥匙），然后你应该拿着这个授权码去请求后端用来处理的地址（我简单称其为 回调api)。

这个回调api的功能: 向GitHub请求令牌（注意这里的令牌token和你前后端交互的token是不一样的），比如 oauth的请求令牌地址为:https://github.com/login/oauth/access_token?,参数如下:

  • client_id ：客户端的 ID
  • client_secret ：客户端的密钥
  • code ：授权码

后端请求了这个地址，oauth势必会返回一个响应（一般响应体是json），里面包含了令牌accessToken, 然后后端再把这个token返回前端（你也可以不返回，后端做个映射） 。至此整个oauth流程就算结束了（因为后端拿到了oauth发放的令牌）。

后话： 至于oauth给你令牌，你可以选择直接返回前端，你也可以不返回，具体操作看个人喜欢。

1 个赞
7

谢谢大佬的回答.我就是在后话中卡住了呢,由于是回调的,前端没能直接获取到accessToken.https://www.jianshu.com/p/da54bad42b30 我在帖子里找到了答案,在我自己的代码中已经实现了后端获取 accessToken后将其同步到前端.