ajax 微信code获取_ajax实现微信网页授权登录-程序员宅基地

技术标签: ajax 微信code获取  

码农公社  210.net.cn  210是何含义?10月24日是程序员节,1024 =210、210既

210

之意。

因为项目采用前后端完全分离方案,所以,无法使用常规的微信授权登录作法,需要采用 ajax 实现微信授权登录。

本案例采用的是 EasyWeChat ,所以实现的方式是基于EW的。

在实现之前,了解一下微信授权的整个流程。

>引导用户进入授权页面同意授权,获取code

>通过code换取网页授权access_token(与基础支持中的access_token不同)

>如果需要,开发者可以刷新网页授权access_token,避免过期

>通过网页授权access_token和openid获取用户基本信息(支持UnionID机制)

说白了,前端只需要干一件事儿,引导用户发起微信授权页面、得到code、跳转到当前页面、再请求后端换取用户以及其他相关信息。

功能实现

引导用户唤起微信授权确认页面

我们需要做两件事:去配置jsapi域名、配置微信网页授权的回调域名

构建微信授权的ur:

"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

咱们看到有两个变量,appId,以及 redirect_uri。

appId 不用多说,就是咱们将要授权的微信公众号的appId,另一个回调URL,其实就是我们当前页面的URL。

用户微信登录授权以后回调过来的URL 会携带两个参数 ,第一个是code,另一个就是 state。

我们需要做就是将code获取到然后传给后端,然后通过code 获取用户基本信息。

后端得到code以后,获取用户基本信息,并返回相关其他信息给前端,前端获取到然后做本地存储或者其他。

function getUrlParam(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

var r = window.location.search.substr(1).match(reg);

if (r != null) return unescape(r[2]);

return null;

}

