js 微信公众号网页用户授权,获取微信code,access_tocken,用户信息
第一次做微信网页授权,过程有点艰难,主要是不知道redirect_uri的地址要怎么写,刚开始我以为就是授权结束后要跳转到的首页地址,于是写成了uri = 'http://18i194c049.iask.in/credit/ProfessionalCredit/html/homePage.html'这种形式的,结果到了授权页面一直就弹出授权界面,像个死循环,后来想想应该是重定向url没写对以至于code没法传给后台换取不到access_token,所以一直循环弹出授权界面,最后请教大佬终于明白了,这个地址很重要,写你当前访问的页面的 href,因为点击同意授权后他会拼接?code='123456789'&href='www.baidu.com'等一些参数回来页面将跳转至 redirect_uri/?code=CODE&state=STATE页面,才能传给后台code换取access_token,登录成功。
具体过程请阅读微信公众号开发者文档,就不详细说了https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
直接上前端代码:
(function () {
var href = location.href;
if(href.indexOf("code=") === -1){ //如果没有code参数就直接调用授权函数
get_weixin_code_login();//调用授权函数
}else{ //如果有拿取code值
getUrlCode();
var local = window.location.href;
this.code = this.getUrlCode().code;
alert(this.code);
if (this.code == null || this.code == '' || this.code == 'undefined') {
window.location.href = url;
}
getWxUserInfo(this.code);
}
})();
function get_weixin_code_login() {
var uri = window.location.href;
var appid = '**************';//自己公众号的appid
var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' +
encodeURIComponent(uri) + '&response_type=code&scope=snsapi_userinfo&state=54321#wechat_redirect';
window.location.href = url;
// 这里走完就是已经授权了。如果授权了就会url中带有code
}
//获取url参数
function getUrlCode() {
var url = location.search;
this.winUrl = url;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
}
}
return theRequest;
}
/**
* 授权后获取用户的基本信息
*/
function getWxUserInfo(coDe) {
mui.ajax({
type: "post",
url: 'http://18i194c049.iask.in/credit/caf/Verification/rz.do',
async: false,
data: {
code: coDe,
},
headers: {'Content-Type': 'application/json'},
dataType: "json",
//jsonp: "jsoncallback",
success: function (data) {
console.log("success : " + data);
alert('授权成功');
},
error: function () {
alert('授权失败');
}
});
};
js 微信公众号网页用户授权,获取微信code,access_tocken,用户信息的更多相关文章
- JAVA微信公众号网页开发——生成自定义微信菜单(携带参数)
官网接口地址:https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Creating_Custom-Defined_Menu.ht ...
- 你所误解的微信公众号开发、以及微信公众号网页授权、接收url跳转参数等问题
前言:有一星期没跟新博客了,最近太忙.项目赶进度就没把时间花在博客上:今天来说说所谓的微信公众号开发和填坑记录: 微信公众号:运行在微信终端的应用 (对于开发者来说比较爽的你只需考虑兼容微信浏览器,因 ...
- Java开发微信公众号(一)---初识微信公众号以及环境搭建
ps:1.开发语言使用Java springMvc+Mybaits+spring maven实现 2.使用微信接口测试账号进行本地测试 https://mp.weixin.qq.com/debug/c ...
- 微信公众号网页授权获取用户openid
最近一个项目是在微信公众号内二次开发,涉及到微信公众号支付,根据文档要求想要支付就必须要获取到用户的openid. 这是微信官方文档https://mp.weixin.qq.com/wiki?t=re ...
- JAVA微信公众号网页开发 —— 用户授权获取openid
官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842 HttpClientUtil.java packa ...
- JAVA微信公众号网页开发——获取公众号关注的所有用户(微信公众号粉丝)
package com.weixin.sendmessage; import org.apache.commons.lang.StringUtils; import org.apache.http.H ...
- 微信公众号网页授权登录--JAVA
网上搜资料时,网友都说官方文档太垃圾了不易看懂,如何如何的.现在个人整理了一个通俗易懂易上手的,希望可以帮助到刚接触微信接口的你. 请看流程图!看懂图,就懂了一半了: 其实整体流程大体只需三步:用户点 ...
- 微信 公众号 小程序 授权 unionid 用户信息 实验总结
-*-*-*-*-*-*-*-*-*--*-*-*-1.小程序通过code获取用户openid的接口,如果用户曾经授权并未过期,或者用户关注过同主体的公众号,会带回unionID,但没有用户头像等信息 ...
- 微信公众号开发《三》微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索
本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与 ...
随机推荐
- shell脚本特殊变量与变量子串相关知识
一.shell脚本特殊变量 1.shell中常用特殊位置变量说明: $0 获取当前执行的shell脚本的文件名,如果执行脚本包含了路径,那么就包含了脚本路径 $n 获取当前执行的shell脚本的第n个 ...
- spring-boot整合Mybatis多数据源案例
1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址 https://github.com/nbfujx/springBo ...
- 重新调整动态vhdx占用的空间
优化vhd:https://docs.microsoft.com/en-us/powershell/module/hyper-v/optimize-vhd?view=win10-ps 1. 弹出vhd ...
- 弗洛伊德Floyd求最小环
模板: #include<bits/stdc++.h> using namespace std; ; const int INF = 0xffffff0; ]; void Solve(in ...
- Intel processor brand names-Xeon,Core,Pentium,Celeron----Xeon
http://en.wikipedia.org/wiki/Comparison_of_Intel_processors Processor Series Nomenclature Code Name ...
- PAT 2019-3 7-4 Structure of a Binary Tree
Description: Suppose that all the keys in a binary tree are distinct positive integers. Given the po ...
- spark streaming 笔记
spark streaming项目 学习笔记 为什么要flume+kafka? 生成数据有高峰与低峰,如果直接高峰数据过来flume+spark/storm,实时处理容易处理不过来,扛不住压力.而选用 ...
- [Python]判断序列是否为空的正确姿势
本篇文章起源于StackOverflow上一个热度非常高的问题: 我该如何判断一个Python列表是否为空? @Ray Vega (提问者) 举例说明,现在我得到了如下代码: a = [] 我如何该检 ...
- vue中给请求来的数据List ,添加属性false 后,赋值不上问题解决办法
data() { return { list:[ // 添加属性fale 后的值 ], // 测试数据 goList:[ { name:'张三', phone:'18621958665' }, { n ...
- mySQL学习入门教程——4.内置函数
四.内置函数: 包括了字符串函数.数值函数.日期函数.流程控制函数.其他函数(获取数据库信息)... 一.字符串函数[比较常用,需要掌握]1. concat(s1,s2,...,sn) #把传入的 ...