项目平台实现钉钉扫码登录

一、目的

1、在钉钉工作台中集成项目平台

2、提升外网访问项目平台的安全性

二、实现流程

a、流程图如下：

b、详细内容

1、使用window.location.href 跳转到钉钉登录的接口，其中client_id为钉钉的client_id，redirect_uri为钉钉登录成功之后的回调地址，注意：参数dingdingredirect_uri需要通过encodeURIComponent进行encode编码，dingdingcorpId为钉钉corpId。

'https://login.dingtalk.com/oauth2/auth?response_type=code&client_id=' + dingdingclient_id + '&scope=openid%20corpid&state=dddd&prompt=consent&redirect_uri=' + encodeURIComponent(dingdingredirect_uri) + '&corpId=' + dingdingcorpId

2、钉钉登录成功之后，会返回一个带Code的地址，然后截取到钉钉返回的code。

const code = window.location.search.slice(1).split('&')[0].split('=')[1]

3、将此code传给后台，后台通过code获取到登录会员的头像地址，姓名，手机号等信息

login(parms).then(res => {
	// 操作代码
}

4、后台返回用户的token信息，前端通过js-cookie第三方库保存返回的token值，其中tasktoken为cookie的名称，可以随意起名字，后台的值为后台返回的token值。

Cookies.set('tasktoken', res.data.data.token) // 保存cookies

5、保存token成功之后，通过window.location.href的方式跳转到首页或者其他的页面。（跳转的地址可以自己设定）

6、请求其他接口时，把保存的token传递给后台，后台判断接口是否有效，有效则正常跳转，否则跳转到钉钉登录页面。

三、遇到的问题及解决方案

1、问题：由于登录的地址和回调之后的地址不一致，所以一直获取不到AuthCode

解决方案：创建钩子函数，在钩子函数中使用 window.location.search的方式获取地址栏的信息

created() {
    // 获取配置项
    const options = this.getstoreoptions()
    parms = window.location.search.slice(1).split('&')[0].split('=')[1]
    if (parms !== undefined) {
      login(parms).then(res => {
        Cookies.set('tasktoken', res.data.data.token) // 保存cookies
        window.location.href = options.jumpurl
      })
    } else {
      this.$alert('钉钉登录失败，请重试！', '提示', {
        confirmButtonText: '确定'
      })
    }
    if (parms === undefined) {
      window.location.href = 'https://login.dingtalk.com/oauth2/auth?response_type=code&client_id=' + options.dingdingclient_id + '&scope=openid%20corpid&state=dddd&prompt=consent&redirect_uri=' + encodeURIComponent(options.dingdingredirect_uri) + '&corpId=' + options.dingdingcorpId
    }
  }

四、实现效果

1、钉钉工作台登录

在钉钉工作台登录时，无需扫码，直接登录

2、网页端登录

网页端登录时，需要使用钉钉扫码登录

3、非公司人员登录

当非公司人员登录的时候，则提示不是内部人员，无法登录

4、token失效登录

当token失效的时候，则返回登录信息失效，点击确定按钮返回钉钉登录页面