H5-阿里云JSSDK集成、实现一键登录功能

目录

一、阿里云H5端JSSDK集成文档地址

二、需要在H5页面中集成号码认证服务的JSSDK，并在服务端完成API对接

三、react项目HTML代码head标签中增加以下代码

四、初始化实例

五、获取号码认证SDK版本号（不是必须）

六、一键登录只能在手机网络下获取鉴权、先判断是否是wifi环境做逻辑处理

七、一键登录点击获取后端接口返回accessToken，jwtToken，用户输入手机号鉴权、鉴权成功后获取spToken请求登录接口、实现一键登录

八、效果图

---

一、阿里云H5端JSSDK集成文档地址

H5端JSSDK集成

二、需要在H5页面中集成号码认证服务的JSSDK，并在服务端完成API对接

官方文档首推安装的版本是最新的2.0会有问题、可安装1.1.3旧版本、稳定

npm i aliyun_numberauthsdk_web@1.1.3

三、react项目HTML代码head标签中增加以下代码

 <meta name="referrer" content="origin">

四、初始化实例

import { PhoneNumberServer } from 'aliyun_numberauthsdk_web';  //ES6
var phoneNumberServer = new PhoneNumberServer();

五、获取号码认证SDK版本号（不是必须）

var sdkVersion = phoneNumberServer.getVersion();  //返回SDK版本号，例如'1.0.0'

六、一键登录只能在手机网络下获取鉴权、先判断是否是wifi环境做逻辑处理

IsWifi() {
    try {
      let wifi = true;
      let ua = window.navigator.userAgent;
      let con = window.navigator.connection;
      // 如果是微信
      if (/MicroMessenger/.test(ua)) {
        if (ua.indexOf("WIFI") >= 0) {
          return true;
        } else {
          wifi = false;
        }
        // 如果支持navigator.connection
      } else if (con) {
        let network = con.type;
        if (network !== "wifi" && network !== "2" && network !== "unknown") {
          wifi = false;
        }
      }
      return wifi;
    } catch (e) {
      return false;
    }
  }

七、一键登录点击获取后端接口返回accessToken，jwtToken，用户输入手机号鉴权、鉴权成功后获取spToken请求登录接口、实现一键登录

 const AUTH_CODE = {
    SUCCESS: 600000,
  };
getAuthToken = async () => {
    const res = await request({ url: api.getAuthToken });

    if (res.code === 200) {
      return res.data.tokenInfo;
    }
    throw new Error("获取accessToken或jwtToken失败");
  };
  checkAuth = async (phone, countryCode, accessToken, jwtToken) => {
    const phoneNumberServer = new PhoneNumberServer();
    const authRes = await phoneNumberServer.checkAuthAvailable({
      phoneNumber: phone,
      accessToken,
      jwtToken,
    });

    if (authRes.code !== AUTH_CODE.SUCCESS) {
      throw new Error("身份鉴权失败");
    }
    return true;
  };
  getVerifyToken = async () => {
    const phoneNumberServer = new PhoneNumberServer();

    const verifyRes = await phoneNumberServer.getVerifyToken();

    if (verifyRes.code !== AUTH_CODE.SUCCESS || !verifyRes.spToken) {
      throw new Error("获取spToken失败");
    }

    return verifyRes.spToken;
  };
  login = async (phone, countryCode, spToken) => {
    // eslint-disable-next-line radix
    const _newVal = Number.parseInt(countryCode);
    // 获取到spToken请求登录接口，传spToken给后端检验登录
    const loginRes = await request({
      method: "post",
      url: api.login,
      data: {
        phone,
        countryCode: _newVal === 86 ? "" : _newVal,
        spToken,
        mode: 8,
      },
    });
    if (loginRes && loginRes.code === 200) {
      return loginRes.data.token;
    }
    throw new Error("登录失败");
  };
  oneClickLogin = async () => {
    try {
      const { phone, countryCode } = this.onePhoneQuery;
      // 获取accessToken、jwtToke
      const { accessToken, jwtToken } = await getAuthToken();
      // 验证用户身份
      await checkAuth(phone, countryCode, accessToken, jwtToke);
      // 获取验证码token
      let spTocken = await getVerifyTocken();
      // 登录成功则返回token
      let token = await login(phone, countryCode, spTocken);
      utils.setCookie(
        constant.SESSION_ID,
        token,
        constant.LOGIN_STATUS_DAY_TIME
      );
      stores.Frame.success("登录成功");
      this.loginSuccess(loginRes.data.newRegistered);
    } catch (error) {
      console.error(error);

      stores.Frame.warning("操作失败，请稍后再试");
    }
  };

八、效果图