pc端网页实现微信扫码登录

微信开发文档:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
在这里插入图片描述

在这里插入图片描述

  1. 点击按钮,跳转到微信授权页面,会出现一个二维码。
    在这里插入图片描述
    在这里插入图片描述

    //拉取授权页面
    let APPID = '网页应用的appid'
    let REDIRECT_URI = encodeURIComponent('授权后跳转回的页面')
    location.href=`https://open.weixin.qq.com/connect/qrconnect?appid=${APPID }&redirect_uri=${REDIRECT_URI }&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect `
    

    appid:是应用的唯一标识。
    redirect_uri:授权登录后跳转回的页面,需要在微信开放平台配置授权回调域,用户使用微信帐号登录后,只能回调至该域名下的页面。要使用encodeURIComponent()进行编码,不能使用encodeURI(),因为如果是Vue项目并且使用的是hash模式的话,#后面的内容会丢失,导致报错:scope错误或没有scope权限。
    response_type:填code即可。
    scope:应用授权作用域,网页应用目前仅填写snsapi_login即可。
    state:非必填,用于保持请求和回调的状态,授权请求后原样带回给第三方。

  2. 用户扫码,会弹出授权弹框,确认授权后,微信会自动跳转到回调地址redirect_uri,并通过?的形式拼接相关回调参数。
    在这里插入图片描述

  3. 提取出code传给后端,后端接口会返回网页授权access_token和其他一些用户信息。

    //获取url中的search
    let search = location.search.slice(1);
    let arr = search.split("&");
    let result = {};
    arr.forEach(function(item){let itemArr = item.split('=');result[itemArr[0]]=itemArr[1];
    })if(result.code){//调用后端接口getUserInfo();
    }
    

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

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

相关文章

电脑wifi只能微信聊天但是不能打开百度上网

问题描述:WiFi手机可以连接,电脑上也能连接,可以微信聊天,但是不能浏览器上网,显示域名解析错误。 背景:小编过了年回来上班后,发现公寓里的无线网在电脑上无法访问互联网,就非常的纳闷。首先我…

高级程序员和新手小白程序员区别你是那个等级看解决bug速度

IT入门深似海 ,程序员行业,我觉得是最难做的。加不完的班,熬不完的夜。 和产品经理,扯不清,理还乱的宿命关系 一直都在 新需求-做项目-解决问题-解决bug-新需求 好像一直都是这么一个循环。(哈哈哈)我觉得一个好的程序…

微软Office Plus吊打WPS Office?不一定,WPS未来被它“拿捏”了

微软Office Plus吊打WPS Office? 微软的Office是一款非常强大的软件。不仅仅在办公领域中能给我们带来便利,在娱乐和生活的各个方面的管理也能带来很多便利。 当然,作为国产办公软件的排头兵WPS与微软Office的抗衡已经有长达30多年&#xf…

百度的文心一言 ChatGTP 的对比

同样的5个问题,让百度的“文心一言”与ChatGPT来回答,两者区别在于,前者是就坡下驴的“傻瓜”式回复,后者是细思极恐的AI脱口秀。抛开高下立判不谈,尽管百度十年磨一剑专攻人工智能,但和国外的AI产业相比&a…

毕业写论文不要傻傻的到中国知网CNKI充值了,分享几个常用的写论文必备的网站!

我把这 7 个工具,发给了毕业两年的学姐!看完学姐都懵了,说:早知道有这么好的资源,当年在学校写毕业论文也不会那么痛苦了! 1、搜论网 找学术论文,就上搜论网 www.soolun.com为老师、学生、媒…

【快速写好毕业论文】你不得不知晓的七个常用文献搜索平台

本篇推文共计2000个字,阅读时间约3分钟。 01 引言 又是一年的毕业季,毕业论文成为了大多数同学们难以逾越的屏障。 毕业论文存在以下特点: 章节多、页码多、图表多、文献多、编号多。 那么如何快速写好毕业论文,安稳度过学生阶段最…

大数据时代,我竟然在用Excel和SPSS做数据分析,真香!

目录 写在前面概述什么是统计?统计.计算机与统计软件(重点)变量及其分类数据收集 第二章问卷的组成和结构几种典型的问卷题型: 第三章:数据的录入和清理数据的录入数据的清理3.4在Excel中核对数据建立调查问卷的SPSS数据文件 第4章单变量的一维频率分析利用SPSS对单选题进行一…

教你接入Midjourney,不用梯子也能玩

