QQLogin

/**
 * @author wn
 * @description: 第三方 登陆  QQ登陆 --CallBack.vue
 *
 * 注册的目的是 为了登陆时获取 token
 * 账号  手机号  QQ号  三者 之间 互相 绑定查询 快速登陆 获取 token
 *
 *  准备一个 登陆成功之后的 跳转页面  以及 URL
 * 页面包含3种情况
 */

/**
 *  QQ 互联 上  认证
 *  网站 已经备案 差不多 完善  登陆 注册 页面  回调页面
 *  注册  域名  备案号  回调地址   审核 通过----  注意  这里回调地址 QQ 平台申请时要与域名一致  支付宝同理
 *  获取 appId  appKey  回调地址--redirect_uri   不能修改  否则 无效
 *  大概率 这些 认证 由  后台完成
 *
 *  申请上线 回调地址 和  本地 localHost 8080  不一致的问题
 *  1 修改 C:\Windows\System32\drivers\etc  中 hosts 文件
 *  127.0.0.1       www.corho.com (备案域名) ！！！！！！
 *
 *  www.corho.com:8080  --> Invalid Host header
 *
 *  2 vue.config.js 中
 * // 跳过检查host--这个是给webpack-dev-server开启可IP和域名访问权限-->QQ登陆
	devServer: { historyApiFallback: true, allowedHosts: 'all' },

 * 备案域名 (www.corho.com:8080) 可访问  本地项目  即成功
 */

/**
 * public index.html 引入  js库
 *
 * 生产模式 可能要更改 去掉 :8080
 * data-redirecturi = "http://www.corho.com/#/login/callback"
 *
 *  <script src="http://connect.qq.com/qc_jssdk.js"
 *
 * data-appid="100556005"  --appid
 * data-redirecturi=       -- login页 callback--路由 跳转页面
 * "http://www.corho.com:8080/#/login/callback">
 *
 * </script>
 *
 * 导入  此 js 后  就会获取一个全局  QC 对象
 * cdn 方式导入   html中可以直接使用QC
 * 但是 vue组件中需要 导入使用
 * import QC from ‘qc’
 * 但是  没有 qc模块 webpack 打包qc会报错
 * 所以   vue.config.js 中  忽略 qc 正常导入  使用  不报错
 * configureWebpack: {
		externals: {
			qc: 'QC',
		},
	},

  官方 js 生成按钮做法   会 弹出 新窗口
  <span id="qqLoginBtn"></span>

  	onMounted(() =>
			QC.Login({
				btnId: 'qqLoginBtn', // 插入按钮的节点id
			})
		)

  所以我们  安此方法 F12 window.open 拿到  href
  通过  跳转按钮  图标 完成 不弹窗 跳转 QQ登陆
 */

/*
 跳转按钮

 <a
 href="https://graph.qq.com/oauth2.0/authorize?client_id=100556005&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.corho.com%3A8080%2F%23%2Flogin%2Fcallback"
 >
 图标

 <img
   src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"
   alt=""
 />

 */

/**
 * 页面包含3种情况
 * 1 之前注册过账号  且绑定过 QQ号  --> 通过 QQ 查询(后台接口) 账号  跳转首页
 * CallBack.vue
 * 默认 状态 1
 * A 通过 QQ API(check--getMe) 获取openId 就是 unionID 参数
 * B 然后 后台QQ登录接口--userQQLogin(openId)
 * C 成功  登录成功
 * 保存用户信息
 * 回跳首页 或者 来源页 (此时在callback无法获取redirectUrl)
 * 在登录页(携带redirectUrl跳转callback而没了) 保存在 vuex
 *
 * D 失败  有账号--手机号--绑定QQ    没有账号--绑定账号  手机号
 *
 * 2 之前注册过账号  没绑定过 QQ号  --> 绑定手机号   跳转首页
 * 注册过账号  手机号绑定-->QQ号再次登陆时 userQQLogin(openId)
 * A openID --check()--api('get_user_info').success-- 获取 QQ 头像 昵称
 * B 表单校验  验证码
 * C 立即绑定  userQQBindLogin()
 * 这里是 之前注册过账号  有账号与手机号  此处通过手机号与QQ绑定
 *
 *
 * 3 没注册过账号   没绑定过 QQ号   -->  信息完善  跳转首页
 * 相当于重新注册账号 手机号  绑定 QQ号--再次登陆时--QQ号-->账号userQQLogin(openId)
 *
 * A 用户名 是否存在 userAccountCheck  再次输入密码是否一直
 * B 发送短信验证码 userQQPatchCode
 * C 完善信息  表单校验
 * D 立即注册 userQQPatchLogin
 */