脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信公众号授权

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

 更新时间：2021年07月31日 14:47:12   作者：耳东蜗牛  
如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑,这篇文章主要给大家介绍了关于微信公众号授权的相关资料,需要的朋友可以参考下

前言

昨天因为有一个项目上面需要实现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 = [];


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

您可能感兴趣的文章:

相关文章

  • mapboxgl区划标签避让不遮盖实现的代码详解

    mapboxgl区划标签避让不遮盖实现的代码详解

    Mapbox是一个可以免费创建并定制个性化地图的网站。这篇文章主要介绍了mapboxgl区划标签避让不遮盖实现方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • BootStrap3中模态对话框的使用

    BootStrap3中模态对话框的使用

    这篇文章主要介绍了BootStrap3中模态对话框的使用的相关资料,需要的朋友可以参考下
    2017-01-01
  • js中undefined该怎么判断浅析

    js中undefined该怎么判断浅析

    可能很多朋友认为undefined是在js中未定义变量时才会提示的错误,其实不然undefined 是js中的一特殊的变量,我们也可以提前定义哦,下面这篇文章主要给大家介绍了关于js中undefined该怎么判断的相关资料,需要的朋友可以参考下
    2023-04-04
  • 前端for循环遍历foreach、map使用方法举例

    前端for循环遍历foreach、map使用方法举例

    这篇文章主要介绍了前端开发中不同类型的for循环遍历,包括for、foreach和map,详细探讨了它们的使用场景、效率和特点,需要的朋友可以参考下
    2025-02-02
  • Bootstrap-table自定义可编辑每页显示记录数

    Bootstrap-table自定义可编辑每页显示记录数

    这篇文章主要介绍了Bootstrap-table自定义可编辑每页显示记录数的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • 日常收集整理的JavaScript常用函数方法

    日常收集整理的JavaScript常用函数方法

    本文是小编在平时项目中收集整理的javascript常用函数方法，特别是javascript方法经常会用到，对javascript函数方法相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • JS双向链表实现与使用方法示例(增加一个previous属性实现)

    JS双向链表实现与使用方法示例(增加一个previous属性实现)

    这篇文章主要介绍了JS双向链表实现与使用方法,在之前链表的基础上增加一个previous属性实现的双向链表功能,需要的朋友可以参考下
    2019-01-01
  • 微信小程序实现搜索框功能及踩过的坑

    微信小程序实现搜索框功能及踩过的坑

    这篇文章主要介绍了微信小程序实现搜索框功能及踩过的坑,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-06-06
  • javascript实现移动端 HTML5 图片上传预览和压缩功能示例

    javascript实现移动端 HTML5 图片上传预览和压缩功能示例

    这篇文章主要介绍了javascript实现移动端 HTML5 图片上传预览和压缩功能,结合实例形式分析了javascript移动端 HTML5 图片上传预览和压缩功能具体实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • JavaScript实现自动生成带水印的图片

    JavaScript实现自动生成带水印的图片

    这篇文章主要来和大家一起讨论如何利用JavaScript实现一个复杂功能,该功能可以自动为图片添加水印,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01

最新评论