微信授权、获取用户openid-纯前端实现——jsonp跨域访问返回json数据会报错的纯前端解决办法
近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活。
首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
接下来如果参数没错可以直接回到你redirect设置的url并且在后面加上了code,把url参数切割出来 拿到code,请求获取openid,ajax请求:
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
注:需要appid和秘钥 ,自行goodle或者去微信公众平台自己找。
那么问题来了 这么请求会跨域,我试过了get、post都不行,都会说你跨域 那怎么办?我想用jsonp尝试下:
但是出现了新的报错,返回的是json类型,不是jsonp类型,控制台报错,首先明确一个问题我们不可能去修改微信的官方代码,那么只好自己想办法了,后台还是不肯帮忙,只好去google看看怎么能解决,果然,功夫不负有心人,找到yahoo ypl的方式,尝试一下,成功。yahoo ypl如下:
还和上面一样,只是改成了yahoo的代理yql,至此成功拿到微信openid,说下每一步的意义吧:首先我们不可改变的是,
1:要在纯前端实现(后台不管只好自己想办法)
2:直接请求微信会说跨域,
3:jsonp会说返回值的问题
一步步解决,怎么获取微信的code,这个毕竟不是教微信的文章,自行去公众平台看
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
之后我们拿到code,再去jsonp请求微信的获取access_token(openid就这样就可以拿到,专业点说是获取用户信息),却发现返回值是个json,只要请求到了那就是想办法解决这个问题,于是引入ypl进行中转,ypl是雅虎旗下一个用来转换数据的,还有其他不明白的朋友可以加我qq:15274527。
附录:授权返回页面是这样:http://url.html?code=code&state=STATE
附上我的裁切函数,直接就可以拿到返回值,在使用使用通过.then(data=>{console.log(data)})就可以看了
export let splitQuery = () =>{
// 获取href的query
return new Promise((resolve,reject)=>{ const url = window.location.search;
var theRequest = new Object();
if (url.indexOf("?") != -) {
var str = url.substr();
var strs = str.split("&");
for(var i = ; i < strs.length; i ++) {
theRequest[strs[i].split("=")[]]=unescape(strs[i].split("=")[]);
}
} resolve(theRequest); }) }
转载请声明,严禁
微信授权、获取用户openid-纯前端实现——jsonp跨域访问返回json数据会报错的纯前端解决办法的更多相关文章
- 微信授权获取用户openId等信息
在我们开发小程序的时候,需要通过授权获取用户的信息. 第一种使用wx.getUserInfo直接获取微信头像,昵称 // 必须是在用户已经授权的情况下调用 wx.getUserInfo({ succe ...
- 微信授权获取用户openid前端实现
近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活. 首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url h ...
- 微信接口-获取用户openid基本信息
一.协助获取微信用户openid功能 https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri= ...
- 微信授权获取code/openid
微信网页授权 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权回调域名的说明 1.在微信公众号请求用户网页授权之前,开发者需要 ...
- 从前端和后端两个角度分析jsonp跨域访问(完整实例)
一.什么是跨域访问 举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容.如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.你可以理解为两个域名之间不能跨过域名来发送请求或者请 ...
- 微信公众号订阅号以及服务号通过网页授权获取用户openid方法
微信官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842 官方流程 网页授权流程分为四步: 1.引导用户 ...
- 微信h5静默和非静默授权获取用户openId和用户信息的方法和步骤:
原文链接:https://blog.csdn.net/qq_35430000/article/details/79299529 一.openId是什么?openId是用户在当前公众号下的唯一标识('身 ...
- 微信公众号网页授权获取用户openid
最近一个项目是在微信公众号内二次开发,涉及到微信公众号支付,根据文档要求想要支付就必须要获取到用户的openid. 这是微信官方文档https://mp.weixin.qq.com/wiki?t=re ...
- 微信网页授权获取用户openid及用户信息
$code = $_GET["code"];//获取code $appid=“xxxx”;//公众号appid $APPSECRET="xxx";//公众号ap ...
随机推荐
- H5学习之旅-H5的块标签的使用(9)
块元素的基本语法 1. Html块元素 ,块元素在开始时候通常以新行开始,比如h1,p,ul 2.内联元素,通常不会以新行开始,比如a,b,img 3.html的div元素,div也被称为块元素,其主 ...
- (十九)TableView的点击监听和数据刷新(Alert的多种样式) -tag传值的技巧
要实现监听,要使用代理,控制器要成为TableView的代理. 注意下面的方式是代理方法: - (void)tableView:(UITableView *)tableView didSelectRo ...
- (十三)UITableView数据模型化
多组数据的TableView的设计方法:每一组用一个模型对象表示. 模型包含了标题数据和行数据的数组,在控制器里包含模型的组来对各个模型进行初始化. 在tableView相应的方法中,从控制器的模型组 ...
- (NO.00001)iOS游戏SpeedBoy Lite成形记(三)
在Xcode中建立新类Player,继承自CCSprite.因为我们之后需要方便的更换玩家的大头贴,所以需要能够以不同的大头贴参数初始化Player对象. 不过别急,想想我们还需要在Player对象初 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(二) indigo tools
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Linux常用命令(第二版) --权限管理命令
权限管理命令 1.chmod[change the permissions mode of a file] : /bin/chmod 语法: chmod [{ugo}{+-=}{rwx}] [文件或目 ...
- cocos2D v3.x中动作回调函数的变化
cocos2D v3.x版本中的动作的回调函数不能再带任何参数并且不能返回任何值. 官方给出的传递参数的办法是: 选择器(selector)不能带有任何形参,选择器需要的参数必须通过ivar或prop ...
- C++中重载、覆盖与隐藏的区别(转)
本文摘自林锐博士的<高质量C++/C编程指南>. 成员函数的重载.覆盖(override)与隐藏很容易混淆,C++程序员必须要搞清楚概念,否则错误将防不胜防. 1.重载与覆盖 成员函数被重 ...
- Linux 获得机器的IP和网卡信息
Linux 获得机器的IP和网卡信息 代码来自于网络, 我改写了, 有美不敢自专, 特分享之.用法很简单,就3个函数. 头文件getmac.h: /** * getmac.h * * 2014-07- ...
- android EventBus详解(一)
EventBus 是一款针对Android优化的发布/订阅事件总线.主要功能是替代Intent, Handler, BroadCast 在 Fragment,Activity,Service,线程之间 ...