返回顶部
首页 > 资讯 > 前端开发 > JavaScript >H5微信公众号授权的简单实现步骤
  • 986
分享到

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

2024-04-02 19:04:59 986人浏览 八月长安
摘要

前言 昨天因为有一个项目上面需要实现h5微信授权工作。所以花了两个小时来完成这个功能。​ ​ 开始工作前做的准备 流程说明【提前沟通过的流程】 微

前言

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

开始工作前做的准备

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

  1. 微信授权具有时效性,一段时间内授权之后,就不需要在重复点击确认。如果卸载微信重新安装,还是需要重新确认授权的。
  2. 不管是第一次确认授权还是授权之后,都可以通过微信服务器授权回调到我们的后端接口回调。
  3. 微信授权回调之后,会返回回调回来的code&state参数,后端可以通过code获取accessToken,然后通过accessToken获取用户信息
  4. 后端在接收到服务器回调之后,在回调到前端的时候存在两个主要的字段,isAuth代表是否授权,isBindFlag代表是否在我们系统当中已经注册登录。这里因为我们当前的系统需要用户授权注册,所以存在这两个字段。

域名,端口

  • 准备好的域名 - 公安部备案的域名
  • 端口号使用80端口

域名和端口号的要求是因为微信公众号配置域名以及微信服务器回调都需要域名和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=true
    
    var isBindFlag = false, isAuth = false, opendId = '', paramsArray = [];


     

    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微信公众号授权的文章就介绍到这了,更多相关微信公众号授权内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: H5微信公众号授权的简单实现步骤

