Vue项目接入钉钉扫码登录

亦凉 2021-11-22 14:22 1341阅读 0赞

## 官方开发文档 [https://open-doc.dingtalk.com/microapp/serverapi2/kymkv6][https_open-doc.dingtalk.com_microapp_serverapi2_kymkv6] ##

### 1.注册相关账号获取所需信息,进入钉钉开发平台，登录企业管理员账号，进入[https://open-dev.dingtalk.com/\#/loginMan][https_open-dev.dingtalk.com_loginMan] ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70][]

### 2.点击创建扫码登录应用授权 ###

### 3.创建成功以后拿到appId和appSecret ###

### 4.在index.html文件中引入 ###

### 5.实例化js对象 ###

methods: {
        // 获取钉钉扫码相关参数
        codeLogin () {
          codeLogin().then(res => {
            if (res.data.code != 200) return this.$Message.error(res.data.message)
            this.appid = res.data.data.appid
            this.redirect_uri = res.data.data.redirectUri
            let obj = DDLogin({
              id: 'login_container',
              // goto这里需要对url整体做一个urlencode编码
              goto: encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=' + this.appid + '&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=' + this.redirect_uri + ''),
              style: 'border:none;background-color:#FFFFFF;',
              width: '365',
              height: '300'
            })
            let hanndleMessage = function (event) {
              let origin = event.origin
              // 判断是否来自ddLogin扫码事件
              if (origin === 'https://login.dingtalk.com') {
                let loginTmpCode = event.data
                // 这里url不用进行urlencode编码
                let url = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=' + this.appid + '&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=' + this.redirect_uri + '&loginTmpCode=' + loginTmpCode
                window.location.href = url
              }
            }
            if (typeof window.addEventListener !== 'undefined') {
              window.addEventListener('message', hanndleMessage, false)
            } else if (typeof window.attachEvent !== 'undefined') {
              window.attachEvent('onmessage', hanndleMessage)
            }
          })
        }
      },
      mounted () {
        this.codeLogin()
      }

这里用到了之前注册应用给的appId和appSecret这两个参数，我这里是由后端接口返回的，直接写死在前端当然也可以

这时候打开页面用属于之前注册账号所属企业的钉钉号就可以进行扫码了，跳转至回调域名所配置的url，具体关于扫码登录权限的问题可以去官方文档详细查看

[https_open-doc.dingtalk.com_microapp_serverapi2_kymkv6]: https://open-doc.dingtalk.com/microapp/serverapi2/kymkv6
[https_open-dev.dingtalk.com_loginMan]: https://open-dev.dingtalk.com/#/loginMan
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70]: /images/20211122/cb5b49ef47ef482d9bf0e7ab174566af.png