【一】微信公众号之扫码登录

article/2025/9/17 10:37:16

微信公众号之扫码登录

​ 原来公司的官网就支持账号密码、手机验证码、QQ扫码授权、微信扫码授权等多种登录方式。今天要分享的就是关于微信扫码授权登录的原理。

一、准备工作

使用的是微信登录功能实现的,需要先在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程。

二、授权流程说明

微信授权登录让微信用户使用微信身份安全登录第三方应用或网站,当微信用户授权登录接入微信的第三方应用后,第三方就可以获取到用户的接口调用凭证(access_token),通过access_token可以进行微信开放平台授权关系接口调用,从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。微信OAuth2.0授权登录目前支持authorization_code模式,适用于拥有server端的应用授权。该模式整体流程为:

1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;
2. 通过code参数加上AppID和AppSecret等,通过API换取access_token;
3. 通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。

获取access_token时序图:

在这里插入图片描述

我们来捋一下整个流程

  1. 先是用户来访问咋们的网站,然后点击微信登录。
  2. 然后咋们就给他展示一个二维码,让他扫。
  3. 等用户扫码后就会询问他是否同意,点击同意后,我们就可以拿到access_token,获取该用户的一些基本信息,完成登录过程。最后跳转到指定的页面了。

三、具体接口

  • 第一步:请求CODE

    ​ 当用户点击微信登录后,我们要给他一个二维码,这个二维码是微信提供的,需要应用授权登录前请注意已获取相应网页授权作用域(scope=snsapi_login),则可以通过在PC端打开以下链接:

    https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
    

    参数说明

    参数是否必须说明
    appid应用唯一标识
    redirect_uri请使用urlEncode对链接进行处理
    response_type填code
    scope应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login
    state用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验

    返回说明

    用户允许授权后,将会重定向到redirect_uri的网址上,并且带上code和state参数

    redirect_uri?code=CODE&state=STATE
    

    若用户禁止授权,则重定向后不会带上code参数,仅会带上state参数

    redirect_uri?state=STATE
    
  • 第二步:通过code获取access_token

    通过code获取access_token

    https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
    

    参数说明

    参数是否必须说明
    appid应用唯一标识,在微信开放平台提交应用审核通过后获得
    secret应用密钥AppSecret,在微信开放平台提交应用审核通过后获得
    code填写第一步获取的code参数
    grant_type填authorization_code

    返回说明

    正确的返回:

    { 
    "access_token":"ACCESS_TOKEN", 
    "expires_in":7200, 
    "refresh_token":"REFRESH_TOKEN",
    "openid":"OPENID", 
    "scope":"SCOPE",
    "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
    }
    

    正确的返回参数说明

    参数说明
    access_token接口调用凭证
    expires_inaccess_token接口调用凭证超时时间,单位(秒)
    refresh_token用户刷新access_token
    openid授权用户唯一标识
    scope用户授权的作用域,使用逗号(,)分隔
    unionid当且仅当该网站应用已获得该用户的userinfo授权时,才会出现该字段。

    错误返回样例:

    {"errcode":40029,"errmsg":"invalid code"}
    
  • 第三步:通过access_token和openid获取获取用户个人信息(UnionID机制)

    接口说明:

    ​ 此接口用于获取用户个人信息。开发者可通过OpenID来获取用户基本信息。特别需要注意的是,如果开发者拥有多个移动应用、网站应用和公众帐号,可通过获取用户基本信息中的unionid来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号,用户的unionid是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。请注意,在用户修改微信头像后,旧的微信头像URL将会失效,因此开发者应该自己在获取用户信息后,将头像图片保存下来,避免微信头像URL失效后的异常情况。

    请求说明

    http请求方式: GET
    https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
    

    参数说明

    参数是否必须说明
    access_token调用凭证
    openid普通用户的标识,对当前开发者帐号唯一
    lang国家地区语言版本,zh_CN 简体,zh_TW 繁体,en 英语,默认为zh-CN

    返回说明:

    正确的Json返回结果:

    {
    "openid":"OPENID",
    "nickname":"NICKNAME",
    "sex":1,
    "province":"PROVINCE",
    "city":"CITY",
    "country":"COUNTRY",
    "headimgurl": "https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
    "privilege":[
    "PRIVILEGE1",
    "PRIVILEGE2"
    ],
    "unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"}
    
    参数说明
    openid普通用户的标识,对当前开发者帐号唯一
    nickname普通用户昵称
    sex普通用户性别,1为男性,2为女性
    province普通用户个人资料填写的省份
    city普通用户个人资料填写的城市
    country国家,如中国为CN
    headimgurl用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空
    privilege用户特权信息,json数组,如微信沃卡用户为(chinaunicom)
    unionid用户统一标识。针对一个微信开放平台帐号下的应用,同一用户的unionid是唯一的。

    建议:

    开发者最好保存用户unionID信息,以便以后在不同应用中进行用户信息互通。

    错误的Json返回示例:

    {
    "errcode":40003,"errmsg":"invalid openid"
    }
    

