脚本宝典收集整理的这篇文章主要介绍了H5微信公众号授权的简单实现步骤,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
昨天因为有一个项目上面需要实现h5微信授权工作。所以花了两个小时来完成这个功能。
流程说明【提前沟通过的流程】
域名,端口
域名和端口号的要求是因为微信公众号配置域名以及微信服务器回调都需要域名和80端口。
这里同一个域名,端口适配前后端IP,通过nginx统一代理处理。
配置微信公众号
域名配置
服务器根路径上传校验文件,不然域名配置保存不了。
白名单配置
书写代码
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=true var isBindFlag = false, isAuth = false, opendId = '', paramsArray = []; /* * 省略代码:地址判断,参数处理 赋值给isAuth, isBindFlag, openId */ if (!isAuth) { // 未授权 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`; } else if (!isBindFlag) { // 未注册 window.location.href = '#/pages/login' } else { // 登录 window.location.href = '#/pages/index' } }, []); return ( <View> </View> ); };
到此这篇关于H5微信公众号授权的文章就介绍到这了,更多相关微信公众号授权内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的H5微信公众号授权的简单实现步骤全部内容,希望文章能够帮你解决H5微信公众号授权的简单实现步骤所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。