一、介绍

整体流程

如果绑定过，完成登录。 没有绑定过 有账号的，绑定手机号，即为登录。 没账号的，完善账户信息，即为登录。

参考文档：

1. 审核通过后，会给出：应用ID，应用key 回调地址。

测试

# appid			  ：10055xxxx
# redirect_uri ：http://www.corho.com:8080/#/login/callback

普通项目使用

解决点击登录后打开一个新窗口

通过生成的代码是一个a标签包着一个img 我们只需要把链接整体拿过来 把window.open 之类的删掉 只有a链接的herf跳转

 二、vue项目中使用

（1）引入使用

填写的data-appid和redirecturi是本项目申请的测试账号和密码

在组件中使用

import QC from qc

如果不做此步qc 是去找node_modules去找但是 并没有npm i 会报错

//  这个是设置外部扩展，模块为qc变量名为QC，导入qc将不做打包。
  configureWebpack: {
    externals: {
      qc: QC
    }
  },

告诉wepback，QC 是外部拓展：

1. 如果遇到 import qc 不要去node_modules下找了。
2. npm run build时，也不要去打包 qc。

（2）自动生成的代码转换a链接跳转

拿到调试工具中的a链接后把上面写的全删了 前提是有申请后的 id

（3）将测试地址映射到本地

登录之后的回调页面是 这个地址不是localhost打头的 ，并不是我们的本地地址

修改host

由于域名是和localhost不一致无法回调页面，需要在本地修改hosts地址。

windows

1. 找到 C:WindowsSystem32driversetc 下hosts文件
2. 在文件末尾中加入一行  127.0.0.1       www.corho.com
3. 保存即可。
# 如果提示没有权限
1. 将hosts文件移到桌面，然后进行修改，确认保存。
2. 将桌面hosts文件替换c盘文件

mac OS

1. 打开命令行窗口
2. 输入：sudo vim /etc/hosts
3. 按下：i 键
4. 输入：127.0.0.1       www.corho.com
5. 按下：esc
6. 按下：shift + :
7. 输入：wq 回车即可

需要开启webpack服务器权限

IP或域名访问

在vue.config.js中

// 这个是给webpack-dev-server开启可IP和域名访问权限。
chainWebpack: config => {
  config.devServer.disableHostCheck(true)
}

重启后，这时候再去尝试登录后就会调到 本地地址 但是本地地址没有设置路由 所以显示的是空页面

配置路由

{ path: /login/callback, component: () => import(@/views/login/callback.vue) }

接下俩就可以去 指定的路由组件中去做操作

三、登陆后的三条路线

背景知识

检查是否登录

QC.Login.check() ：返回true|false, 用来检查是否登录

获取登录凭证Id

QC.Login.getMe(unionId=>{console.log(unionId)})

QC.api(get_user_info).success(res=>console.log(res))

1. 根据unionId去调用本项目的接口进行登录，如果成功，就代表已注册已绑定：
2. 记录返回的用户信息
3. 跳转页面。

第一条路线

成功：返回的信息是用户信息，调用vuex中的actions保存信息 保存完之后跳转到主页

失败：在catch中原地不动 等待其他两条路线

第二条路线

已有账号 请绑定手机 ：意思是已有当前项目的账号了 直接绑定手机号

路线：

获取验证码 ： 1. 判断手机号校验是否正确 2. 调用获取验证码接口

调用绑定接口： 1. 看用户名和验证码 表单校验是否正确 2.调用接口 3.提示文本 4.跳到主页

第三条路线

没有项目账号，也没有绑定手机号

路线：

首先校验用户名 调用接口 看当前用户名是否存在

校验密码 两次密码是否相等

获取验证码 ： 1. 判断手机号校验是否正确 2. 调用获取验证码接口

调用绑定接口： 1. 所有表单校验是否正确 2.调用接口 3.提示文本 4.跳到主页