H5微信公众号授权的简单实现步骤
前言
昨天因为有一个项目上面需要实现h5微信授权工作。所以花了两个小时来完成这个功能。?
?
文章图片
开始工作前做的准备
流程说明【提前沟通过的流程】
【H5微信公众号授权的简单实现步骤】
文章图片
- 微信授权具有时效性,一段时间内授权之后,就不需要在重复点击确认。如果卸载微信重新安装,还是需要重新确认授权的。
- 不管是第一次确认授权还是授权之后,都可以通过微信服务器授权回调到我们的后端接口回调。
- 微信授权回调之后,会返回回调回来的code&state参数,后端可以通过code获取accessToken,然后通过accessToken获取用户信息
- 后端在接收到服务器回调之后,在回调到前端的时候存在两个主要的字段,isAuth代表是否授权,isBindFlag代表是否在我们系统当中已经注册登录。这里因为我们当前的系统需要用户授权注册,所以存在这两个字段。
- 准备好的域名 - 公安部备案的域名
- 端口号使用80端口
这里同一个域名,端口适配前后端IP,通过nginx统一代理处理。
?
文章图片
准备就绪开始工作
- 域名:http.xxx.cn
- 前端资源部署:http.xxx.cn
- 后端回调接口:http.xxx.cn/api/auth
域名配置
服务器根路径上传校验文件,不然域名配置保存不了。
文章图片
白名单配置
文章图片
书写代码
import React, { useEffect } from "react"; import { View } from "@tarojs/components"; export default () => {useEffect(() => {// 后端回调回来路径格式:http://xxx.cn/#/pages/webAuthorization?bindFlag=0&openid=xxxxxxxxxxx&unionid=null&isAuth=truevar isBindFlag = false, isAuth = false, opendId = '', paramsArray = []; /** 省略代码:地址判断,参数处理 赋值给isAuth, isBindFlag, openId*/ if (!isAuth) {// 未授权window.location.href=https://www.it610.com/article/`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${'xxxxxxx'}&redirect_uri=http://xxxxx/api/auth?response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`; } else if (!isBindFlag) {// 未注册window.location.href = 'https://www.it610.com/article/#/pages/login'} else {// 登录window.location.href = 'https://www.it610.com/article/#/pages/index'}}, []); return (); };
总结
到此这篇关于H5微信公众号授权的文章就介绍到这了,更多相关微信公众号授权内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 7.9号工作总结~司硕
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 我眼中的佛系经纪人
- mybatisplus|mybatisplus where QueryWrapper加括号嵌套查询方式
- 【欢喜是你·三宅系列①】⑶
- 员工的微信朋友圈是公司的宣传阵地吗()
- FBI怎么和恐怖分子谈判
- 17|17 关山松 第二课作业#公众号项目# D20
- 【70号】Day26朋友日
- 女生该不该用小号测试男朋友()