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

2024-08-02 15:24:28

前言

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

开始工作前做的准备

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

微信授权具有时效性，一段时间内授权之后，就不需要在重复点击确认。如果卸载微信重新安装，还是需要重新确认授权的。
不管是第一次确认授权还是授权之后，都可以通过微信服务器授权回调到我们的后端接口回调。
微信授权回调之后，会返回回调回来的code&state参数，后端可以通过code获取accessToken，然后通过accessToken获取用户信息
后端在接收到服务器回调之后，在回调到前端的时候存在两个主要的字段，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 = [];

    /*
     * 省略代码：地址判断，参数处理 赋值给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微信公众号授权的文章就介绍到这了,更多相关微信公众号授权内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

微信公众号实现扫码获取微信用户信息（网页授权）

刚开始接触微信的时候一头雾水,领导想要一个扫码获取微信用户信息的功能,而且是扫的别人的二维码,我是一阵忙活啊. 经过努力和尝试,终于功夫不负有心人啊,赶紧记录一下,我用的是thinkphp编写的. 第一步:就是二维码的生成 1.首先要确定第一个二维码,因为既然是扫码,肯定是要第一个二维码的,也就是第一人才可以.我将第一个二维码的唯一值(id)设置成零,然后开始我的编写 2.既然是二维码,我用了phpqrcode二维码生成插件,二维码的生成可以在本地编写,查看效果后再上传服务器. (1)从网上下
微信公众号网页授权登录及code been used解决详解

首先微信公众号开发网页授权登录使用环境: 开发工具:eclipse:服务器:tomcat8,开发语言:JAVA. 我写的网页授权登录时用开发者模式自定义view类型按钮点击跳转链接的. 微信网页授权登录首先以官方微信开发文档为准,大体共分为4步: 先说第一步获取code: code说明:code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5扽这未被使用自动过期. 微信公众开发文档给的有获取code的链接,建议直接复制来用,然后替换其中相应的参
微信公众号OAuth2.0网页授权问题浅析

根据需求,我今天完成的是微信的网页授权然后拉取用户的一些基本信息的问题. 1.修改网页授权的基本信息.打开微信公众平台. 在这个地方写要授权的页面的网址. 2.我这边只是测试这个功能,所以我页面直接写了个测试页面,我在要测试的这个网站的根目录新建了一个ceshi.html 然后在他的控制器里面对其进行操作. 1)首先是分享的也就是授权的网页的链接要写的正确然后url: https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx444
微信公众号-获取用户信息（网页授权获取）实现步骤

根据微信公众号开发官方文档: 获取用户信息步骤如下: 1 第一步:用户同意授权,获取code 2 第二步:通过code换取网页授权access_token 3 第三步:刷新access_token(如果需要) 4 第四步:拉取用户信息(需scope为 snsapi_userinfo) 1 获取code 在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面:
H5微信公众号授权的简单实现步骤

前言昨天因为有一个项目上面需要实现h5微信授权工作.所以花了两个小时来完成这个功能. 开始工作前做的准备流程说明[提前沟通过的流程] 微信授权具有时效性,一段时间内授权之后,就不需要在重复点击确认.如果卸载微信重新安装,还是需要重新确认授权的. 不管是第一次确认授权还是授权之后,都可以通过微信服务器授权回调到我们的后端接口回调. 微信授权回调之后,会返回回调回来的code&state参数,后端可以通过code获取accessToken,然后通过accessToken获取用户信息后端在
微信公众号授权登录的超详细步骤

目录第一步:用户同意授权,获取code 第二步:通过code换取网页授权access_token 第三步:刷新access_token(如果需要) 第四步:拉取用户信息(需scope为 snsapi_userinfo) 附:检验授权凭证(access_token)是否有效总结第一步:用户同意授权,获取code 在确保公众账号拥有授权作用域(scope参数)的权限的前提下,引导关注者打开如下页面: 尤其注意:如果链接的参数顺序不对,授权页面将无法正常访问 https://open.weixi
微信公众号网页授权登录的超简单实现步骤

目录前言一.微信公众号授权登录到底哪几步二.回调地址,安全域名怎么配置三.代码怎么写四.出现问题怎么办总结前言这篇文章带大家掌握从0到1实现微信公众平台授权登录微信公众号授权登录到底哪几步回调地址,安全域名怎么配置代码怎么写出了问题怎么办一.微信公众号授权登录到底哪几步官方文档介绍微信开放文档微信开发者平台文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_author
Spring Security实现微信公众号网页授权功能

微信公众号提供了微信支付.微信优惠券.微信H5红包.微信红包封面等等促销工具来帮助我们的应用拉新保活.但是这些福利要想正确地发放到用户的手里就必须拿到用户特定的(微信应用)微信标识openid甚至是用户的微信用户信息.如果用户在微信客户端中访问我们第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑.今天就结合Spring Security来实现一下微信公众号网页授权. 环境准备在开始之前我们需要准备好微信网页开发的环境. 微信公众号服务号请注意,一定是微信公众号
python微信公众号开发简单流程

本文为大家分享了python微信公众号开发的简单过程,供大家参考,具体内容如下网上有很多微信公众号的开发教程,但是都是好几年前的了,而且很多都是抄袭其他人的,内容几乎一模一样.真的无语了.只好自己总结一下开发的一些简单流程. 一.注册个微信公众号,这个就不详细说了. 二.登录后台,进入开发中的基本配置,配置下服务器填写url和token,url是服务器的地址,token是自己定义的三.登录服务器开发网上很多教程用的什么新浪sae啊,webpy都是很久之前的.现在很多东西都变了,所以我没有
python微信公众号开发简单流程实现

本文为大家分享了python微信公众号开发的简单过程,供大家参考,具体内容如下网上有很多微信公众号的开发教程,但是都是好几年前的了,而且很多都是抄袭其他人的,内容几乎一模一样.真的无语了.只好自己总结一下开发的一些简单流程. 一.注册个微信公众号,这个就不详细说了. 二.登录后台,进入开发中的基本配置,配置下服务器填写url和token,url是服务器的地址,token是自己定义的三.登录服务器开发网上很多教程用的什么新浪sae啊,webpy都是很久之前的.现在很多东西都变了,所以我没有
微信公众号weixin-js-sdk使用方法总结

目录 1.安装weixin-js-sdk 2.封装wechat.js 3.main.js 4.页面调用方式 5.如果你需要用到其他功能,在这里按照这种方式接着定义新的方法: 总结 JS-SDK说明文档网页授权说明文档微信公众号授权登录参考方案 http接口请求封装参考方案记录微信公众号开发过程中遇到的问题以及解决方案: 1.安装weixin-js-sdk npm install weixin-js-sdk 2.封装wechat.js import wx from 'weixin-js-sd
微信公众号支付H5调用支付解析

最近项目需要微信支付,然后看了下微信公众号支付,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验. 一.配置公众号微信支付需要我们配置微信公众号支付地址和测试白名单. 比如:支付JS页面的地址为 http://www.xxx.com/shop/pay/ 那此处配置www.xxx.com/shop/pay/ 二.开发流程借用微信公众号支付api(地址 http://pay.weixin.q

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

前言

开始工作前做的准备

准备就绪开始工作

总结

相关推荐

随机推荐