微信小程序实现微信登录

文章目录

  • 涉及到的微信官方文档
  • login.wxml
    • 效果
    • login.wxml
  • login.js
    • 效果
    • login.js
    • util.js
  • 后端(使用django)
    • urls.py
    • views.py

流程:
1. wx.getUserProfile() 会调出获取用户微信的页面
2. 当用户点击“允许”后,wx.login() 带着code去后端通过向微信发起请求获取用户的openid,最后登录

涉及到的微信官方文档

https://api.weixin.qq.com/sns/jscode2session
wx.login
wx.getUserProfile
微信小程序查看AppID或重置AppSecret

login.wxml

效果

在这里插入图片描述

login.wxml

在这里插入图片描述

<van-button round slot="button"  size="large"  color="#008800" bind:tap="wechat_login">微信登录</van-button>

login.js

效果

在这里插入图片描述
wx.getUserProfile()会调出获取用户微信的页面

login.js

  wechat_login(){
    //getUserProfile()-》wx.login获取到该微信用户的openid,之后去数据库中查询是否有该openid的用户,有就该用户登录成功,token赋值,之后跳转首页
    wx.getUserProfile({
      desc: '用于微信登录', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
      success: (res) => {
      	//用户点击“允许”
        app.globalData.wechatUserInfo=res.userInfo
        //去后端获取用户的openid,并与该账号密码绑定,最后登录
        util.getUserOpenid()
      }
    })
  },

在这里插入图片描述

util.js

function getUserOpenid() {
  //获取该微信号的openid
  wx.login({
    success (res) {
      if (res.code) {
        //发起网络请求
        wx.request({
          url: 'http://127.0.0.1:8000/api/getWechatId/',
          method: "GET",
          data: {
            code: res.code
          },
          success:resquest=>{
            console.log("request")
            console.log(resquest.data)
            if(resquest.data.status==200){
              app.globalData.userInfo=resquest.data.results
              console.log("openid")
              console.log(app.globalData.userInfo.openid)
              wx.showToast({
                title: resquest.data.msg,
                icon: 'success'
              })
              //登录成功,跳转首页
              wx.switchTab({
                url: '/pages/index/index',
              })
            }
            else{
              wx.showToast({
                title: "登录失败",
                icon: 'error'
              })
            }
          }
        })
      } else {
        console.log('登录失败!' + res.errMsg)
      }
    }
  })
}

后端(使用django)

urls.py

urlpatterns = [
	path('api/getWechatId/',WechatView.as_view())
]

views.py

class WechatView(APIView):
    authentication_classes = [RecordAuthentication, ]	# 权限校验

    def get(self, request):
        code = request.query_params.get("code")
        print("code " + code)
        url = "https://api.weixin.qq.com/sns/jscode2session"
        url += "?appid=xxx"  	# 换成自己的appid
        url += "&secret=xxx"  	# 换成自己的appSecret
        url += "&js_code=" + code
        url += "&grant_type=authorization_code"
        url += "&connect_redirect=1"

        import requests, json
        r = requests.get(url)  # 向微信发送请求,获得微信用户的openid
        key = json.loads(r.text)  # 转成json格式
        openid = key.get("openid")  # openid是该用户在该小程序中的唯一标识
        print("openid " + openid)

        if not request.user:
            # 选择微信登录
            # 根据openid到user表中查出该用户,如果没有,为其创建一个用户
            user=User.objects.filter(openid=openid).first()
            token = str(uuid.uuid4())
            if(user):
                # 存在该用户
                user.token=token
                user.save()
                user_serializer = UserModelSerializer(user)
            else:
                # 没有此用户
                user.username="momo"
                user.password="123456"
                user.openid=openid

                user.token = token
                user.save()
                user_serializer = UserModelSerializer(user)

            return Response({
                'status': '200',
                'msg': '登录成功!',
                'results': user_serializer.data
            })

        else:
            # 登录状态下实现绑定微信
            userid=request.user.id
            user=User.objects.filter(id=userid).first()
            user.openid=openid
            user.save()

            return Response({
                'status': '200',
                'msg': '绑定成功!',
                'openid': openid
            })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/196707.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深度解析Python JSON库:全面掌握函数与方法,学会JSON数据处理

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com JSON&#xff08;JavaScript Object Notation&#xff09;在现代编程中被广泛应用&#xff0c;它是一种轻量级的数据交换格式。Python提供了内置的JSON库&#xff0c;允许在Python中解析和序列化JSON数据。本文将…