1、效果 话不多说,先上最终出图效果, 我给的关键词是一只白色的猫 2、接入流程 API文档可以来这里查(可以白嫖100次midjourney出图和10次gpt4体验),我这里精简一下接入流程,方便大家快速接入 2.1、文字生…

超级编程AI登上Science封面!AlphaCode编程大赛卷趴一半程序员

【导读】在编程比赛中达到人类水平的AlphaCode,再登Science封面。 这个12月,正当OpenAI的ChatGPT势头正旺时,那个曾经卷趴一半程序员的AlphaCode登上Science封面了! 论文链接:https://www.science.org/doi/10.1126/sc…

斯坦福2023【FrugalGPT】减少大模型的商业化应用成本

文章目录 主要解决问题采用什么方法Prompt adaptationLLM approximationLLM cascade 实验结论讨论与展望 FrugalGPT: How to Use Large Language Models While Reducing Cost and Improving Performance 主要解决问题 这篇文章主要是要解决如何降低调用大语言模型的成本(Chat…

智见|黄铁军:未来的大模型生态中将会只有少数赢家

2023智源大会可谓群星璀璨。中外200余位人工智能顶级专家参会,人工智能领域最关键的人物、机构悉数亮相。 全面、专业、前沿,会场上大咖们观点激荡、多元碰撞,会场下观众们兴奋异常、座无虚席。 会上,北京智源人工智能研究院院长黄…

开放丨Kaldi语音识别理论与实践

语音识别是一门涉及数字信号处理、人工智能、语言学、数理统计学、声学、情感学及心理学等多学科交叉的科学。这项技术可以提供比如自动客服、自动语音翻译、命令控制、语音验证码等多项应用。近年来,随着人工智能的兴起,语音识别技术在理论和应用方面都…

【语音之家】AI产业沙龙—VoxSRC-22说话人识别挑战赛快商通方案介绍

由CCF语音对话与听觉专委会 、中国人工智能产业发展联盟(AIIA)评估组、快商通、语音之家、北京希尔贝壳科技有限公司共同主办的【语音之家】AI产业沙龙—VoxSRC-22说话人识别挑战赛快商通方案介绍,将于2022年10月9日18:30-19:30线上直播。 沙…

说话人识别(speaker Recognition/Verification)简介

1.分类 2.研究方向 说话人识别研究方向主要有三个: 语音信号参数化:即提取音频特征spectral features,目前主流研究都采用MFCCs系数,以及其Δ和ΔΔ系数(即时间上的一阶导数和二阶导数)。什么是MFCC系数以及如何提取可以看这个…

听障人士亲述:我们在VRChat用手语交流,成员规模5000人

如果你在B站上搜索VRChat,排在前面的热门视频几乎都是与老外聊天的内容。除了练习语言、交文化流外,你还能在VRChat上遇到不少哇哇乱叫的小孩。作为一款VR社交应用,除了有趣的小游戏外,说话聊天也是VRChat关键的玩法之一。 而有这…

AI应用系列--- Talking Photo 会说话的照片

利用HeyGen的服务可以生成有趣的Talking photo,方法有二: 1、访问HeyGen - AI Video Generator 网站,登录后即可根据提示或者案例生成talkingphoto 2、是使用HeyGen的Discord​​​​​​机器人 Discord​​​​​​机器人:http…

php 判断国际手机号码格式,国际短信验证码接口_国际验证码接口_国际短信API接口_国际短信API文档_...

国际短信 国际验证码API接口文档下载: 点击下载 1、概要 1.1 文档说明 本文档主要提供给达信通的用户对接接口的使用说明,开发者可以利用达信通提供的 HTTP 接口,调用达信通的国际验证码服务。 1.2 接口内容 本文档包含国际短信发送、余额查…

kaptcha制作验证码的方法

com.github.axet.kaptcha制作验证码的方法 导入jar包com.github.axet生成法 ①导包 <!-- 验证码 --><dependency><groupId>com.github.axet</groupId><artifactId>kaptcha</artifactId><version>0.0.9</version></depend…

kaptcha 验证码使用

本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/49800115 未经博主允许不得转载。 博主地址是&#xff1a;http://blog.csdn.net/freewebsys 1&#xff0c;关于 验证码是做互联网必须做的。 目前都是用的第三方库。Kaptcha已经迁移到github项目了。 …

使用kaptcha生产纯数字验证码

使用kaptcha生产纯数字验证码录 1引入依赖2编写容器配置类3生产验证码工具类4控制层逻辑5登陆页面设置6 访问你的登录接口测试 1引入依赖 <!-- 验证码 依赖--><dependency><groupId>com.github.axet</groupId><artifactId>kaptcha</artifactI…