公众号平台的H5实现微信授权登录

微信给开发者提供的测试账号平台：https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
微信开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

需要先关注公众号，否则跳转授权页面后会提醒未关注该公众号。

步骤：

引导用户打开如下页面（例如：可通过点击按钮操作触发）：
```
let APPID = '公众号的appid'
let REDIRECT_URI = encodeURIComponent('授权后跳转回的页面')
let SCOPE = 'snsapi_userinfo'
location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=${SCOPE}&state=STATE#wechat_redirect `
```
appid：公众号的唯一标识。
redirect_uri：授权后重定向的回调链接地址，要使用encodeURIComponent()对其进行编码处理。
response_type：返回类型，填写code即可。
scope：应用授权作用域。snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid）；snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）。
state：非必须，重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节。
#wechat_redirect：无论直接打开还是做页面302重定向时候，必须带此参数。

如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE；拿到code传给后端获取用户信息；

//获取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();
}

常见问题：

一般情况下是授权回调地址和授权回调页面域名不匹配导致的。

公众号平台的H5实现微信授权登录相关推荐

关于微信公众号页面获取code进行微信授权登录
关于微信公众号页面获取code进行微信授权登录前言提示:本文章为个人平时开发中的一些坑,对于新手可以耐心看一下,如果您感觉可以的话,请点个小星星再走吧,多谢了~~~ 提示:以下是本篇文章正文内容( ...
微信公众号前后端分离项目网页授权登录问题
问题描述微信公众号网页授权登录,因为是前后端项目,所以跳转是在前端做的,所以回调地址配置的是前端页面地址,例如:xxx/callback?redirect_url=需要登录才能访问的页面地址,问题发 ...
php实现微信网页授权登录界面,微信公众号前后端分离实现网页授权登录
开发语言后端:thinkphp5+easywechat3+php-jwt 前端:html 实现思路需要授权登录页面,在页面加载完成时,判断是否登录,如果未登录访问后台授权登录链接前端代码(主要j ...
H5页面微信授权登录——前端部分
作为一枚刚刚学习前端的小萌新来说,真的是难到了我,后来翻阅无数资料,总结如下,记录下来防止自己忘了,也为其他的刚学习的朋友一点提示吧. 首先说路由导航,把所有的访问地址先拦下来进行判断,新来的用户是否 ...
点击微信公众号菜单按钮跳转网页授权登录
流程: 用户点击菜单按钮 -–> 发送页面授权请求到微信后台 -–> 得到 code 发送到我们服务器后台的url -–> 将 code 参数发送到微信后台获取用户的openid返 ...
h5获取微信授权登录
1.判断是否有code---没有跳转到微信官方网址网址中的参数参考微信公众平台官网----网页授权 | 微信开放文档 (qq.com) getCode() { //微信网页授权返回codelet ...
uniapp - 超详细的 H5 公众号网页微信登录示例代码，提供从 0-1 公众号配置及详细注释代码（站在新手小白的角度）第三方微信授权登录的实现！！
介绍目前示例是 "点击按钮登录",你也可以改为 "一进页面就登录" ,可随意改造. 百度的教程都太乱了,而且功能都有一定问题.本文主要讲解 uniapp H5 ...
微信公众号平台接口开发：发送客服消息
官方接口介绍发送文本信息参数有4个, access_token这个就不用介绍了,就是之前得到的那个AccessToken,就是在这个接口里边当中参数用的 touser是关注了公众号的微信用户的op ...
H5 微信授权登录功能实现
背景最近几周面试复习以前知识库,刚好博客从国外迁移到国内CSND,同步坐下笔记,梳理之前开发H5 微信授权登录功能获取用户信息数据. H5页面微信授权登录,使用微信官方JSSDK,微信网页授权较为复 ...

公众号平台的H5实现微信授权登录

步骤：

常见问题：

公众号平台的H5实现微信授权登录相关推荐

最新文章

热门文章