当前位置: 首页 > Web前端 > JavaScript

微信登录前端开发指南

时间:2023-03-27 13:25:57 JavaScript

使用场景微信公众号内嵌H5网页调用微信登录网页在微信浏览器调用微信登录接口详见微信登录官方文档链接地址功能思路后台先给开发者在微信上创建在提供的测试账号平台上申请,将前端开发同学的微信添加到该平台提供测试公众号,平台地址,组装前台微信登录所需的各种参数,跳转到页面微信指定获取连接的微信登录码参数。前台解析返回的链接,获取链接中的参数,将code参数传给后台。由于后面获取到的参数安全级别较高,后续操作均由后台完成,数据存储在服务器后台通过code参数交换access_token参数和openid参数,存储在后台服务器,然后通过access_token参数和openid参数交换用户的详细信息,将这两个步骤封装成一个接口供前台调用返回前端登录状态完成微信登录操作如果access_token参数失败,使用refresh_token刷新它。详细操作请参考文档。一般不需要前端代码这一步。APPID='公众号的appid';//授权后重定向的回调链接地址,使用encodeURIComponent()进行编码//!!!注意回调的域名必须先允许公众号安全域名加管理员,否则无法完成跳转varREDIRECT_URI=encodeURIComponent('授权后跳转的页面');//常量,返回类型,填入代码即可varRESPONSE_TYPE='code';//constant,applicationauthorizationscope//snsapi_userinfo(弹出授权页面,可以通过openid获取昵称,性别,位置。而且,即使用户不关心,只要用户授权,他的信息也可以获取)//snsapi_base(不弹出授权页面,直接跳转,只能获取useropenid)varSCOPE='snsapi_userinfo'||'snsapi_base';//重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节//除了这个是非必填参数,其他都是必填参数//笔记!!!该参数通常用于判断跳转前界面的功能,比如判断是微信首次登录还是授权的微信快速登录varSTATE='可自定义返回参数';//是否直接打开做302页面跳转时,必须带'#wechat_redirect'参数//由于授权操作的安全级别比较高,在发起授权请求时,微信会进行正则强匹配校验在授权链接上,如果链接的参数顺序错误,将无法正常访问授权页面。${SCOPE}&state=STATE#wechat_redirect`;}2.解析参数functionparseData(){//拦截地址栏后面的内容?varsearch=location.search.slice(1);//使用&标识符被拆分成一个数组vararr=search.split('&');//将数组转换为对象并返回它varresult={};arr.forEach(function(item){varitemArr=item.split('=');result[itemAr[0]]=itemArr[1];});}3.代码传到后台,经过后台完成微信登录后续操作,返回登录状态提示前端登录成功还是失败,然后前端继续后续业务逻辑我是fx67ll.com代码编写。如果您发现本文有任何错误,欢迎在评论区讨论和指正。感谢您的阅读!如果您喜欢本文,欢迎访问我本文的github仓库地址,并为我点个Star,谢谢~:)转发请注明参考文章地址,万分感谢!!!