在微信公众号请求用户网页授权之前，需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。授权回调域名配置规范为全域名，比如需要网页授权的域名为：www.qq.com，配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权

一、两种微信授权方式介绍

1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。对用户来说无感知，如果业务不需要用户详细信息或者是给已关注用户使用建议用此方式，对于已关注用户，后续可以根据openid直接从数据库查询到用户详细信息
2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

二、方式一：仅获取用户openid

2.1 流程图

整体流程如下图所示，其中步骤4、步骤5已在wx-api中实现，前端无需关心 微信网页授权登录 - 获取用户openid或用户信息 - 图1

2.2 详细步骤

本页为分步骤讲解，完整代码流程可参考wx-client/src/js/wxAuth.js

2.2.1. 跳转到腾讯授权页面获取code

  1. const APPID = process.env.VUE_APP_WX_APPID;//配置文件中加载公众号APPID
  2. const WX_AUTH_URL = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID
  3.     + '&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=0#wechat_redirect';
  4. /**
  5. * 获取网页授权登录code
  6. * 如果有直接返回，如果没有重定向到腾讯授权页面，腾讯会再次重定向回来并带有code参数
  7. **/
  8. function wxAuthCode(){
  9.       let code = getUrlParam('code');//获取URL中的code参数
  10.       if(code) return code;
  11.       let currentUrl = encodeURIComponent(window.location.href);
  12.         window.location.replace(WX_AUTH_URL.replace('REDIRECT_URI', currentUrl));
  13. }

2.2.2 code换取openid

  1. http.post('/wx/wxAuth/codeToOpenid', {
  2.       code: code
  3. }).then(res => {
  4.       if (res.code == 200) {
  5.       console.log("openid=",res.data);
  6.       }
  7. });

2.2.3 通过openid获取用户详细信息（可选，仅已关注用户可用）

注意仅已关注用户可通过此接口获取到用户详细信息，如果已关注仍不能获取到用户信息，请前往管理后台-粉丝管理同步全部粉丝数据，后续有用户关注都会记录用户信息到数据库

  1. cookie.set('openid',openid) //接口服务端从cookie中读取openid
  2. http.post('/wx/wxUser/getUserInfo')
  3.   .then(res => {
  4.       if (res.code == 200) {
  5.       console.log("userInfo:",res.data);
  6.       }
  7. });

三、 方式二：获取用户详细信息

3.1 流程图

整体流程如下图所示，其中步骤4-步骤7已在wx-api中实现，前端无需关心 微信网页授权登录 - 获取用户openid或用户信息 - 图2

3.2 详细步骤

3.2.1. 跳转到腾讯授权页面获取code

  1. const APPID = process.env.VUE_APP_WX_APPID;//配置文件中加载公众号APPID
  2. const WX_AUTH_URL = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID
  3.     + '&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect';
  4. /**
  5. * 获取网页授权登录code
  6. * 如果有直接返回，如果没有重定向到腾讯授权页面，腾讯会再次重定向回来并带有code参数
  7. **/
  8. function wxAuthCode(){
  9.       let code = getUrlParam('code');//获取URL中的code参数
  10.       if(code) return code;
  11.       let currentUrl = encodeURIComponent(window.location.href);
  12.         window.location.replace(WX_AUTH_URL.replace('REDIRECT_URI', currentUrl));
  13. }

2.2.2 code换取用户信息

  1. http.post('/wx/wxAuth/codeToUserInfo', {
  2.       code: code
  3. }).then(res => {
  4.       if (res.code == 200) {
  5.       console.log("userInfo,",res.data);
  6.       }
  7. });