本文链接: https://lsjlt.com/news/131572.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • H5微信公众号授权的简单实现步骤
    前言 昨天因为有一个项目上面需要实现h5微信授权工作。所以花了两个小时来完成这个功能。​ ​ 开始工作前做的准备 流程说明【提前沟通过的流程】 微...
    99+
    2024-04-02
  • H5实现微信公众号授权的简单步骤
    本篇内容介绍了“H5实现微信公众号授权的简单步骤”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言昨天因为有一个项目上面需要实现h6微信授权...
    99+
    2023-06-20
  • 微信公众号网页授权登录的超简单实现步骤
    目录前言一、微信公众号授权登录到底哪几步二、回调地址,安全域名怎么配置三、代码怎么写四、出现问题怎么办总结前言 这篇文章带大家掌握 从0到1实现微信公众平台授权登录微信公众号授权登录...
    99+
    2024-04-02
  • 微信公众号授权登录的超详细步骤
    目录第一步:用户同意授权,获取code第二步:通过code换取网页授权access_token第三步:刷新access_token(如果需要)第四步:拉取用户信息(需scope为 s...
    99+
    2022-12-09
    微信公众号授权登录流程 授权登录公众号怎么弄 微信公众号如何授权登录
  • Spring Security实现微信公众号网页授权功能
    微信公众号提供了微信支付、微信优惠券、微信H5红包、微信红包封面等等促销工具来帮助我们的应用拉新保活。但是这些福利要想正确地发放到用户的手里就必须拿到用户特定的(微信应用)微信标识o...
    99+
    2024-04-02
  • uniapp实现微信公众号支付的方法步骤
    目录1、申请企业服务号(必须企业认证)2、获取appid 和秘钥3、安全域名设置4、代码实现1、申请企业服务号(必须企业认证) https://mp.weixin.qq.com 2、...
    99+
    2024-04-02
  • 微信公众号开发中网页授权怎么实现简化用户绑定
    今天就跟大家聊聊有关微信公众号开发中网页授权怎么实现简化用户绑定,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。首先我们要明确绑定微信用户和系统用户,其目的是为了用户在一次绑定以后,再...
    99+
    2023-06-04
  • PHP实践:手把手微信公众号网页授权登录功能实现
    🏆作者简介,黑夜开发者,全栈领域新星创作者✌,CSDN博客专家,阿里云社区专家博主,2023年6月CSDN上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师,项目技术负责人。 Ἴ...
    99+
    2023-08-18
    php 微信 android 微信网页授权登录 微信公众平台
  • 简单实现微信小程序授权登录
    可以直接复制粘贴,只需要改一些东西就可以了 首先在wxml中用微信自带的button开放属性 授权登录 然后在对应的js中创建一个login方法,因为上面bindtap指向的是login,所以就要创建一个新的方法 login(evt){/...
    99+
    2023-10-04
    php 微信小程序
  • 微信公众号如何实现H5支付接口调用方法
    这篇文章主要为大家展示了“微信公众号如何实现H5支付接口调用方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信公众号如何实现H5支付接口调用方法”这篇文章吧...
    99+
    2024-04-02
  • 基于Thinkphp5+EasyWeChat+fastadmin微信小程序授权登录&获取手机号&微信公众号网页---联合授权登录
    战前准备 使用 composer 安装 EasyWeChat $ composer require overtrue/wechat:~4.0 -vvv 或者在composer.json文件renqui...
    99+
    2023-09-12
    php
  • 最新PHP微信扫码关注公众号并授权登录源码
    正文: PHP微信扫码登录看起来简单,但做起来有点麻烦,开发起来就会浪费很多的时间。 PHP判断是否首次关注公众号,扫码关注公众号获取微信用户头像、openid和省市等信息源码。 第一步:获取关注二维码ticket,并且传参二维码qrco...
    99+
    2023-09-04
    php
  • uni-app 微信小程序授权登录的实现步骤
    目录一、appID相关申请和配置1. appid获取方式2. appID配置二、获取用户基础数据2.1. 获取用户信息2.2. 获取用户信息2三、调用登录api3.1. 登录api3...
    99+
    2024-04-02
  • 微信小程序 | 微信公众平台SpringBoot开发实例 │ 开发一个简易的个人微信公众号
     开发一个简易的个人微信公众号,并演示对不同相对地址的整合方法、JSON数据的处理方法(处理后以HTML文件显示)。 1、应用开发 1●创建类InitMenu 在包edu.bookcode中创建caseex子包,并在包edu.boo...
    99+
    2023-08-31
    微信公众平台 spring boot java 微信
  • 如何在PHP中实现微信公众号菜单事件
    对于使用PHP开发微信公众号的开发者来说,实现微信公众号菜单事件是一个基本的需求。简单来说,菜单事件就是当用户点击微信公众号的菜单时,微信服务器会向开发者后台发送一个请求,开发者需要在后台处理该请求并返回相应的结果。本文将介绍如何在PHP中...
    99+
    2023-05-14
    PHP 微信公众号 菜单事件
  • java 实现微信公众号消息推送
    注册微信公众号 这里主要用测试账号来演示:测试账号注册地址正式账号注册地址:微信公众平台 设置消息模板 可参考微信公众号文档:微信公众号文档 模板根据需求设置(注意:参数长度不能超出微信规定,否则...
    99+
    2023-09-22
    java 微信 开发语言
  • 微信公众号如何实现电商变现
    这篇文章主要为大家展示了“微信公众号如何实现电商变现”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信公众号如何实现电商变现”这篇文章吧。对于大部分公众号,内容变现是一个大问题。很多公众号会采用...
    99+
    2023-06-10
  • SpringBoot + 微信公众号JSAPI支付功能的实现
    1、pom.xml依赖配置 <!-- 微信支付 --> <dependency> <groupId>com.egzosn</grou...
    99+
    2024-04-02
  • nodejs中怎么实现微信公众号开发
    今天就跟大家聊聊有关nodejs中怎么实现微信公众号开发,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1.公众平台测试帐号的使用登录微信公众平台,由...
    99+
    2024-04-02
  • jspXCMS中如何实现微信公众号配置
    这篇“jspXCMS中如何实现微信公众号配置”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“jspXCMS中如何实现微信公众号配置”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解...
    99+
    2023-06-26
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作