博客网站上线一段时间了，发现注册用户很少，大家对于注册账号这种事都不太感兴趣，因此决定开发第三方账号登录功能，参考了相关文档实现了该功能，对整个过程以及其中遇到的问题还有解决办法做了详细的总结，避免大家踩坑。

一、什么是OAuth

1. 概念

OAuth的英文全称是Open Authorization，它是一种开放授权协议。OAuth目前共有2个版本，2007年12月的1.0版（之后有一个修正版1.0a）和2010年4月的2.0版，1.0版本存在严重安全漏洞，而2.0版解决了该问题。 OAuth简单说就是一种授权的协议，只要授权方和被授权方遵守这个协议去写代码提供服务，那双方就是实现了OAuth模式。

2. 应用场景

用户想要在某个网站应用登录使用时，又不想通过繁琐的步骤注册账号，此时就可以使用OAuth协议，调用第三方平台（如qq 微博等），完成第三方平台登录后，实现自动创建用户并登录的过程。

3. 过程解析

以博客网站使用QQ实现认证登录过程为例，详细分析具体流程


• 第一步：点击qq登录图标

 此时f12打开调试工具，发现network发送的具体请求地址是 https://www.cuiliangblog.cn/login/login/qq 

 Django服务器会响应一个重定向地址，指向qq授权登录页。https://graph.qq.com/oauth2.0/authorize?client_id=101921043&client_id=https://www.cuiliangblog.cn/login/complete/qq&state=uu25k4sabcActZYDUB2B1He8BrYS0MYu&response_type=code  该请求中携带了client_id、state等信息，QQ服务器收到请求后判断来源请求认证网站信息的正确性，确认无误后跳转至登录授权页面 

• 第二步：qq登录页面输入用户名密码，然后点授权并登录

 用户输入账号密码点击授权并登录按钮后，访问qq服务器中校验用户名密码的方法，进行用户名密码登录校验

 若校验成功，该方法会响应浏览器一个重定向地址，并附上一个code（授权码）和state。


• 第三步：跳回到博客页面，成功登录

Django服务器拿到的token后，获取根据openid获取用户信息。最后将用户信息储存起来，返回给浏览器其首页的视图。到此OAuth2.0授权结束。


二、使用OAuth

1. django项目使用OAuth

了解上述过程后，如何在自己的项目中使用OAuth认证呢？

• 方式一：参考文档，发送request请求api接口，完成认证授权。参考文档：https://wiki.connect.qq.com/%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C_oauth2-0
• 方式二：使用Django库，在此推荐两个库①django-allauth（大而全，从用户注册到发送邮件重置密码全过程、以及第三方登录都功能都有）②social_django（Django项目第三方登录模块）

由于我的项目已经开发了用户认证全部流程，所有在这采用social_django库实现用户第三方登录。参考文档：https://python-social-auth.readthedocs.io/en/latest/index.html

2.准备工作

使用QQ、微博的第三方登录时，需要开发者实名认证，QQ调用网站还需要进行备案。微信不支持个人身份开发者注册，需要填写企业信息。

• QQ申请地址：https://connect.qq.com/，如果遇到无法填写信息的话，可以登陆开放平台http://wiki.open.qq.com/ 后，点管理中心-账号资料再点编辑就可以上传修改信息，提交审核即可。（QQ互联资质和腾讯开放平台资质是共用的）


• 微博申请地址：https://open.weibo.com/


• github申请地址：https://github.com/settings/applications/new


• 安装social_django库

pip install social-auth-app-django 

• 修改setting.py配置

INSTALLED_APPS = [
    ……
    'social_django',  # 第三方登录
    ……
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                ………
                # 第三方账号登录
                'social_django.context_processors.backends',
                'social_django.context_processors.login_redirect',
                ……
            ],
        },
    },
]

# 支持邮箱登录
AUTHENTICATION_BACKENDS = (
                           'django.contrib.auth.backends.ModelBackend',  # 指定Django的modelbackend类
                           )
# 第三方登录
SOCIAL_AUTH_URL_NAMESPACE = 'social'

# 登陆成功后的回调路由
SOCIAL_AUTH_LOGIN_REDIRECT_URL = 'https://www.cuiliangblog.cn/account/'
# 使用https代理
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')

• 配置url

