10黄页网站建设,大数据营销软件,wordpress 如何开发,怎样在建立公司网站公众号对接获取openid全历程 一、背景二、选型三、开始修改若依框架四、自己搭后端框架五、前端框架uni-app修改六、对接获取公众号登录用户openId七、总结 一、背景 老板接了朋友的一个公众号需求#xff0c;要求做一个简单的疫苗预约系统。功能是获取当前登录用户#xff0… 公众号对接获取openid全历程 一、背景二、选型三、开始修改若依框架四、自己搭后端框架五、前端框架uni-app修改六、对接获取公众号登录用户openId七、总结 一、背景 老板接了朋友的一个公众号需求要求做一个简单的疫苗预约系统。功能是获取当前登录用户记录用户选择的疫苗针次时间并且用户可以查看自己预约的记录。我刚接到这个需求感觉也简单给的时间呢也只有一周包括程序的开发服务的部署公众号相关信息的配置。虽然是个很小的功能没想到期间碰到过很多坑公众号也是我第一次全流程的做记录一下这期间的坎坷。 二、选型 一般接到这种小功能的开发我们一般会在开源框架市场找几个相似的项目然后修修改改达到甲方想要的使用预期。前三天基本都是浪费在选型这一块了本来也想着选好开源项目改起来也快最后敲定选用若依uni-app这款可没想到最后改了半天最后忍无可忍自己手写了一套后端前端代码框架当然用的还是springbootuni-app。。。 三、开始修改若依框架 若依这套框架也是典型的租户型框架uniapp启动后是一个登录界面而公众号要做默认登录是不要这个登录界面的那怎么跳过这个登录界面直接登录进去呢一开始想的是默认获取用户openid直接授权进去这就要对应的修改后端生成token的方式然后每一个页面访问的header还要携带这个token。 除此之外登录进去后才展示的业务界面还需要画一下那就先把页面画出来一共做了四个页面用户首页展示预约疫苗入口和用户预约记录用户信息维护点击预约疫苗后先维护自己的信息包括姓名身份证号手机号预约界面三个相互隐藏的栏位疫苗栏位针次栏位时间栏位疫苗说明界面。这里说一下微信公众号静默获取的信息只能获取到openIdunionid应该也可以获取我没试过。获取openId的过程后面会说明。这里让用户自己维护手机号和身份证号是因为可能会给长辈预约疫苗。 页面画完之后数据都是用的前端代码模拟的值流程无碍之后准备后端添加接口业务表是甲方直接提供使用的是sqlServer数据库若依用的数据库版本是mysql最后又找了一下找到了若依sqlserver版本的后端框架发现没法改主要还是认证这一个部分如果要改造认证这一部分又要花费很多工作时间改造过程中可能还会产生新的问题或者bug都是没法预估的不是说若依不好用只能说没必要用这种shiro认证框架太冗余了。 四、自己搭后端框架
不需要认证获取到当前登录用户的openID进行数据隔离和查询也可以保证数据的安全性。 新建一个springboot项目 删除多余的文件夹 修改pom.xml的一些配置和添加我所需要的maven依赖sqlSerer驱动mybatisplusspringboot启动的依赖自带的fastjsondruid数据池多数据源lombok当然hutool也要 dependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter/artifactId/dependency!-- 阿里JSON解析器 --dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.2.75/version/dependency!-- druid --dependencygroupIdcom.alibaba/groupIdartifactIddruid-spring-boot-starter/artifactIdversion1.2.4/version/dependency!-- 动态数据源 --dependencygroupIdcom.baomidou/groupIdartifactIddynamic-datasource-spring-boot-starter/artifactIdversion3.5.2/version/dependency!-- SqlServer 数据库连接包 --dependencygroupIdcom.microsoft.sqlserver/groupIdartifactIdsqljdbc4/artifactIdversion4.0/version/dependencydependencygroupIdcom.baomidou/groupIdartifactIdmybatis-plus-boot-starter/artifactIdversion3.4.1/version/dependencydependencygroupIdcom.baomidou/groupIdartifactIdmybatis-plus-core/artifactIdversion3.4.1/version/dependency!-- Lombok --dependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdcn.hutool/groupIdartifactIdhutool-all/artifactIdversion5.8.18/version/dependency/dependencies感觉又回到了刚学spring框架的那个时候了做项目基本用开源框架或者公司自己的产品框架开发很少自己搭spring项目了。 然后修改pom.xml的打包配置选项 buildfinalNameyuyue/finalNamepluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactIdconfigurationincludeSystemScopetrue/includeSystemScope/configuration/pluginplugingroupIdorg.apache.maven.plugins/groupIdartifactIdmaven-dependency-plugin/artifactIdexecutionsexecutionidcopy/idphasepackage/phasegoalsgoalcopy-dependencies/goal/goalsconfigurationoutputDirectory${project.build.directory}/lib/outputDirectory/configuration/execution/executions/plugin!--指定JDK编译版本 --plugingroupIdorg.apache.maven.plugins/groupIdartifactIdmaven-compiler-plugin/artifactIdversion2.3.2/versionconfigurationsource1.8/sourcetarget1.8/targetencodingUTF-8/encoding/configuration/pluginplugingroupIdorg.apache.maven.plugins/groupIdartifactIdmaven-surefire-plugin/artifactIdversion3.1.2/versionconfigurationskipTeststrue/skipTests/configuration/pluginplugingroupIdorg.apache.maven.plugins/groupIdartifactIdmaven-resources-plugin/artifactIdconfigurationnonFilteredFileExtensionsnonFilteredFileExtensionwoff/nonFilteredFileExtensionnonFilteredFileExtensionwoff2/nonFilteredFileExtensionnonFilteredFileExtensioneot/nonFilteredFileExtensionnonFilteredFileExtensionttf/nonFilteredFileExtensionnonFilteredFileExtensionsvg/nonFilteredFileExtension/nonFilteredFileExtensions/configurationversion3.1.0/version/plugin/pluginsresourcesresourcedirectorysrc/main/resources/directoryfilteringtrue/filtering/resourceresourcedirectorysrc/main/java/directoryincludesinclude**/*.xml/includeinclude**/*.json/includeinclude**/*.ftl/include/includes/resource/resources/build使用yaml配置文件配置内容如下 server:port: 8080servlet:context-path: /compression:enabled: truemin-response-size: 1024mime-types: application/javascript,application/json,application/xml,text/html,text/xml,text/plain,text/css,image/*spring:datasource:druid:stat-view-servlet:enabled: trueloginUsername: adminloginPassword: 123456allow:web-stat-filter:enabled: truedynamic:datasource:master:# 本地url: jdbc:sqlserver://localhost:1433;DatabaseNameLanshanusername: sapassword: root# mybatis plus 设置
mybatis-plus:mapper-locations: classpath*:com/yuyue/**/xml/*Mapper.xml# configuration:#关闭二级缓存默认开启# cache-enabled: false# log-impl: org.apache.ibatis.logging.stdout.StdOutImplglobal-config:# 关闭MP3.0自带的bannerbanner: falsedb-config:# 主键类型 0:数据库ID自增,1:该类型为未设置主键类型, 2:用户输入ID,3:全局唯一ID (数字类型唯一ID), 4:全局唯一ID UUID,5:字符串全局唯一ID (idWorker 的字符串表示);id-type: 4# 默认数据库表下划线命名table-underline: true# 配置逻辑删除logic-delete-field: deletedlogic-delete-value: 1logic-not-delete-value: 0# 这个配置会将执行的sql打印出来在开发或测试的时候可以用configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImplconfiguration-properties:# 配置流程引擎参数详情可见 DatabaseConfigurationblobType: BLOBboolValue: TRUE# 不要设置库名否则会出现双库名 bugprefix:
# Mybatis输出sql日志
logging:level:com.yuyue: debug然后就写相关的实体类mapperservicecontroller。 写完到这里就基本没问题了可以正常启动。
五、前端框架uni-app修改 前端框架虽然没有从0开始做还是用的若依的uniapp但是做了其他额外的工作量打开首页的页面修改成我的首页我所新加的页面都要在permission.js中排除掉要不然会重定向到首页。去掉若依下面的固定栏位。剩下的就是添加接口js文件然后在页面中将数据的获取方式从模拟值修改为访问后端接口返回。 这些都还是比较简单过程有点繁琐而已当前面都改完之后这个项目最大的难点来了就是openid的获取。根据微信官方文档所写获取openid分为两部分根据appid获取到微信返回回来的code然后根据code和appid和app密钥获取该用户的openId。需要公众号提供的参数如下 appIdapp密钥secret 以下介绍对接获取微信公众号登录用户openId的过程
六、对接获取公众号登录用户openId
前提以上程序开发完成并且配置到服务里面服务证书访问并申请开启域名访问。
首先需要公众号进行如下的一些配置和操作 配置网页授权域名 配置网页授权域名的时候保存的时候微信会校验一个文件如下图 下载上图提到的文件开启域名后需要同步开启80端口访问然后将文件上传到服务器80端口的根目录如果不知道根目录位置可以找一下nginx或者网站的配置项。域名填写的内容如下示例:www.xxx.com不用加前缀不用加端口号。然后点击保存如果提示域名活路径格式不正确说明你上传的文件放错位置了文件放上去之后确保访问www.xxx.com/上传文件名可以访问到。 公众号添加IP访问白名单 将服务器的外网ip填写进去即可。 提供公众号的appid和secret 绑定微信公众号的开发者微信号 作为开发人员如果不绑定这个东西就属于是隧洞摸黑前行永远也想不到有多少个坑在等你。 需要开发人员先关注该公众号然后将你的微信号提供出来在公众号中进行开发者绑定。
以上公众号的配置暂告一段落。
接下来程序开始修改获取openId。
程序修改后如何验证正确性以及中间过程访问的参数是否正确这个时候我们需要用到微信开发者工具 打开这个软件然后用绑定公众号开发者的微信号登录访问服务器部署的url就能看到调用的接口了做这种对接就不要想着本地调试了。唯一麻烦的只有每次修改完代码后需要将代码打包放在服务器然后解压。 根据appId获取微信返回回来的CODE 访问urlhttps://open.weixin.qq.com/connect/oauth2/authorize?appidAPPIDredirect_uriREDIRECT_URIresponse_typecodescopeSCOPEstateSTATE#wechat_redirect 需要修改的参数是APPIDREDIRECT_URI APPID就是以上公众号提供出来的appIdREDIRECT_URI是重定向结果的url这个重定向是微信官方那边做的我们不用管如何重定向需要注意的是重定向的url需要使用javaScript函数encodeURIComponent()进行编码 示例 redirectToAuth() {const redirectUri encodeURIComponent(https://www.xxx.cn)const authUrl https://open.weixin.qq.com/connect/oauth2/authorize?appidthis.appidredirect_uriredirectUriresponse_typecodescopesnsapi_basestateSTATE#wechat_redirectwindow.location.href authUrl;}// 访问后页面会刷新重定向为
// https://www.xxx.cn?CODExxxxxxxxx处理微信返回来的CODE 接下来要根据CODE和appid和secret获取到用户的openid记住这个过程一定要在后端完成不可在前端代码完成这个地方有坑差点被坑哭了(_)。使用前端返回openid接口会提示跨域异常没有返回数据。 首先获取url中的CODE参数 const code (new URLSearchParams(window.location.search)).get(code)接下来发起后端调用我这里使用hutool的http工具访问如下示例 访问urlhttps://api.weixin.qq.com/sns/oauth2/access_token String resultOpen HttpUtil.get(https://api.weixin.qq.com/sns/oauth2/access_token? appid appid //公众号IDsecret secret//公众号密钥code code //前端 传入 codegrant_typeauthorization_code);
JSONObject jsonObject JSONObject.parseObject(resultOpen);
if (jsonObject.containsKey(errcode)) {String s codeMap.get(code);if(StrUtil.isBlank(s)) {return Result.error(resultOpen);}else{return Result.ok(s);}
}
openId jsonObject.get(openid).toString();正常返回的参数如下 {access_token:ACCESS_TOKEN,expires_in:7200,refresh_token:REFRESH_TOKEN,openid:OPENID,scope:SCOPE,is_snapshotuser: 1,unionid: UNIONID
}错误返回的参数如下 {errcode:40029,errmsg:invalid code}当我们正确拿到这个openid就可以为所欲为了(不是)就可以正常进行后续的业务操作了。 最后让客户将我们项目的访问链接配置在公众号的菜单就可以啦
七、总结
真正开发的时间其实是从周五下午开始期间我还在忙另一个正在上线的项目。这个功能虽然要求不多但是涉及到对接期间的坑属实不少看着网上一篇有一篇的攻略却总是抓不住要点就openid要后端才能获取这个很多网上教程说直接用前端代码获取可能之前可以但是现在不行了。客户下周一验收此功能可以算得上3天搞定一个公众号对接案例涉及到对接微信的东西不多只有一个获取用户openid这一个小东西就能碰到很多坑。
经过这次项目可以看得出制定方案选型有多么重要真正干活其实方向对了很快就出活了如果方向不对比如这次公众号开发就是要改造若依框架可能2周都出不来。
