H5 及 web 页面微信授权登录流程

一、事先准备工作

配置参数测试公众平台信息（测试号相关配置示例）：

1、打开公众平台的测试账号

2、配置js接口安全域名

3、扫码关注测试公众号

4、修改网页授权地址

配置授权回调的域名，至于什么是OAuth2.0，大家自行百度吧。这里的域名也要与上面的域名一致。配置成功会有通过安全监测的提示，这里不上截图了。

注意：

1、这里填写的是域名（是一个字符串），而不是URL，因此请勿加http://等协议头；
2、授权回调域名配置规范为全域名，比如需要网页授权的域名为：www.qq.com，配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。
但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com无法进行OAuth2.0鉴权

以上信息配置正确后。将参数传给后端（redirect_uri 需要 urlEncode 对链接进行处理后端更好处理）拼接起来。用返回的地址 window.locahost.href=‘xxxx’。调整新的地址并携带code

 

二、授权登录

1、微信登录的几种情况：

• PC端：

  • PC端微信浏览器 -> 网页内嵌二维码方式（需要扫码，使用微信服务号的 appid 和 appsecret）

  • PC端其他浏览器 -> 跳转微信的扫码登录页面（需要扫码，使用微信开放平台注册的PC应用 appid 和 appsecret）

• 移动端：

  • 微信客户端打开 -> 直接调用微信授权（不扫码，使用微信服务号的 appid 和 appsecret）

  • 其他手机浏览器打开 -> 跳转微信的扫码登录页面（需要扫码，使用微信开放平台注册的PC应用 appid 和 appsecret）

2、区分是否是PC环境的方法：

2.1、判断是PC环境还是移动环境是为了相应切换应用的布局，目前采用css媒体查询来做判断：

/* 屏幕宽度小于等于1070像素时识别为移动端（1070像素是使推荐页常用情报站栏不现实滚动条的最小宽度） */
@media screen and (max-width: 1070px) {
    /* 移动端布局css样式 */
}
/* 屏幕宽度大于1071像素识别为PC端 */
@media screen and (min-width: 1071px) {
    /* PC端布局样式 */
}

2.2、js判断客户端是PC端还是移动端访问

function IsPC(){  
     var userAgentInfo = navigator.userAgent;
     var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");  
     var flag = true;  
     for (var v = 0; v < Agents.length; v++) {  
         if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }  
     }  
     return flag;  
  }
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent);  
    window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent); 
    window.location.href ="Android.html";
} else {
    window.location.href ="pc.html";
};

3、PC网页微信授权登录

3.1、网页外链跳转的方式

1）、请求后台的接口，会返回一个微信扫码的界面地址，使用js跳转过去即可

wxlogin () {
       User.wxlogins().then(res => {
        console.log(res)
        window.location.href = res.result.url
      })
},

2）、用户在扫完码点击确定授权后，后台会拿到微信授权用户的信息后，会帮我们跳转到事先给后台重定向的地址页面（这里我是新建了一个空白页用来接收后台返回的数据），在地址后面后台会拼接一个token，我们拿到这个token，去获取用户信息，跳转到首页，即可完成登录

let token = this.$route.query.token
    if (token) {
      this.getUserInfo().then(ures => {
        this.$router.push({
          name: 'home'
        })
      })
    }

3.1、网页内嵌二维码方式

1）、配置好下面相关参数，即可生成微信授权登录/绑定二维码，（注意：setWxerwma （）此方法需在mounted中调用）

 setWxerwma () {
      const s = document.createElement('script')
      s.type = 'text/javascript'
      s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
      const wxElement = document.body.appendChild(s)
      wxElement.onload = function () {
        var obj = new WxLogin({
          id: '', // 需要显示的容器id
          appid: '', // 公众号appid wx*******
          scope: 'snsapi_login', // 网页默认即可
          redirect_uri: encodeURIComponent(''), // 授权成功后回调的url
          state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
          style: 'black', // 提供"black"、"white"可选。二维码的样式
          href: '' // 外部css文件url，需要https
        })
      }
    },

2）、后面的逻辑根据后台返回的数据来处理即可，同方法一步骤二类似

或者也可以用下面步骤：

1）、在页面中先引入如下JS文件（支持https）：

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

2）、在需要使用微信登录的地方实例以下JS对象：

var obj = new WxLogin({
  self_redirect:true,
  id:"login_container", 
  appid: "", 
  scope: "", 
  redirect_uri: "",
  state: "",
  style: "",
  href: ""
});

