免登/钉钉免登/钉钉免密登录

需求:
1.当用户从钉钉点击按钮,直接跳转到我们的后管项目.
2.当用户为首次登录,需要通过短信验证码进行绑定,下次可直接免登直接进入系统

直接上代码吧

因为正常是有一个普通的登录页面的
所以这次的免登录新起了一个页面,将钉钉上的按钮,直接绑定了这个url
例如: https://www.XXXX.com/user/auto-login

页面处理方式

首先是html页面,因为进入项目,首先加载html,所以把获取钉钉ID的请求,写在了html内

    $(function () {
      // alert('钉钉初始化开始');
      //钉钉sdk 初始化
      // dd.ready参数为回调函数，在环境准备就绪时触发，jsapi的调用需要保证在该回调函数触发后调用，否则无效。
      dd.ready(function () {
        //获取当前网页的url
        var currentUrl = document.location.toString();
        $('#url').append(currentUrl);

        // 解析url中包含的corpId
        var corpId = currentUrl.split('corpId=')[1];
        $('#corpId').append(corpId);


        //使用SDK 获取免登授权码
        dd.runtime.permission.requestAuthCode({
          corpId: corpId,
          onSuccess: function (result) {
            var code = result.code;
            $('#code').append(code);
            $.ajax({
              type: 'POST',
              url: 'https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX,
              contentType: 'application/json;charset=utf-8',
              data: JSON.stringify({ code: code, appId: XXXXX, corpId: corpId }),
              dataType: 'json',
              success: function (response) {


			// 通过钉钉返回的unionid跳转到是否符合免登的鉴权页面
                if(response.data.unionid){
                  window.location.href = `/user/logining?unionid=${response.data.unionid}`;
                }
              },
              
              error: function (response) {
                // alert('提交失败' + JSON.stringify(response));
                $('#myresponse').append(JSON.stringify(response));
              },
            });
          },
        });
      });
    });

AutoLogin.jsx
// 页面加载时候 取做判断
  useEffect(() => {
   // 通过跳转过来的URL来截图钉钉ID,每个人的钉钉ID独一无二,通过钉钉ID来进行绑定
    const ddId = window.location.search?.split('unionid=')[1];
    if (ddId) {
    // 发送请求 判断是否符合免登直接进入系统
      dispatch({
        type: 'login/autoLogin',
        payload: { mcid: ddId },
      }).then((v) => {
        // 符合免登录  直接进入系统
        if (v?.success === true) {
        // 提示信息,进入系统,获取用户权限及菜单等 (鉴权及菜单获取删掉了,都是dispatch)
          message.success('🎉 🎉 🎉  登录成功！');
          setTimeout(
            () =>
              dispatch({
                type: 'login/getUserMenu',
              }).then((value) => value?.code === 200 && history.push(getFirstPath(value?.data))),
            200,
          );
          // 后端判断不符合免登录 携带钉钉ID  跳转到登录界面
        } else {
        // 通过 location跳转到普通登录,携带参数 钉钉ID, 准备进行绑定工作.
          window.location.href = `/user/login?unionid=${ddId}`;
          // message.error('您还没有绑定,请先进行登录绑定!');
        }
      });
    }
  }, []);

普通登录页面去做一个绑定

// 当点击from表单的登录 去做判断, 用户是普通登录还是绑定
  const onFinish = (values) => {
  // 尝试获取钉钉ID
    const ddid = window.location.search?.split('unionid=')[1]?.split('&')[0];
    const { code } = values;
    // 判断是否有钉钉ID及验证码的填写
    if (ddid && values) {
    // 如果有钉钉ID 则 调用绑定免登录的接口
      dispatch({
        type: 'login/autoLogin',
        payload: { phone: values.phone, code, mcid: ddid },
      }).then((v) => {
        if (v?.code === 200) {
          message.success('🎉 🎉 🎉  绑定成功！');
        } else {
          message.error(v.message);
        }
      });
	// 如果没有钉钉ID 则调用以前的登录接口
    } else {
      dispatch({
        type: loginUrl,
        payload: { phone, code },
      }).then((v) => {
        if (v?.code === 200) {
          message.success('🎉 🎉 🎉  登录成功！');
        } else {
          message.error(v.message);
        }
      });
    }
  };