urlpatterns = [
    ……
    path('login/', include('social_django.urls', namespace='social')),
    # 第三方账户登录
    ……
]

• 创建数据库相关表

python manage.py migrate 

生成如下五张表


3. github

• setting文件添加配置

# 登录认证后端
AUTHENTICATION_BACKENDS = (……
                           'social_core.backends.github.GithubOAuth2',  # github登录
                       		……
                           )

# 第三方Github KEY和SECRET
SOCIAL_AUTH_GITHUB_KEY = '***********'
SOCIAL_AUTH_GITHUB_SECRET = '***************'
# 使用昵称作为用户名
SOCIAL_AUTH_GITHUB_USE_OPENID_AS_USERNAME = True

• 前端页面添加github登录跳转按钮

<button type="button" onclick="window.location.href = '{% url 'social:begin' 'github' %}'" class="layui-btn layui-btn-normal"><i class="fab fa-github fa-lg"></i></button>

• github应用settings配置，Homepage URL和Authorization callback URL都填写域名即可


• 登录测试（如果出现redirect_uri错误提示，参考后面的注意事项）

4. 微博

• setting文件添加配置

# 登录认证后端
AUTHENTICATION_BACKENDS = (……
                           'social_core.backends.weibo.WeiboOAuth2',  # 新浪微博登录
                       		……
                           )

# 第三方新浪微博KEY和SECRET
SOCIAL_AUTH_WEIBO_KEY = '**********'
SOCIAL_AUTH_WEIBO_SECRET = '***************'

• 前端页面添加github登录跳转按钮

<button type="button" onclick="window.location.href = '{% url 'social:begin' 'weibo' %}'" class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-login-weibo"></i></button>

• 微博开放平台，填写应用授权回调页


• 登录测试（如果出现redirect_uri错误提示，参考后面的注意事项）

5. QQ

• setting文件添加配置

# 登录认证后端
AUTHENTICATION_BACKENDS = (……
                           'social_core.backends.qq.QQOAuth2',  # qq登录
                       		……
                           )

# 第三方QQ KEY和SECRET
SOCIAL_AUTH_QQ_KEY = '***************'
SOCIAL_AUTH_QQ_SECRET = '*********'

• 前端页面添加github登录跳转按钮

<button type="button" onclick="window.location.href = '{% url 'social:begin' 'qq' %}'" class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-login-qq"></i></button>

• QQ开放平台，填写应用授权回调页


• 登录测试（如果出现redirect_uri错误提示，参考后面的注意事项）

三、其他功能实现

使用默认配置不能获取用户头像，性别信息，微博和QQ的用户名是用户的UID，为了提高用户体验，需要在创建用户时，修改一部分代码逻辑，social_django库支持可扩展的管道机制，开发人员可以在身份验证、登录和注销期间自定义开发其他功能。参考文档：https://python-social-auth.readthedocs.io/en/latest/pipeline.html#authentication-pipeline 安装官方文档的模板开发功能，还是比较麻烦的，后期库版本更新了还得调试代码。所有我换了个思路，研究social_django库代码发现，用户其他信息都存放在AbstractUserSocialAuth模型的extra_data字段中

1. 调试测试

• 模型文件路径：social_django > migrations > models.py

class AbstractUserSocialAuth(models.Model, DjangoUserMixin):
    """Abstract Social Auth association model"""
    ……
    extra_data = JSONField()
    ……

    def __str__(self):
        return str(self.user)

    class Meta:
        app_label = "social_django"
        abstract = True
    ……


class UserSocialAuth(AbstractUserSocialAuth):
    """Social Auth association model"""

    class Meta:
        """Meta data"""
        app_label = "social_django"
        unique_together = ('provider', 'uid')
        db_table = 'social_auth_usersocialauth'

• 数据库查看extra_data字段信息


• python shell 调试获取用户详细信息

[root@0da62d4c0833 myblog]# python3.9 manage.py shell
Python 3.9.0 (default, Dec 12 2020, 15:10:05) 
[GCC 8.3.1 20191121 (Red Hat 8.3.1-5)] on linux
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
>>> from social_django.models import UserSocialAuth
>>> user1 = UserSocialAuth.objects.get(user_id=62)                
>>> user1.extra_data['username']
'ζั͡ޓއއ陌影'
>>> user1.extra_data['profile_image_url']
'http://thirdqq.qlogo.cn/g?b=oidb&k=B2EsdNd78qoVu4616YoNVg&s=40&t=1581912070'
>>> user1.extra_data['gender']
'女'
>>> 

