个人博客 Django 评论模块开发总结【一】Github第三方登陆

个人博客Django 评论模块开发总结

个人网站开通评论了 https://www.charmcode.cn/article/2020-07-09_Comment
欢迎评论

个人博客使用Python Django框架开发, 以下博客总结都是以Django为演示,前端使用原生Js 加简单封装的fetch请求库 替换JQuery的ajax,布局用的flex。
个人博客 Django 评论模块开发总结【一】Github第三方登陆_第1张图片

前言

我看网上现在很多都是使用的 畅言 或者 Disqus 等等的插件,当然集成插件确实也方便轻松。
但是,本着技术人员的热情,我还是想自己开发一下。

其他自己开发的评论就是像 阮一峰老师的网站一样。可以随便写个人信息然后评论,我不是很喜欢。
我最后选择了第三方登陆,然后再评论。想着技术人应该都有 GitHub 账号, 于是就选择了GitHub第三方登陆。
可参考阮一峰老师的 http://www.ruanyifeng.com/blog/2019/04/github-oauth.html

技术方向确定了,就想着如何开始着手开发。以下就是开发第三方登陆后评论的流程。实际一天半完成。(总结博客下班抽时间写,也算个教程了)

  • 1 首先实现GitHub 第三方登陆
  • 2 后台表设计, 数据管理, 评论接口设计。(用户输入的内容得特别小心,如恶意刷接口,SQL注入等)
  • 3 页面样式html+css实现。
  • 4 前端 js 逻辑控制,请求渲染数据。

GitHub 第三方登陆

首先要知道第三方登陆的原理 Oauth2.0协议,这里不再赘述, 不了解请看下面阮一峰老师的博客介绍。

  • 理解OAuth 2.0 http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html
  • OAuth 2.0 的四种方式 http://www.ruanyifeng.com/blog/2019/04/oauth-grant-types.html
  • GitHub OAuth 第三方登录示例教程 http://www.ruanyifeng.com/blog/2019/04/github-oauth.html
    三套组合拳下来,基本就差不多了吧。

一 首先去注册信息

个人博客 Django 评论模块开发总结【一】Github第三方登陆_第2张图片
网址 https://github.com/settings/applications/new

个人博客 Django 评论模块开发总结【一】Github第三方登陆_第3张图片
本地测试可以像我这样填写localhost。
注册完后会得到两个id
Client ID xxxxxxxxx
Client Secret xxxxxxxxxxx

二 整个认证流程

  • 1 请求github地址回调:
 https://github.com/login/oauth/authorize?
 client_id=你的client_id&
 redirect_uri=http://localhost:5000/github/oauth/redirect

弄个a标签或者其他的方式, 点击访问上面这个地址,github就会携带一个code 以get方式回调
http://localhost:5000/github/oauth/redirect 这个地址。

  • 2 本地服务接收code
    在本地启动一个服务, 接口地址为http://localhost:5000/github/oauth/redirect 的get服务,并获取code参数
  • 3 获取access_token
    接收到code参数后,再拼接以下地址 获取访问获取access_token
url = f"https://github.com/login/oauth/access_token?client_id={client_id}&client_secret={client_secret}&code={code}"

res = requests.post(url, headers={
            "accept": 'application/json'
        }, timeout=30)
# 返回json数据 获取access_token
access_token = res.json().get("access_token")
  • 4 携带access_token获取用户信息
 res = requests.get("https://api.github.com/user", headers={
            "accept": 'application/json',
            "Authorization": f"token {access_token}"
        }, timeout=30)
return res.json()

以上整个第三方登陆就完成了。
迷惑的地方
为什么第一步的回调地址写 http://localhost:5000/github/oauth/redirect 本地的localhost都可以?
我看阮一峰老师博客有评论回答
那个地址是客户端浏览器用的,浏览器直接跳转的,所以你自己本机起了就能跳转过去访问。
那个回调地址并不是github发起,而是你本机的浏览器。

部署到线上的时候记得把这个回调地址 http://localhost:5000 换成你服务器的域名。GitHub设置也要记得改。

Django GitHub登陆接口

import logging
import traceback

import requests

from django.conf import settings
from django.http import JsonResponse
from django.shortcuts import redirect

logger = logging.getLogger(__file__)

class GithubOauth(View):
    """Github第三方登录"""

    def get(self, request):
        code = request.GET.get('code')
        if not code:
            # 没有获取到code直接跳转到首页
            return redirect("/")
        refer_url = self.get_refer_url(request)
        logger.info(f"github登录接口回调 code:{code}")
        try:
            access_token = self.get_access_token(code)
            user_info = self.get_user_info(access_token)
        except requests.exceptions.Timeout:
            return JsonResponse({"code": 400, "data": None, "message": "请求 Github 登录超时"})
        except Exception as e:
            logger.info(f"登录报错{traceback.format_exc()}")
            return JsonResponse({"code": 500, "data": None, "message": "请求 Github 未知错误"})
        else:
            logger.info(f"GitHub用户信息{user_info}")
            # 这里就获取到GitHub用户信息了
            # 可以自己存数据库一份
            # 携带用户部分信息回调
            response = redirect(refer_url)
            response.set_cookie("github_username",username)
            response.set_cookie("github_avatar", avatar)

            return response

    @staticmethod
    def get_refer_url(request):
        """
        获取跳转前的url
        :param request:
        :return:
        """
        refer_url = request.META.get('HTTP_REFERER', '/')
        host = request.META['HTTP_HOST']
        if refer_url.startswith('http') and host not in refer_url:
            refer_url = '/'
        return refer_url
        
    @staticmethod
    def get_access_token(code):
        """
        获取access_token
        :param code:
        :return:
        """
        client_id = settings.GITHUB_CLIENT_ID
        client_secret = settings.GITHUB_CLIENT_SECRET

        url = f"https://github.com/login/oauth/access_token?client_id={client_id}&client_secret={client_secret}&code={code}"

        res = requests.post(url, headers={
            "accept": 'application/json'
        }, timeout=30)

        access_token = res.json().get("access_token")

        return access_token

    @staticmethod
    def get_user_info(access_token):
        res = requests.get("https://api.github.com/user", headers={
            "accept": 'application/json',
            "Authorization": f"token {access_token}"
        }, timeout=30)
        return res.json()


以上就是第三方登陆的全部过程,其实非常简单。

你可能感兴趣的:(Django,django,javascript)