• 售前

  • 售后

热门帖子
入门百科

H5微信公众号授权的简单实现步调

[复制链接]
忆困血馆闻 显示全部楼层 发表于 2021-8-14 13:48:55 |阅读模式 打印 上一主题 下一主题
媒介

昨天由于有一个项目上面需要实现h5微信授权工作。以是花了两个小时来完成这个功能。​

开始工作前做的准备

流程阐明【提前沟通过的流程】

       
  • 微信授权具偶然效性,一段时间内授权之后,就不需要在重复点击确认。如果卸载微信重新安装,还是需要重新确认授权的。   
  • 不管是第一次确认授权还是授权之后,都可以通过微佩服务器授权回调到我们的后端接口回调。   
  • 微信授权回调之后,会返回回调返来的code&state参数,后端可以通过code获取accessToken,然后通过accessToken获取用户信息   
  • 后端在吸收到服务器回调之后,在回调到前端的时间存在两个重要的字段,isAuth代表是否授权,isBindFlag代表是否在我们体系当中已经注册登录。这里由于我们当前的体系需要用户授权注册,以是存在这两个字段。
域名,端口
       
  • 准备好的域名 - 公安部备案的域名   
  • 端标语利用80端口
域名和端标语的要求是由于微信公众号配置域名以及微佩服务器回调都需要域名和80端口。
这里同一个域名,端口适配前后端IP,通过nginx统一代理处置惩罚。

准备就绪开始工作

       
  • 域名:http.xxx.cn   
  • 前端资源摆设:http.xxx.cn   
  • 后端回调接口:http.xxx.cn/api/auth
配置微信公众号
域名配置
服务器根路径上传校验文件,否则域名配置生存不了。

白名单配置

誊写代码
  1. import React, { useEffect } from "react";
  2. import { View } from "@tarojs/components";
  3. export default () => {
  4.   useEffect(() => {
  5.     // 后端回调回来路径格式:http://xxx.cn/#/pages/webAuthorization?bindFlag=0&openid=xxxxxxxxxxx&unionid=null&isAuth=true
  6.    
  7.     var isBindFlag = false, isAuth = false, opendId = '', paramsArray = [];
  8.     /*
  9.      * 省略代码:地址判断,参数处理 赋值给isAuth, isBindFlag, openId
  10.      */
  11.     if (!isAuth) {                                                        // 未授权
  12.       window.location.href=`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`;
  13.     } else if (!isBindFlag) {   // 未注册
  14.       window.location.href = '#/pages/login'
  15.     } else {                                       // 登录
  16.       window.location.href = '#/pages/index'
  17.     }
  18.   }, []);
  19.   return (
  20.     <View>
  21.     </View>
  22.   );
  23. };
复制代码
总结

到此这篇关于H5微信公众号授权的文章就介绍到这了,更多干系微信公众号授权内容请搜索脚本之家从前的文章或继承浏览下面的干系文章希望大家以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作