h5页面微信授权
1.需要一个公众号,网页开发时的微信授权,首先公司要开通一个公众号,然后需要配置相关的东西:
2.微信网页授权:用于获取用户针对于公众号的唯一标识openid。但只能添加一个域名,通常把它设置为一级域名。网页授权回调域名,首先,在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加 http:// 等协议头;其次,授权回调域名配置规范为全域名,比如需要网页授权的域名为:www.qq.com,配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com无法进行OAuth2.0鉴权;最后,如果公众号登录授权给了第三方开发者来进行管理,则不必做任何设置,由第三方代替公众号实现网页授权即可。
3.JS接口安全域名:分享到朋友圈(js-sdk)时用上,此接口要求将当前的界面url加密后,才可以分享到朋友圈,需要调用微信分享功能的时候就需要配置这个域名。登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,一般JS接口安全域名跟网页授权回调域名是一致的。
4:授权获取code
const getCodeByRedirectToWx = () => {
const next = encodeURIComponent(window.location.href);
const redirectUrl = `${getUrlConfig().wxAuthCallbackUrl}?next=${next}`;
const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx689521122b4e4734&redirect_uri=${encodeURIComponent(
redirectUrl
)}&response_type=code&scope=snsapi_userinfo&state=qw-course#wechat_redirect`;
window.location.href = url;
};
|参数 是否必须 说明
appid 是 公众号的唯一标识
redirect_uri 是 授权后重定向的回调链接地址,请使用urlencode对链接进行处理
response_type 是 返回类型,请填写code
scope 是 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息)
state 否 重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节
#wechat_redirect 是 无论直接打开还是做页面302重定向时候,必须带此参数
其中getUrlConfig().wxAuthCallbackUrl
返回的是不同环境下的一个域名地址
走getCodeByRedirectToWx方法会让微信网页弹出一个授权框,用户授权之后,得到的是原地址后面加一个code参数
获得code之后,可以调取后端接口,后端返回用户的token,如果token为空则跳往用户注册页面
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Blazor Hybrid适配到HarmonyOS系统
· Obsidian + DeepSeek:免费 AI 助力你的知识管理,让你的笔记飞起来!
· 解决跨域问题的这6种方案,真香!
· 分享4款.NET开源、免费、实用的商城系统
· 一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库