关于微信,qq小程序的登录,数据库-前端-接口解析

一、背景  

当我们在对接微信平台,开发微信小程序时,用户标识是必不可少的。用户标识贯通了整个开发过程,所以获取到唯一的用户标识是必须的。

          

二、多平台兼容  

因为考虑到一次开发,可多端运行,需要考虑兼容多平台兼容,这里我们同时考虑微信,QQ,如果有其他小程序根据需要添加。

我们前端采用uniapp框架。后端采用Python编写。

          

三、用户标识  

考虑到我们代码需要支持多平台,因此,需要对每个平台分析,并得到对应的唯一标识(openid)

1、微信  

根据小程序的开发文档,我们可以得知和解析其openid。具体看图:

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html    

流程如下:用户通过前端登录接口获得code,然后传给后台,后台再调用接口,解析到用户的openid。

          

2、QQ  

QQ小程序这边也是相同的方式,大差不差流程是相同。

QQ开发文档

https://q.qq.com/wiki/develop/miniprogram/frame/open_ability/open_userinfo.html    

四、需求分析  

首先第一步,是要分析我们的需求是什么,我们要实现什么功能。

1、我们要实现一个登录功能,并且可以同时支持QQ和微信

2、我们要把数据库,前端,后端,都要描述清楚

          

五、开发设计  

(一)、前端设计  

1、code只能通过前端获得,所以前端需要先通过登录接口获取到code,然后把code传给后台。

2、如果后台返回得到的openid,或者其他id之后,前端需要把openid存起来,用作全局用户唯一标识。

3、需要根据微信,QQ做区分,需要先调用渠道获取到当前渠道信息。使用uni.getProvider可以获取到渠道。    

(二)、数据库设计  

1、数据库需要储存用户信息,并方便之后用户标识。所以增加一个user表。

2、另外需要区分微信用户还是qq用户。

Id

Openid

source

平台id

用户openid

来源,微信还是qq

一个基础的用户数据表就完成了,有其他字段需要自行添加,比如后期可能需要用户昵称,手机号,用户头像等。

          

(三)、接口设计  

1、后台需要提前准备一个接口,供前前端传输code,后台处理之后并返回openid,

2、后台需要请求session接口获得openid。只需要一个接口。

3、需要做微信和QQ区分。

          

六、代码实现  

1、前端代码  

这里我们通过getProvider获得渠道类型,然后调用登录接口获得code,然后使用code,Provider传给后台。用来区分微信、qq,返回的openid我们存起来。setStorage是存缓存。也可以使用全局变量globalData。

        onLaunch: function() {
           
            let that = this;
            uni.showLoading({
                title: '正在登录中~'    
            });
            uni.getProvider({
                service: 'oauth',
                success: function(res) {
                    console.log(res.provider[0])
                    uni.login({
                        provider: res.provider[0],
                        success: (res2) => {
                            console.log(res2);
                            uni.request({
                                url: "https://127.0.0.1:80/login",
                                data: {
                                    "js_code": res2.code,
                                    "provider": res.provider[0]
           
                                },
                                method: "GET",
                                success(res) {
                                    uni.setStorage({
                                        key: 'openid',
                                        data: res.data.openid,
                                        success: function() {
                                            console.log('success');
                                        }
                                    });
                                }
                            });
                            uni.hideLoading();
           
                        },
                        fail: () => {
                            uni.showToast({
                                title: "微信登录授权失败",
                                icon: "none"
                            });
                        }
                    })
           
                }
           
            });
        },
        globalData: {    
            openid: ''
        },
           


 

2、模型  

后台我们采用Python+django实现,我们创建对应的数据库模型,用来做数据处理

class WxUser(models.Model):          
    """用户表"""          
    id = models.AutoField(primary_key=True)          
    open_id = models.CharField(max_length=100, unique=True, verbose_name="微信 OpenID")          
    nick_name = models.CharField(max_length=28, verbose_name="昵称", null=True)          
    avatar_url = models.TextField(max_length=300, verbose_name="头像链接", null=True)          
    gender = models.IntegerField(verbose_name="男0,女1", default="0")          
    source = models.IntegerField(verbose_name="微信小程序0,qq小程序1", default="0")          
    created_at = models.DateTimeField(default=timezone.now)          
    updated_at = models.DateTimeField(default=timezone.now)          
    is_del = models.IntegerField(blank=True, default="0", verbose_name="是否删除,0未删除,1已删除"
 

3、接口代码  

接口需要做渠道区分,如果已经存在就返回openid

          

def login(request):          
    js_code = request.GET.get("js_code")          
    provider = request.GET.get("provider")          
    if provider == "weixin":          
            appid = 'wxf8cb9a'          
            secret = 'ff2ff7a449b'          
            response = requests.get(          
                "https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code" % (          
                    appid, secret, js_code))          
            source = 0          
    elif provider == "qq":          
        appid = '11234084'          
        secret = '1loc0hE'          
        response = requests.get(          
            "https://api.q.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code" % (          
                appid, secret, js_code))          
        source=1          
    openid = response.json()["openid"]          
    user= WxUser.objects.filter(open_id=openid, source=source).first()          
    if user== None:          
        WxUser(open_id=openid).save()          
    return JsonResponse({"openid": openid})        

七、文章总结  

本文提供了一个简单的登录实例,供大家参考。

使用开发工具:hbuilder X,pycharm,微信开发者工具。

本文主要讲述,前端如何获取设备渠道,微信,qq登录方式。后端数据库大概,如何调用接口获取openid。    

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大家一起学编程(python)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值