图片照片编辑SDK解决方案

图像和照片已经成为我们日常生活中不可或缺的一部分&#xff0c;无论是个人还是企业&#xff0c;都希望通过高质量的图像和照片来提升品牌形象&#xff0c;吸引更多的用户和客户。然而&#xff0c;图像和照片的编辑并不是一件简单的事情&#xff0c;它需要专业的技术和工具。这…

【Linux】探索进程的父与子

目录 1.获取进程PID1.1进程PPID 2.通过系统调用创建进程-fork初识2.1为什么fork函数要给子进程返回0&#xff0c;给父进程返回pid&#xff1f;fork函数如何做到返回两次的&#xff1f;fork干了什么事情&#xff1f;怎么理解一个变量为什么有两个不同的值&#xff1f;如果父子进…

【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件

思路 JS-DLL-WINCC-PLC之间进行交互&#xff0c;思路&#xff0c;先用Visual Studio创建一个C#的DLL控件&#xff0c;然后这个控件里面嵌入浏览器组件&#xff0c;实现JS与DLL通信&#xff0c;然后DLL放入到WINCC里面的图形编辑器中&#xff0c;实现DLL与WINCC的通信。然后PLC与…

[SaaS] 淘宝AI淘淘秀

AIGC技术在淘淘秀场景的探索与实践关键词&#xff1a;图像类AI创新应用、用户轻松创作、内容分享、结合商家品牌。https://mp.weixin.qq.com/s/-3a3_nKeKGON-9-Prd7JKQ 1.生成模版 利用定制的prompt&#xff0c;生成一些比较好的素材图片案例。 最终的用的是通义万相。 2.仿…

elk:filebeat也是一个日志收集工具

filebeat是一个轻量级的日志收集工具&#xff0c;所使用的系统资源比logstash部署和启动使用的资源要小的多 filebeat可以允许在非java环境&#xff0c;他可以代替logstash在非java环境上收集日志 filebeat无法实现数据的过滤&#xff0c;一般是结合logstash的数据过滤功能一…

深入理解强化学习——马尔可夫决策过程:贝尔曼期望方程-[举例与代码实现]

分类目录&#xff1a;《深入理解强化学习》总目录 在文章《深入理解强化学习——马尔可夫决策过程&#xff1a;贝尔曼期望方程-[基础知识]》中我们讲到了贝尔曼期望方程&#xff0c;本文就举一个贝尔曼期望方程的具体例子&#xff0c;并给出相应代码实现。 下图是一个马尔可夫…

深度学习:全面了解深度学习-从理论到实践

深度学习&#xff1a;全面了解深度学习-从理论到实践 摘要&#xff1a;本文旨在为读者提供一份全面的深度学习指南&#xff0c;从基本概念到实际应用&#xff0c;从理论数学到实践技术&#xff0c;带领读者逐步深入了解这一领域。我们将一起探讨深度学习的历史、发展现状&#…

Mysql8.1.0 安装问题-缺少visual studio 2019x64组件

缺少visual studio x64组件的问题 使用Mysql8以上的安装包mysql-8.1.0-winx64.msi进行安装&#xff0c; 提示缺少visual studio 2019 x64可再发行组件 在微软官网下载vc可再发行程序包 Microsoft Visual C 可再发行程序包最新支持的下载 在Visual Studio 2015、2017、2019 和…

C++学习——类和对象(上)

