花了两小时完成微信公众号受权

昨天由于有一个项目上面须要实现h5微信受权工做。因此花了两个小时来完成这个功能。前端

开始工做前作的准备

流程说明【提早沟经过的流程】

微信受权具备时效性，一段时间内受权以后，就不须要在重复点击确认。若是卸载微信从新安装，仍是须要从新确认受权的。
无论是第一次确认受权仍是受权以后，均可以经过微信服务器受权回调到咱们的后端接口回调。
微信受权回调以后，会返回回调回来的code&state参数，后端能够经过code获取accessToken，而后经过accessToken获取用户信息
后端在接收到服务器回调以后，在回调到前端的时候存在两个主要的字段，isAuth表明是否受权，isBindFlag表明是否在咱们系统当中已经注册登陆。这里由于咱们当前的系统须要用户受权注册，因此存在这两个字段。

域名，端口

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

域名和端口号的要求是由于微信公众号配置域名以及微信服务器回调都须要域名和80端口。react

这里同一个域名，端口适配先后端IP，经过nginx统一代理处理。nginx

准备就绪开始工做

域名：http.xxx.cn
前端资源部署：http.xxx.cn
后端回调接口：http.xxx.cn/api/auth

配置微信公众号

域名配置

服务器根路径上传校验文件，否则域名配置保存不了。web

白名单配置

书写代码

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>
  );
};
复制代码

结束工做！后端