qqInterLogin

2019-08-20

pc端vue-cli 使用qq互联登录

原理

点击登录时嵌入iframe标签，src为后台返回的，登录成功后会有个回调到一个新的页面，可以给后台一个空页面用来跳转，然后外部接收到iframe的通信，知道登录成功

实现

调起qq登录弹窗

<div v-else class="l-login" @click="toLogin">
  <img class="ic-bg" src="../assets/btn_bmcs.png"  />
  <div class="login-txt">报名参赛</div>
</div>
<!-- login-box 是一个弹窗-->
<div v-if="showLoginFrame" class="l-login-box">
  <div class="l-content">
    <div class="login-demo">
      <div class="login-title">
        <div>QQ登录</div>
        <img class="ic-cancel" src="../assets/icon_gbc.png" @click="cancelLogin"  />
      </div>
    </div>
    <div class="login-box">
      <iframe class="qq-iframe" :src="loginUrl"></iframe>
    </div>
  </div>
</div>

/* 这里把完整的css也贴出来，方便看效果 */
.l-login-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  .l-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 500px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
  }
  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 500px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 100px;
    .qq-iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin-top: -50px;
      width: 700px;
      height: 500px;
      border: none;
    }
  }
  .login-demo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 500px;
    background: #fff;
    border-radius: 4px;
    .login-title {
      position: relative;
      color: #666;
      font-size: 20px;
      line-height: 50px;
      text-align: center;
      .ic-cancel {
        position: absolute;
        right: 14px;
        top: 14px;
        width: 22px;
        height: 22px;
        cursor: pointer;
      }
    }
  }
}

// 将控制弹窗展示与否的值 showLoginFrame 和 登录的iframe  src loginUrl 用 vuex状态管理器操作
// 这里把控制登录的方法抽出来，方便多个地方登录
// login.js
import { getUserInfo } from '@/api/user'
import store from '@/store'

export const showLogin = () => {
  // 展示qq登录弹窗
  store.commit('setLoginFrame', true)
  console.log(store.state.showLoginFrame, 'showLoginFrame')
  $('#app').addClass('overflow-hidden')
  // 本地测试
  // store.commit('setLoginUrl', 'http://localhost:8080/#/kongPage')
  // 请求接口获取qq登录的src链接
  let data = {
    type: 'qq'
  }
  getUserInfo(data)
    .then(res => {
      if (res.data.ret === 0) {
        console.log(res.data.data.url)
        store.commit('setLoginUrl', res.data.data.url)
      } else {
        console.log(res.data.msg)
      }
    })
}
// 登录成功后执行的操作，关闭弹窗，请求用户信息接口
export const getUser = () => {
  store.commit('setLoginFrame', false)
  $('#app').removeClass('overflow-hidden')
  let data = {
    type: 'qq'
  }
  getUserInfo(data)
    .then(res => {
      if (res.data.ret === 0) {
        console.log(res.data.data)
        store.commit('setUserName', res.data.data.nick)
        store.commit('setAvatar', res.data.data.head_img)
      } else {
        console.log(res.data.msg)
      }
    })
}

// 登录事件，需要登录就直接调用login.js里的showLogin 方法就能调起登录弹窗了
import { showLogin } from '@/libs/login'
toLogin () {
  showLogin()
},

前面的这些操作已经可以调起qq登录的弹窗了，接下来就是登录成功后的操作

登录成功后会调到一个新的页面，这里我给的是一个空页面路由是 XXX/kongPage
把这个回调地址给后台，登录成功后就会跳到这个kongPage.vue页面了

iframe使用 window.postMessage 想外传递数据
参考： https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage#The_dispatched_event

https://blog.csdn.net/divpoxiao/article/details/80175328

// kongPage 在iframe登录后跳转的子页面
created () {
  // 子页面向父级页面传递信息
  // 传递的参数随意 看个人理解
  window.onload = function () {
    window.parent.postMessage({
      type: 'txt',
      data: 'loginSuccess'
    }, '*')
  }
}

// App.vue   外层父页面
// login.js里 getUser 方法
import { getUser } from '@/libs/login'

created () {
  window.addEventListener('message', function (e) {
    console.log(e) // 这里打印一下看里面的内容
    var data = e.data   // data 就是 在kongPage页面里传递的参数
    if (data && data.type && data.type === 'txt') { // 判断一下得到跟kongPage传递的参数一样，就是登录成功了，接下来处理登录成功的逻辑就可以了
      console.log(data.data) // 打印出来看一下
      // do something
      getUser()
    }
  })
}