参数说明：

redirect_uri 为回调链接，由后端提供给前端

引入远程js的方法：

mounted () {
  const wxJs = document.createElement('script')
  wxJs.type = 'text/javascript'
  wxJs.src = 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
  document.body.appendChild(wxJs)
},
beforeRouteLeave (to, from, next) {
  document.body.removeChild(wxJs)
  next()
}

tips：用户扫码授权后，进入回调页面，由后端完成与微信开放平台间的数据请求后，重定向回到前端页面链接，链接后面带上参数，然后前端截取链接后面的参数，请求后端接口，进行登录操作，例子如下：

beforeRouteEnter (to, from, next) {
  next(vm => {
    if (JSON.stringify(vm.$route.query) === '{}') {
      console.log('没有参数')
    } else {
      // 使用this.$route.query截取链接后面的参数，请求后端接口
      vm.pWxLogin()
    }
  })
},

4、移动端微信授权登录

静默授权的意思是用户无感知的获取用户信息，不需要用户有任何的操作动作，注意静默授权只能获取到用户的openId。并不能获取到用户的其他信息。

非静默授权的意思是需要用户去操作，点击同意按钮，也就是说，如果产品要求是非静默授权，那么前端会弹起用户授权的按钮，待用户同意之后，就可以获取到用户的openId,个人信息，关注信息等相关内容。

注：静默授权和非静默授权的区别在于调用的接口的 scope 字段是 snsapi_base 还是 snsapi_userinfo 

4.1、创建一个按钮，点击触发事件,跳转到微信授权页面

wxlogin () {
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
}
//this.appid 公众号APPID  this.url  用户点击授权后，会跳转到后台帮我们重定向的页面（这里我是新建了一个空白页，专门接收code）

其中：

appid：是应用的appid
redirect_uri：是指回跳的url
response_type：只写code
scope：表示授权的作用域，多个可以用逗号隔开，snsapi_base 表示静默授权，snsapi_userinfo 表示非静默授权
state：用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验

4.2、页面会自动跳转到类似以下地址，在重定向的页面拿到给我们返回的 code，会拼接在URL后面

https://www.test.com/?code=021MZkll2DUtR63EuUnl21BZPv0MZklE&state=STATE

注意：如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。若用户禁止授权，则重定向后不会带上code参数，仅会带上state参数redirect_uri?state=STATE

4.3、通过code换取网页授权access_token

在业务代码中，用JS获取code参数，然后访问以下地址：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

其中：

• appid：应用的appid,
• secret: 应用密钥AppSecret,
• code：上一步中获取到的code
• grant_type：值为authorization_code

成功后的返回数据如下：（主要是拿access_token和openid字段）

{ 
    "access_token":"ACCESS_TOKEN",
    "expires_in":7200,
    "refresh_token":"REFRESH_TOKEN",
    "openid":"OPENID",
    "scope":"SCOPE" 
}

4.4、用access_token 和openid获取用户信息

用access_token和openid字段访问以下地址：

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

其中：

• access_token：上一步的access_token
• openid:上一步的openid

返回值如下：

{   
    "openid":" OPENID",
    "nickname": NICKNAME,
    "sex":"1",  //男
    "province":"PROVINCE"
    "city":"CITY",
    "country":"COUNTRY",
    "headimgurl":    "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
    "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
    "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

错误时微信会返回JSON数据包如下（示例为openid无效）:

{"errcode":40003,"errmsg":" invalid openid "}

值得注意的地方：

　　用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户OpenID来获取用户基本信息。这个接口，包括其他微信接口，都是需要该用户（即openid）关注了公众号后，才能调用成功的。

　　网页授权获取用户基本信息也遵循UnionID机制。即如果开发者有在多个公众号，或在公众号、移动应用之间统一用户帐号的需求，需要前往微信开放平台（open.weixin.qq.com）绑定公众号后，才可利用UnionID机制来满足上述需求。

　　UnionID机制的作用说明：如果开发者拥有多个移动应用、网站应用和公众帐号，可通过获取用户基本信息中的unionid来区分用户的唯一性，因为同一用户，对同一个微信开放平台下的不同应用（移动应用、网站应用和公众帐号），unionid是相同的。

　　尤其注意：由于公众号的secret和获取到的access_token安全级别都非常高，必须只保存在服务器，不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤，也必须从服务器发起。

 

参阅官方文档： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html