1. 需求

为产品开发一个账号系统，要求实现登录、切换账号、绑定第三方账号（手机号、微信号）、解绑第三方账号等功能。这里做的是TV端和移动端的交互，实际pc端和移动的交互也可以参考这里所涉及的技术。本文涉及到创建新账号、老账号系统和新账号系统的账号切换、权益迁移等问题，复用性不高，不作多解释也不必深究。

2. 前端登录流程设计

需要登录或者切换账号时，pc端生成二维码，手机进行扫码登录。 QQ图片20221013150716.png

3.关键技术

3.1 qrcode生成二维码

通过qrcode.js库生成二维码是目前比较常用的方法。

首先我们在项目中导入这个库（官网下载或 gitee.com/fengruojun/… 导入个压缩版的（qrcode.min.js）就行了。这个既可以前端导入直接使用，也可以后台把这个库进行了二次封装，然后提供接口调用，就不需要前端再导入了。
使用移动端的登录页面的url字符串生成一个二维码。

    /**
     * 获取二维码
     这里使用的是后端封装好的接口生成二维码。
     * @param {*} urlStr
     */
     getQrCode: function(urlStr) {
        Epg.axios.post(apiUrl.GEN_QRCODE, {
            appCode: CONFIG.APP_CODE,
            url: urlStr,
            imageName: home.bindType + home.deviceCode + home.userId
        }).then(function(res){
            console.log(res)
            if(res.code === 0){
                var html = '<div id="qrcode"><img style="width: 100%;" src="' + res.data + '" /></div>';
                Epg.dom('#container').append(html)
            }
        })
    },

生成的二维码显示在PC端，扫这个二维码就可以进入移动端登录页面。

3.2 手机号登录

移动端页面使用vant UI库

// 移动端项目安装并导入ui组件库
import { Form, Field, Cell, CellGroup, Button } from 'vant';
<template>
  <div class="login" v-show="isShow">
    <div class="login-title" v-show="!result">亲爱的用户，欢迎来到XXXX</div>
    <van-form :show-error="false" v-show="!result">
      <!-- 输入手机号，调起手机号键盘 -->
      <van-cell-group :border="false">
        <van-field
          v-model="tel"
          type="tel"
          label="手机号"
          maxlength="11"
          :rules="[{ validator: validatorMobile, message: '请输入正确的手机号' }]"
          error-message=""
          placeholder="请输入手机号"
        />
        <van-field
          v-model="sms"
          center
          maxlength="6"
          label="验证码"
          placeholder="请输入验证码"
        >
          <template #button>
            <van-button
              round
              type="info"
              size="small"
              @click="sendMsg"
              style="width: 120px"
            >
              <div>{{ MsgCodeText }}</div>
            </van-button>
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
    <div style="margin: 16px" v-show="!result">
      <van-button
        round
        block
        type="info"
        @click="onSubmit"
      >登录</van-button>
    </div>
    <div v-show="result" class="result">
        <img :src="resultImg" width="100%" height="100%" />
        <div class="resultText">{{resultText}}</div>
    </div>
  </div>
</template>

输入手机号，要进行合法性校验

// 手机号校验方法
export default {
    methods: {
        // 校验函数返回 true 表示校验通过，false 表示不通过
        validatorMobile(val) {
            return /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(val);
        },
    },
};

获取验证码，调用获取验证码接口，接收验证码时要进行倒计时

startCount(time) {
    if (!this.tel) {
        return;
    }
    if (this.isSended) return;
    this.isSended = true;
    this.timer = setInterval(() => {
        this.MsgCodeText = `${time}s`;
        time--;
        if (time < 0) {
            clearInterval(this.timer);
            this.MsgCodeText = '发送验证码';
            this.isSended = false;
        }
    }, 1000);
    sendMsg({}).then((res) => {  // 获取验证码接口
        if (res.code !== 0) {
            this.$toast(res.text);
        }
    });
},

进行验证，调用校验接口
验证通过后进行登录\绑定操作，调用登录/绑定接口
缓存登录\绑定结果，调用缓存接口把需要的信息缓存起来，让pc端轮询获取。

3.3 微信号登录

流程跟手机登录差不多，微信不需要验证码，但需要授权拿到openId或者unionId，绑定的是这两个的其中一个。为什么不绑定微信号？因为微信号是可以修改的，它不是微信的唯一标识。

打开页面进行微信网页授权，网页授权可以参考文章：juejin.cn/post/715057…
获取用户微信信息
登录/绑定操作
缓存登录/绑定结果

3.4 前端轮询接收移动端登录\绑定结果

弹出二维码后开始轮询缓存

// 开启轮询模式获取回调信息（从缓存读取）
var getCallBackTimer = setInterval(listenBingingResult, 2000);  
// listenBingingResult是获取的缓存信息的网络请求方法
// 结束后记得关闭定时器（关闭轮询）
clearInterval(getCallBackTimer);

接收到缓存结果，进行登录后的一系列操作（清除缓存内容、关闭轮询、关闭二维码页面、如果登录失败强制登录或者切换账号、权益迁移、业务登录...）

系统设计-产品账号系统