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

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


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

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

(后续有问题在这里回复就可以,不用发到微信)

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

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

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

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

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

我来简单回答一下,图片中已经很详细、简单易懂的画出来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 Like

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