http://chatgpt.dhexx.cn/article/pRYtREO7.shtml

相关文章

公众号扫码登录

1.流程概述 1.1 申请公众号 1.2 创建带参数的公众号二维码,参数值为scen_id的值 1.3 微信基础配置接口编写,get方式的接口为微信测试接口,必须能正常访问,post方式的接口为扫码回调接口,从请求中获取微信返回的xml包…

二维码扫描登录,你必须知道的 3 件事!

作者 | 互联网平头哥 本文经授权转载自互联网平头哥(ID:it_pingtouge) 扫二维码登录现在比较常见,比如微信、支付宝等 PC 端登录,并且好像每款 APP 都支持扫码登录,不搞个扫码登录都不好意思。作为技术人员…

微信扫码登录实现

需求 使用微信扫码登录的授权方式登录系统 实现 此扫码登陆过程中使用了,微信开放平台(需支付300开通开发者认证)的网站应用实现的。 官方文档:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wec…

web扫码登录

文章目录 需求流程交互流程服务交互流程 关键思路代码生成二维码,返回给PC展示轮询查询二维码状态APP扫码请求登录 总结 需求 pc端实现app扫码登录 流程 交互流程 服务交互流程 关键思路 主要问题在于如何识别APP端用户,然后传递给PC端已经登录成功 …

开放平台–扫描微信二维码登录

准备 如不了解第三方登录流程,建议先大概了解一下,在来看看代码。 说明: 由于开放平台无测试号测试,所以只能上开放平台进行配置信息。公众平台的测试号并不能给开放平台使用。 微信开放平台地址:https://open.weixi…

二维码登陆

上一段时间研究微信公共账号,发现微信提供了一个扫码登陆验证的功能。近期头痛于经常忘记用户名密码,因此考虑是否可以结合这个功能,完成免密码登陆。百度后发现,有很多仁兄已经做过类似的功能了。 如这篇文章: 实现网站二维码扫描登录 仔细研究后,发现很…

二维码登录(三)扫码登录

承接上篇博客,在进行二维码生成之后,app进行扫码,扫码成功之后,手机点击登录,进行绑定登录关系,后台做自动关联与自动登录。 本文git地址:https://github.com/xvshu/qrlogin 1,扫码…

微信扫码登陆(1)---扫码登录流程讲解、获取授权登陆二维码

扫码登录流程讲解、获取授权登陆二维码 具体流程可以看微信官网的扫码登录文档 地址:准备工作 | 微信开放文档 其实官方文档已经讲的非常清楚而且讲的也很明白。 一、扫码登录流程讲解 1、首先准备工作 网站应用微信登录是基于OAuth2.0协议标准构建的微信OAut…

二维码扫码登录

