钉应用免密登录

一、项目简介

传统系统登录时需要输入账号密码，某些系统长时间不使用或密码过于复杂很容易忘记密码，并且每次输入也很浪费时间。基于钉钉平台的使用和其接口的提供，决定使用钉钉微应用方式处理登录问题。

1.1 准备工作

• 创建企业内部应用
• 增加路由配置
• 配置白名单列表

1.2 跳转浏览器页面

• 增加跳转新页面
• 获取钉钉免登码
• 钉钉token回调
• 钉应用打开外部链接

1.3 免密登录

• 实现免密登录

二、准备工作

2.1 创建企业内部应用

登录钉钉开发者后台。在开发者后台页面，选择企业内部开发，然后单击创建应用。在弹出的创建应用页面中填写基本信息，然后单击确定创建。

在钉钉开发者后台创建企业内部应用后，系统会自动生成一对AppKey和AppSecret。AppKey是企业内部应用的唯一身份标识，AppSecret是对应的调用密钥。
登录钉钉开发者后台，在应用开发页面，单击已创建的应用，然后单击应用信息查看AppKey和AppSecret。

单击开发管理进入开发管理页面，然后单击修改，并根据以下内容配置开发信息。
开发模式：选择开发应用。
服务器出口IP：输入调用钉钉服务端API时使用的IP即企业服务器的公网IP，多个IP请以英文逗号","隔开，支持带一个*号通配符的IP格式。本文档设置为127.0.0.1。
应用首页地址：输入应用首页URL，在移动端工作台点击应用图标会跳转到此页面。本文档设置为http://127.0.0.1:9527/#/loginV1。

在钉钉工作台右上角，可输入应用关键字进行搜索。

2.2 路由配置

在src>router>index.js路径下，增加如下内容

{
        path: '/loginV1',
        component: () =>
            import ('@/views/login/loginV1'),
        hidden: true
    },

2.3 配置白名单

在src>permission.js路径下，增加如下内容。

const whiteList = ['/loginV1', '/login', '/authredirect']

三、跳转浏览器页面

3.1 跳转页面

定义跳转提示页面，包括登录加载页面和退出页面。

<template>
  <div class="login">
    <div v-if="pageType==3">
<!--      <div class="title">****token失效，请从钉钉应用重新登录!****</div>-->
      <loginV1Rest></loginV1Rest>
    </div>
    <div v-else>
<!--        <div class="title">****正在登录中请等待!****</div>-->
      <loginV1Wait></loginV1Wait>
    </div>
    <div class="el-login-footer">
      <span style="color:red">财务信息化团队所有.</span>
    </div>
  </div>
</template>

定义created，自动触发getUserList方法。进行获取钉钉免登码、钉钉token回调和钉应用打开外部链接这一系列流程。

 created() {
    this.getUserList();
  },
  
  getUserList() {
      //getCode是公共js的方法
      getddCode(code => {
        //code是公共方法通过callback返回的
        var ddCode = code;
        getdd(ddCode).then(res => {
          var username = res.data.data.jobnumber;
          this.loginForm.username = username;
          getf(username);
        });
      });
    }

3.2 获取钉钉免登码

导入utils/ddtalk.js中的getddCode方法，在ddtalk.js中使用官方提供方法获取到免登授权码

import { getddCode,getf } from "@/utils/ddtalk.js";

import * as dd from "dingtalk-jsapi";

export function getddCode(callback) {
  let corpId = "dingXXXXXXXXXXXXXXXXXX";
  if (dd.env.platform !== "notInDingTalk") {
    dd.ready(() => {
      //使用SDK 获取免登授权码
      dd.runtime.permission.requestAuthCode({
        corpId: corpId,
        onSuccess: res => {
          callback(res.code);
        },
        onFail: err => {
          //报错以数组格式返回
          alert("mqp" + JSON.stringify(err));
        }
      });
    });
    //验证失败
    dd.error(function(err) {
      alert("进入到error中");
      alert(JSON.stringify(err));
    });
  }
}

3.3 钉钉token回调

导入api/login中的getdd方法，调用后端接口，使用AppKey和AppSecret获取accessToken。进而获取用户id，获取用户详情并返回工号。

import { getdd } from "@/api/login";

// 钉钉token 回调
export function getdd(code) {
  return request({
    url: `${process.env.BASE_URL}/employeeInfo/dd/${code}`,
    method: 'get'
  })
}

3.4 钉应用打开外部链接

导入utils/ddtalk.js中的getf方法，在ddtalk.js中使用官方提供dd.biz.util.openLink方法跳转至浏览器打开新页面。

import { getddCode,getf } from "@/utils/ddtalk.js";

export function getf(param) {
  dd.biz.util.openLink({
    url: "http://127.0.0.1:9527/#/loginV1?username=" + param,
    onSuccess: function(result) {
        window.opener = null;
        window.open('','_self');
        window.close();
    },
    onFail: function(err) {}
  });
}

四、免密登录

4.1 前端调用

再次调用getUserList()方法，使用 this.$route.query获取传过来的username参数，放入到this.loginForm中。此时进入handleLoginJobNumber()方法，使用 this.$store.dispatch 方法来触发一个 action，它接受两个参数：action 的名称和可选的 payload（负载）。最后在actions的LoginByUsername中将账号和密码传给后端，后端进行逻辑处理。

this.jobnumber = this.$route.query.username;
this.loginForm.username = this.jobnumber;
if (this.jobnumber != null&&this.jobnumber!=undefined&&this.jobnumber!='') {
    this.handleLoginJobNumber();
    return;
 }
 
 handleLoginJobNumber() {
      this.loading = true
      this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
        this.loading = false
        this.$router.push({ path: '/' })
      }).catch(() => {
        this.loading = false
      })
    },

actions: {
    // 用户名登录
    LoginByUsername({ commit }, userInfo) {
      const username = userInfo.username.trim()
      return new Promise((resolve, reject) => {
        loginByUsername(username, userInfo.password).then(response => {
          if(response.data.code==200){
            const data = response.data
            commit('SET_TOKEN', data.data)
            setToken(response.data.data)
            resolve()
          }else{
            this.$router.push({ path: '/login' })
          }

        }).catch(error => {
          reject(error)
        })
      })
    },

4.2 后端逻辑

后端使用密钥进行判断，是否可以走免密流程，并查验账号是否存在，用于区分两套流程和安全校验。

五、总结

企业内部应用免登，当企业开发者开发了一个企业内部应用，企业员工在钉钉内使用该应用时，无需输入账户密码，便可实现自动登录你所开发的系统。

步骤	说明
步骤一：获取免登授权码。	PC端暂不支持小程序开发，如果要开发PC端应用，需使用微应用开发方式。
步骤二：获取access_token。	调用接口获取企业内部应用的access_token。
步骤三：获取用户userid。	调用接口通过免登码获取用户信息获取用户的userid。
步骤四：获取用户详情。	调用接口查询用户详情获取用户详情信息