【开发心得】微信网页应用授权登录

微信登录官方资料:

准备工作 | 微信开放文档

第三方参考资料:

vue 微信扫码登录嵌入方式及开发踩的坑点_范特西是只猫的博客-CSDN博客_微信网页扫码登录开发文档

说明:

1. 微信官方有两种对外能力,分别是 网站应用 与 微信开放平台,这两个服务都有授权登录,注意,我们使用的是前者,故需要的scope 是 

   snsapi_login. 而微信开放平台是供给小程序，公众号等使用的。权限是snsapi_base 和 snsapi_userinfo

   网站应用: 需要300块开通费用与企业授权。

   开放平台: 需要申请开发者账号及授权，并且提供测试账号。

2. 微信登录对接方式有两种

   (1) 直接根据appid与scope等新开一个网页，很多网站都使用该方案，缺点: 需要弹出一个单独的页面，用户体验不够友好。

   (2) 嵌入方式。优点，充分自定义。缺点: 对接比较繁琐。

 对接步骤:

参数详解(具体以官方为准):

appid 应用id,微信接入申请时获得
scope:权限范围 默认snsapi_login
state: 自定义状态保持
login_tupe: jssdk
stype: "black"、"white"可选，默认为黑色文字描述
​
self_redirect: true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。
​
redirect_uri: 重定向地址，需要进行UrlEncode
href: 自定义样式链接，第三方可根据实际需求覆盖默认样式
​
注意:
1. href base64加密后的样式
2. redirect_uri 参数错误 申请时,配置的重定向域名和当前使用域名不一致,或者scope不对.
​

(3). 创建一个单独的direct页面,回调用

修改route.js 增加

{
  path: '/oauth',
  meta: {title: "登录跳转", noCache: true},
  component: () => import('@/views/oauth'),
  hidden: true,
},

路由控制,放行该路由白名单:

const whiteList = ['/login', '/oauth']; // no redirect whitelist

direct页面

​
​

direct页面获取重定向后携带的code和自定义状态，发送消息给父页面

mounted() {
    let code = this.$route.query.code;
    let bindState = this.$route.query.state;
    let wechatInfo = {
      code,
      bindState
    }
    window.parent.postMessage(wechatInfo, '*');
}

 父页面监听:

mounted: function () {
  // 开启微信登录
  if (this.useWechatLogin) {
    window.addEventListener('message', this.receiveMessage);
  }
  this.loginUsernamePassword();
},
destroyed() {
  window.removeEventListener('message', this.receiveMessage);
}

二维码核心页面:

​

测试:

1. 直接部署测试。如果有条件的话。

2. 本地映射成申请时候填写的域名。 百度搜索 Windows hosts修改，或者 Mac host修改。根据开发环境来。(测试服务器也类似)

3. 如果后台登记的是https服务的话，本地webpack需要做下配置:

https 开启 并且设置为跨域.

vue.config.js

  devServer: {
    port: 443,
    hot: true,
    disableHostCheck: true,
    https: true,
    proxy: {
      '/api': { // 凡是接口中后面域名中带有api的 , 框架都会进行一个代理转发
        target: 'http://xxxxxx/api',  // 后端提供的接口地址
        changeOrigin: true, // 开启跨域代理
      }
    }
  },

相信完整的看完本文，应该就能完成了，不方便公开全部代码，有问题欢迎私信交流讨论。