微信小程序实现微信登录

文章目录

  • 涉及到的微信官方文档
  • 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() {//获取该微信号的openidwx.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.resultsconsole.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"  	# 换成自己的appidurl += "&secret=xxx"  	# 换成自己的appSecreturl += "&js_code=" + codeurl += "&grant_type=authorization_code"url += "&connect_redirect=1"import requests, jsonr = requests.get(url)  # 向微信发送请求,获得微信用户的openidkey = 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=tokenuser.save()user_serializer = UserModelSerializer(user)else:# 没有此用户user.username="momo"user.password="123456"user.openid=openiduser.token = tokenuser.save()user_serializer = UserModelSerializer(user)return Response({'status': '200','msg': '登录成功!','results': user_serializer.data})else:# 登录状态下实现绑定微信userid=request.user.iduser=User.objects.filter(id=userid).first()user.openid=openiduser.save()return Response({'status': '200','msg': '绑定成功!','openid': openid})

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue实现海康H5视频插件播放视频的实例,实现取流失败了之后重新获取新的流播放视频

vue实现海康H5视频插件播放视频的实例&#xff0c;实现取流失败了之后重新获取新的流播放视频 h5player是一个基于HTML5的流式网络视频播放器&#xff0c;无需安装浏览器插件即可通过websocket协议向媒体服务取流播放多种格式的音视频流。 首先去海康开发平台&#xff0c;把插…

CopyOnWriteArrayList源码解析

CopyOnWriteArrayList源码解析 文章目录 CopyOnWriteArrayList源码解析一、CopyOnWriteArrayList二、总结 一、CopyOnWriteArrayList 在 JUC 中&#xff0c;对于 ArrayList 的线程安全用法&#xff0c;比较推崇于使用 CopyOnWriteArrayList &#xff0c;那么CopyOnWriteArrayL…

Vue2或者uniapp 中 使用 iframe 嵌入本地 HTML 页面 并 相互通信。

1.使用 iframe 嵌入本地 HTML 页面&#xff08;以pdfjs为例&#xff09; 在 public 文件夹下新建 static 文件夹&#xff0c;然后将 html 文件及相关引用拷贝到 static 文件夹下 uniapp在src下新建hybrid文件 vue 文件完整代码 <template><div class"wrap&q…

java+python农村集体产权管理系统php+vue

注册、登陆该系统根据操作权限的不同分为管理员和用户两种&#xff0c;新用户在登陆前要进行用户注册&#xff0c;注册完成后方可进行登陆。 本次设计的关键问题处理&#xff0c;主要有如下几点&#xff1a; (1&#xff09;本次开发&#xff0c;采用主流Thinkphp框架进行开发&a…

KernelSHAP vs TreeSHAP

Kernel SHAP和Tree SHAP都用于近似Shapley值。Tree SHAP要快得多。缺点是它只能用于基于树的算法&#xff0c;如随机森林和xgboost。另一方面&#xff0c;Kernel SHAP是模型不可知的(model agnostic)&#xff0c;这意味着它可以与任何机器学习算法一起使用。我们将比较这两种近…

如何把 Oracle 19C RAC+DG加入到ORACLE EM 13C监控

平时见ORACLE 19c rac single dg的部署很多了&#xff0c;ORACLE em 13c 的安装也很多了,但如何把手工部署的oracle 19c rac dg 添加到em 13c 中去&#xff0c;让EM13C 来实现对RACDG的监控&#xff0c;主要是DG的EM13C的监控&#xff0c;还没有看到&#xff0c;大部分都是直接…

2023极客大挑战-AGRT战队wp

目录 RE Shiftjmp 点击就送的逆向题 幸运数字 ​编辑 砍树 小黄鸭 flower-or-tea mySelf 是男人就来扎针 听说cpp很难&#xff1f; Easymath 寻找初音未来 Rainbow 浪漫至死不渝 ezandroid Pwn nc_pwntools password ret2text write1 ret2libc ezpwn wr…

力扣23. 合并 K 个升序链表(java,最小堆解法)

Problem: 23. 合并 K 个升序链表 文章目录 题目描述思路解题方法复杂度Code 题目描述 给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中&#xff0c;返回合并后的链表。 思路 1.对于合并k个有序链表&#xff0c;我们较为容易想…

shiro整合redis

shiro整合redis 前言&#xff1a;shiro默认的session是存储在jvm内存中的&#xff0c;这样会导致java服务内存占用更大以及一旦服务器宕机或者版本迭代需要重启服务时&#xff0c;缓存中的数据不能恢复&#xff0c;导致用户需要重新登录认证&#xff0c;体验很差。因此利用第三…

JSON详细教程

&#x1f60a;JSON详细教程 &#x1f6a9;JSON简介☃️JSON语法规则&#x1f50a;JSON和JavaScript对象的区别 ☃️JSON数据类型字符串&#x1f50a;数字&#x1f50a;布尔值&#x1f50a;数组&#x1f50a;对象&#x1f50a;Null ☃️JSON对象&#x1f50a;访问JSON对象的值&a…

堆的应用(堆排序、Top-K问题)

文章目录 1 堆排序2 Top-K问题 1 堆排序 堆排序是一种基于二叉堆&#xff08;通常使用数组实现&#xff09;的排序算法。 它的基本思想是利用堆这种数据结构的性质&#xff0c;通过建立一个堆&#xff08;大堆或小堆&#xff09;&#xff0c;使得堆的根节点是所有节点中的最大值…

在线 SQL 模拟器SQL Fiddle使用简介

在线 SQL 模拟器SQL Fiddle使用简介 有时候&#xff0c;我们想去验证 SQL语句&#xff0c;却缺少数据库环境&#xff0c;那该怎么办呢&#xff1f; 这时候在线 SQL 模拟器就有了用武之地。SQL 模拟器免安装&#xff0c;可以在网页直接运行 SQL 。 SQL Fiddle 支持 MySQL、Orac…

SystemVerilog 入门

文章目录 包定义SystemVerilog 数据类型结构体 SystemVerilog 过程块可嵌套模块接口 System Verilog 的优点 提高了硬件建模能力、编码效率和抽象能力&#xff1b;RTL 级、系统级行为描述&#xff1b; 增强了验证能力和为大规模复杂设计编写有效、无竞争测试程序的断言功能&am…

spring-framework-5.2.25.RELEASE源码环境搭建

环境准备 spring-framework-5.2.25.RELEASEIntelliJ IDEA 2022.3.1java version “11.0.20” 2023-07-18 LTSGradle 5.6.4java version “1.8.0_301” 下载spring-framework-5.2.25.RELEASE源码 git clone https://gitee.com/QQ952051088/spring.git cd spring gradlew buil…

[学习记录]Node event loop 总结流程图

文章目录 文章来源根据内容输出的流程图待处理遗留的问题参考 文章来源 详解JavaScript中的Event Loop&#xff08;事件循环&#xff09;机制 根据内容输出的流程图 待处理 这里从polling阶段开始 好像有些问题 遗留的问题 为什么“在I/O事件的回调中&#xff0c;setImmediate…

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

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

使用Tensorboard可视化 遇到无法访问此网站

问题&#xff1a; 使用Tensorboard可视化 遇到无法访问此网站 解决方法&#xff1a;后面加上服务器ip[参考] tensorboard --logdir目标目录 --hostxxx.xxx.xxx.xx

leetcode LCR24反转单链表

反转单链表 题目描述 题目分析 先来说迭代的思想&#xff1a; 上面next cur->next应该放在cur->next pre前面执行&#xff0c;这里笔误 再来说递归的思想&#xff1a; 题目代码 这个代码里面我加了我自己写的测试数据&#xff0c;自己可以去找对应的部分&#xff0c…

【功能测试】软件系统测试报告

1.引言 1.1.目的 本测试报告为 xxx 系统测试报告&#xff0c;本报告目的在于总结测试阶段的测试及测试结果分析&#xff0c;描述系统是否达到需求的目的。 本报告预期参考人员包括测试人员、测试部门经理、开发人员、项目管理人员等。 1.2.参考文档 《xxxx系统需求规格说明…