function wxLogin(callback) {

var appId = 'www.210.cx';

var oauth_url = 'www.210.cx/oauth';

var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"

var code = getUrlParam("code");

if (!code) {

window.location = url;

} else {

$.ajax({

type: 'GET',

url: oauth_url,

dataType: 'json',

data: {

code: code

},

success: function (data) {

if (data.code === 200) {

callback(data.data)

}

},

error: function (error) {

throw new Error(error)

}

})

}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_31858171/article/details/112052852

智能推荐

区块链的应用_传统证明体系受权威机构人为影响较大-程序员宅基地

文章浏览阅读3.4k次。一,资产及其区块链化1,资产的核心要素包括:控制权,价值,流动性。2,传统资产管控体系与模式存在问题:资产所有权失控流动性缺失品质保证依赖品牌供需失衡区块链与传统信任,物联网的有机结合,可解决区块链链上资产与链下资产的一一匹配。二,商业模式与区块链三,区块链存证传统证明体系具有如下问题:1,受权威机构人为影响较大2,假证泛滥3,证明成本较高4,防伪成本高,携带不便。5,假冒,借用。区块链存证具有:防伪性,便捷性,低廉性,安全性的优点。区_传统证明体系受权威机构人为影响较大

坎坎坷坷的深度学习之路(三)-Hello world(2)-------MNIST数据集1-MNIST格式_mnist-1, mnist-2, mnist-3-程序员宅基地

文章浏览阅读358次。上一次说了些来自官网,无聊透顶的tf介绍,这次开始研究MNIST。识别之前先来关注一下MNIST的文件格式。MNIST的数据集可以从 官网 处下载,一共包含4个文件(点击下面的文件名可直接下载)train-images-idx3-ubyte.gz: training set images (9912422 bytes) train-labels-idx1-ubyte.gz: tr_mnist-1, mnist-2, mnist-3

Linux修改用户名(主机名)-程序员宅基地

文章浏览阅读1.2k次,点赞2次,收藏7次。centos 7修改方式:hostnamectl set-hostname james_bobo reboot 或者直接vi /etc/hostname添加内容:james_bobo 检查修改效果

(五)比赛中的CV算法(上)cv基础知识和opencv的api-程序员宅基地

文章浏览阅读5.6k次,点赞18次,收藏64次。5.比赛中的CV算法讲了这么多,视觉组的重头戏——算法终于来了。在大部分时候我们都不需要设计底层的算法,而是直接调用封装好的API,设计更具体的应用于特定问题的算法。当然,有必要了解一下造轮子(底层算法的实现)的过程,这能够让我们深入理解算法内部的构造,从而更好地使用这些算法,出错的时候也能更快定位问题。如果只是调用API而不了解原理,那么只是简单的缝合+搭积木,对于提升自我的思考能力和逻辑思维没有任何帮助。应当要有“使用科技的黑箱会使我惶惶不安” 的觉悟。我们最常用的OpenCV和一些神经网_cv算法

串行队列_get_main_queue是串行队列吗-程序员宅基地

文章浏览阅读506次。NSLog(@"1"); dispatch_sync(dispatch_get_global_queue(0, 0), ^{ NSLog(@"2"); }); NSLog(@"3");运行后正常输出,1,2,3NSLog(@"1"); dispatch_sync(dispatch_get_main_queue(), ^{ ..._get_main_queue是串行队列吗

git出现无法推送 refs 到远端。您可以试着运行“拉取”功能,整合您的更改。-程序员宅基地

文章浏览阅读6.3k次。原因:本地和远端提交文件出现冲突解决:1.撤回提交记录2.pull下来文件3.查看报错冲突文件,不重要的就删掉自己的git修改记录,达到不冲突的效果

随便推点

利用LNMP环境搭建属于自己的第一个个人博客_lnmp部署个人博客网站,要求提交个人博客首页在线-程序员宅基地

文章浏览阅读600次。利用LNMP环境搭建属于自己的个人博客一.引子:相对与LAMP,LNMP环境搭建就显得简单的多了,其中不同便是Apache和Nginx服务的不同,接下来笔者会重点整理我们网络服务的重点Apache和Nginx服务。现在让我们愉快地搭建属于我们的第二个技术博客吧。记得准备换下面环境的软件哦,可以去官网下载,我们还是进行源码包安装。二.搭建博客第一步:Nginx 安装:1.下载LNMP镜像:rz -e2.创建挂载目录:mkdir /mut/iso -p3.挂载:mount -o loop L_lnmp部署个人博客网站,要求提交个人博客首页在线

《深入理解C++11》笔记–右值引用:移动语义和完美转发_深入理解c++11 is_lvalue_reference-程序员宅基地

文章浏览阅读5.4k次,点赞9次,收藏56次。上一篇:《深入理解C++11》笔记–构造函数 这篇文章介绍的了第三章中右值引用相关的内容。在介绍该内容之前,会对一些相关问题进行解释,便于理解后面的内容。 指针成员和拷贝构造 当一个类中含有指针成员时,由于默认的拷贝构造函数只会进行浅拷贝,所以当我们写出一下代码时:class Base{public: Base():data(new int(0)){} //Base..._深入理解c++11 is_lvalue_reference

华南X79 在Windows server 2022下HyperV启用 SRIOV_hyper sriov-程序员宅基地

文章浏览阅读195次。华南X79 在Windows server 2022下HyperV启用 SRIOV_hyper sriov

SLO 落地方案:VALET_google valet模式定义slis指标集; valet : volume、availabili-程序员宅基地

文章浏览阅读1.4k次。1、VALET 定义1.1 容量(流量,Volume)服务可以处理多少业务量?处理的记录数量1.2 可用性(Availability)服务是否在需要时可用?在一定时间内完成工作的频率(百分比)1.3 延迟(Latency)在使用服务时,它是否快速响应?任务运行所需的时间1.4 错误(Errors)在使用服务时,是否会出错?无法处理的记录1.5 工单(Tickets)该服务请求是否需要人工干预才能完成?操作员必须手动修复数据和重新处理任务的次数2、SLO 落_google valet模式定义slis指标集; valet : volume、availability、latency、error

网页宽度自动适应手机屏幕宽度的方法_怎么让width设置为800px在手机上显示完整-程序员宅基地

文章浏览阅读10w+次,点赞10次,收藏34次。在网页的中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。其中:width=device-width :表示宽度是设备屏幕的宽度initial-scale=1.0:表示初始的缩放比例minimum-scale=0.5:表示最小的缩放比例maximum-scale=2.0:表示最大的缩放比例user-scalable=yes:表示用户是否可以调整缩放比例 如果_怎么让width设置为800px在手机上显示完整

FPGA-超声波避障小车(ego1)_ego1测距-程序员宅基地

文章浏览阅读4k次,点赞11次,收藏65次。基于FPGA的超声波避障小车,利用ego1的100HZ时钟,我们可以自己定义不同占空比的PWM来控制电机的转速和舵机的角度,我们可以通过自己写计时器获得超声波来回所需的时间来测量距离,根据距离的远近返回来控制电机的转速以及舵机转动的角度,我们也可以加上openmv识别色块的功能,来模拟小车识别红绿灯控制小车的出发和停止。结合以上描述,我们可以通过FPGA来实现一个颜色控制启动和停止的利用超声波测距来避障的小车。如下图根据项目任务要求,我们可以大致把目标任务分为以下几点:1.利用计数..._ego1测距