C学习——类和对象 一、面向对象和面向过程的初步认识二、什么是类 一、面向对象和面向过程的初步认识 我们之前学习了C语言&#xff0c;我们知道 ① C语言&#xff1a;C语言是一门面向过程的语言&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函…

vue的生命周期及不同阶段状态可以进行的行为

什么是vue的生命周期&#xff1f; Vue 的实例从创建到销毁的过程 &#xff0c;就是生命周期 &#xff0c;也就是从开始创建 &#xff0c;初始化数据 &#xff0c;编译模板 &#xff0c;挂载Dom到渲染DOM &#xff0c;更新数据再到渲染 &#xff0c;卸载等一系列的过程 &#x…

羽隔已就之图像处理之BP神经网络入门

小y最近非常忙&#xff0c;这一年来&#xff0c;活很多&#xff0c;一直在加班、出差&#xff0c;也没好好休息过。最近在武汉出差一个多月了&#xff0c;项目逐渐完结&#xff0c;有点闲时间了&#xff0c;回首望&#xff0c;这一年设定的很多目标都没完成。 还记得&#xff0…

【攻防世界-misc】Encode

1.下载解压文件&#xff0c;打开这个内容有些疑似ROT13加密&#xff0c;利用在线工具解密&#xff1a;ROT13解码计算器 - 计算专家 得到了解密后的值 得到解码结果后&#xff0c;看到是由数字和字母组成&#xff0c;再根据题目描述为套娃&#xff0c;猜测为base编码&#xff08…

处理器及微控制器:XCZU15EG-2FFVC900I 可编程单元

XCZU15EG-2FFVC900I参数&#xff1a; Zynq UltraScale™ MPSoC 系列基于 Xilinx UltraScale™ MPSoC 架构。该 Zynq UltraScale™ MPSoC 器件集成了功能丰富的 64 位四核或双核 Arm Cortex-A53 和双核 Arm Cortex-R5F 处理系统&#xff08;基于 Xilinx UltraScale™ MPSoC 架…

Vue3挂载完毕后,隐藏dom再重新加载组件的方法

组件原本是在PC端使用的&#xff0c;现在需要把组件再封装一次&#xff0c;供app调用&#xff0c;但是在app上会显示tag栏&#xff0c;有占位影响空间&#xff0c;所以需求去掉头部tag&#xff0c;只显示下方组件。 实现方法&#xff0c;以前是直接引用的组件&#xff0c;现在改…

一天之内“三个离职群都满了”;飞行出租车的时代就此开启?丨 RTE 开发者日报 Vol.94

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

java学习part20内部类

116-面向对象(高级)-类的成员之五&#xff1a;内部类_哔哩哔哩_bilibili 1.内部类

在微服务架构中的数据一致性

当从传统的单体应用架构转移到微服务架构时&#xff0c;特别是涉及数据一致性时&#xff0c;数据一致性是微服务架构中最困难的部分。传统的单体应用中&#xff0c;一个共享的关系型数据库负责处理数据一致性。在微服务架构中&#xff0c;如果使用“每个服务一个数据库”的模式…

Java零基础——SpringBoot篇

SSM Springboot 分布式微服务 1.Spring的发展 回顾&#xff1a;Spring是一个开源框架&#xff0c;2003年兴起的一个轻量级的Java 开发框架&#xff0c;作者&#xff1a;Rod Johnson。Spring是为了解决企业级应用开发的复杂性而创建的&#xff0c;简化开发。 1.1 Spring1.x时…

HarmonyOS 数据持久化 Preferences 如何在页面中对数据进行读写

背景介绍 最近在了解并跟着官方文档尝试做一个鸿蒙app 小demo的过程中对在app中保存数据遇到些问题 特此记录下来 这里的数据持久化以 Preferences为例子展开 废话不多说 这里直接上节目(官方提供的文档示例:) 以Stage模型为例 1.明确preferences的类型 import data_prefer…