H5 授权微信第三方登录

Posted 2023-05-07

参考技术A 第一步：拉授权页面进行微信登录

let pages = 'https://open.weixin.qq.com/connect/oauth2/authorize?

appid='+自己的appid+'&redirect_uri='+授权登录后返回的页面+'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'

//我是用的非静默授权，snsapi_userinfo 需要用户手动同意

window.location.href = pages;

第二步：获取页面返回的code

//这个是解析url参数的方法

var getRequest = function()

var url = window.location.search;

var theRequest = new Object();

if (url.indexOf("?") != -1)

var str = url.substr(1); //获取url中"?"符后的字串 

var strs = str.split("&");

for (var i = 0; i < strs.length; i++)

theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);





return theRequest;



//判断url中是否有code

if(getRequest.code)

// H5获取微信accesstoken

this.getWxAccessToken(getRequest.code);



第三步：  通过code换取网页授权access_token(这些步骤后端会处理 前端只需要调用后端的一个接口)

会返回 openid，通过openid登录就好了

微信第三方登录与静默授权和非静默授权

微信的授权登录在日常应用中应用的非常广泛，最多就是第三方登录

微信登录分为两类：授权登录（非静默授权）与静默授权

授权登录：需要用户确认登录，这样可以通过用户的个人确认，获取用户全面的信息，无论是否关注相关微信公众号等都可以获取。

静默授权不需要用户确认，只需要用户访问某个网页，属于嵌套在普通网页里的授权形式，但是只能获取到用户的唯一标示openid，无法获取用户的个人信息，对于用户的简单认证还是很有用的。