项目结构 模块介绍 流程1 pc端:1:打开二维码登录网页index.html2:index.html调用GetQrCodeServlet3:GetQrCodeServlet干2件事 a:生成随机的uuid,是一个唯一标识,该标识贯穿整个流程 b:生成二维码图片,二维码信息:http://60.2…

扫码登录详解

目录 扫码流程分析 流程详解 步骤一:PC端准备二维码 步骤三:状态确认 token认证机制 扫码流程分析 1.扫码前,手机端已经是登陆状态,PC端显示一个二维码,等待扫描。 2.手机端打开应用,扫描PC端的二维码…

新增商品

1、在http代理设置,添加过滤参数: .*pusher\.*\/websocket.* .*/venilog/log/one .*\.(bmp|css|js|gif|ico|jpe?g|png|swf|woff) .*pusher\/info.* 2、启动http代理设置,录制脚本,将登陆和发布商品的脚本修改成’登陆‘&#x…

自定义商品分类,选择分类之后,添加商品附属性;仿淘宝后台添加商品附属性的价格和数量

效果图&#xff08;图片较大&#xff0c;加载较慢&#xff09; 页面部分&#xff1a; <div class"layui-form-item" id"add_attribute"><label class"layui-form-label">商品分类</label><div class"layui-input-i…

javaScript原生版购物车:全选、单选、全删、商品数量增减、计算总价、添加商品(代码)

题目&#xff1a; CSS代码如下&#xff1a; <style> *{ margin: 0px; padding: 0px; } .header,.content,.floot{ width: 800px; margin:0px auto; } .header ul li,.content ul li{ float: left; list-style: none; width: 100px; line-height: 100px; text-align: cen…

商品管理的新增

实现的功能如下&#xff1a; 点击新增弹出新增模态框通过下拉框绑定商品类别和商品单位保存新增 主要代码&#xff1a; 以上就是我的分享&#xff0c;如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔&#xff01;

案例:实现在购物车中添加商品和删除购物车中指定商品的功能

一、向购物车中添加商品 1.1.创建AddCartServlet public class AddCartServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}SuppressWarnings(&q…

14.商品添加功能

商品用例的bean层 添加商品的用例实现首先要有封装商品的bean&#xff0c;还要有封装商品种类的bean。 封装商品种类的bean package cn.bingou.domain;/*** 商品种类的bean* author 吹静静**/ public class ProdCategory {private int id;private String cname;public ProdCate…

二十三、商城 - 商品录入-新增商品(11)

目录 &#x1f33b;&#x1f33b; 一、商品录入【选择商品分类】1.1 需求分析1.2 准备工作1.3 代码实现1.3.1 一级分类下拉选择框1.3.2 二级分类下拉选择框1.3.3 三级分类下拉选择框1.3.4 读取模板ID 二、商品录入【品牌选择】2.1 需求分析2.2 代码实现 三、商品录入【扩展属性…

java添加功能_商品添加功能的实现

返回的结果&#xff1a; package com.taotao.common.utils; import java.util.List; import com.fasterxml.jackson.databind.JsonNode; import com.fasterxml.jackson.databind.ObjectMapper; /** * 淘淘商城自定义响应结构 */ public class TaotaoResult { // 定义jackson对象…

把商品添加到购物车的方法

因为抢华为荣耀的缘故&#xff0c;研究了下京东添加商品到购物车的方法&#xff0c;具体步骤如下 一&#xff1a;打开商品页面&#xff0c;找到商品的id 例如这个商品的id就是1056970 二&#xff1a;把链接里面的http://gate.jd.com/InitCart.aspx?pid###&pcount1&pt…

php 商品模块添加商品属性,添加新商品

进入添加商品页后&#xff0c;如图1&#xff0c;2 添加新商品 图1 图2 促销价格前台表现 图3 图4 图5 附加价格前台表现 图6 添加新商品 图7 配件和关联商品前台表现形式 图8 图9 通用信息商品分类&#xff1a;商品分类是必填项&#xff0c;用于帮助客户找到需要的商品。如果您…