调试没问题，下面开始写这部分业务逻辑的代码。

2. 获取用户头像、用户名、性别

网站的数据库设计时，有一个userinfo表，专门存放用户详细信息，整体逻辑流程就是获取UserSocialAuth当前登录用户的extra_data相关值，保存到userinfo相关字段即可

# userinfo模型详细信息
class UserInfo(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE, unique=True)
    # 与自带用户表一对一
    phone = models.CharField(verbose_name='手机号', max_length=20, default="保密")
    sex_choice = [('1', '男'), ('2', '女')]
    sex = models.CharField(verbose_name='性别', max_length=1, choices=sex_choice, default=1)
    web = models.CharField(verbose_name='个人网站', max_length=50, blank=True, null=True)
    aboutme = models.TextField(verbose_name='个性签名', max_length=200, default="这个人很懒，什么都没留下！")
    photo = models.ImageField(upload_to='photo/', verbose_name='头像', default='photo/default.jpg')

    class Meta:
        verbose_name = '用户详细信息'
        verbose_name_plural = verbose_name

    def __str__(self):
        return "user:{}".format(self.user.username)

主要解决的问题有：

• 用户头像和性别只有QQ、微博这两个平台可以授权获取，github获取不到
• 用户名github默认获取的昵称作为用户名，而QQ和微博使用UID编码作为用户名

用户授权完成后跳转到个人中心页view部分代码

# 用户个人中心页面相关view处理逻辑
def personalCenter(request):
    try:
        userinfo = UserInfo.objects.get(user_id=request.user.id)
        # print("已注册用户登录")
    except Exception as e:
        print(e)
        # print("第三方用户第一次登录")
        social_user = UserSocialAuth.objects.get(user_id=request.user.id)
        if social_user.provider == 'github':
            # print("github登录")
            UserInfo.objects.create(user_id=request.user.id)
            user = User.objects.get(id=request.user.id)
        else:
            # print("qq或微博登录")
            username = social_user.extra_data['username'].replace(" ", "")
            photo_url = social_user.extra_data['profile_image_url']
            username = social_user.extra_data['username'].replace(" ", "")
            photo_url = social_user.extra_data['profile_image_url']
            sex = social_user.extra_data['gender']
            # QQ用户性别存储值为男、女,微博用户性别存储值为f、m
            if sex == '女' or sex == 'f':
                sex_id = 2
            else:
                sex_id = 1
            user_info = UserInfo()
            user_info.user_id = request.user.id
            user_info.photo = downloadPhoto(photo_url)
            user_info.sex = sex_id
            user_info.save()
            new_user = User.objects.get(id=request.user.id)
            new_user.username = username
            new_user.save()
            user = new_user
    ………………
    return render(request, 'layui-mini/account/index.html', locals())

四、注意事项

1. 授权回调页地址填写

• github授权回调页填写域名即可，例如https://www.cuiliangblog.cn/
• qq和微博的授权回调页打开浏览器调试工具，查看redirect_uri地址填写



2. qq回调地址问题

social_django库默认回调地址为****/login/complete/qq/，不符合qq回调页地址要求。

 此时可以修改setting配置，取消默认回调页uri后面的/

# 回调页uri后面不加/
SOCIAL_AUTH_TRAILING_SLASH = False

3. from表单redirect_uri地址异常问题

正确的form表单redirect_uri地址如下图所示


• redirect_uri地址为http://127.0.0.1:8000/***情况解决办法

主要是被代理服务器接收到的header信息不对，修改nginx配置，添加proxy_set_header 配置即可

server {
        …………
        location / {
                proxy_pass http://127.0.0.1:8000;
                proxy_set_header  Host $host;
                proxy_set_header  X-Real-IP $remote_addr;
                proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto  $scheme;
        }
 				…………
    }

• redirect_uri地址为http://***，而不是https://***情况解决办法

修改setting配置，强制将所有http的重定向请求转为https

# 将所有非SSL请求永久重定向到SSL
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')

五、效果演示

1. 登录页


2. 用户个人中心页


3. 后台管理用户列表