浙政钉（专有钉钉）扫码登录对接

浙政钉登录 ：专有钉钉开放平台

官网登录流程图

开发指南 => 身份验证 => ( 扫码登录, 获取免登授权码 )

申请专有钉钉账号：创建应用，获取appKey和appSecrect

配置回调地址

专有钉钉， 浙政钉

专有钉钉（测试版）：
登录域名：login.dg-work.cnn
浙政钉（正式版）：
登录域名： login-pro.ding.zj.gov.cn（域名对应政务外网IP：59.202.52.68）
开发环境用专有钉钉域名， 正式环境用浙政钉域名， 注意切换

浙政钉网站扫码登录

redirect_uri: 回调地址（后台管理配置）
client_id: 应用标识（后台管理配置）
在方式一中， 回调地址用作登录成功 钉钉 302 的地址， 会在回调地址拼接code和state参数
拿到 钉钉返回的code码， 通过code码 调后端获取用户信息接口

1.方式一 使用政务钉钉提供的扫码登录页面

 /*
    直接调转到 当前地址即可
    https://login.dg-work.cn/oauth2/auth.htm?response_type=code&client_id=应用标识&redirect_uri=回调地址&scope=get_user_info&authType=QRCODE 
  */ 

2.方式二 支持网站将政务钉钉登录二维码内嵌到自己页面中

/*
    步骤一
    在页面中通过iframe嵌入页面 width="360px" height="360px"
    地址比方式一 多一个 embedMode=true 的参数
    https://login.dg-work.cn/oauth2/auth.htm?response_type=code&client_id=应用标识&redirect_uri=回调地址&scope=get_user_info&authType=QRCODE&embedMode=true
  */

  /*
    步骤二
    监听 message 事件
  */ 
  <script type="application/javascript">
    window.addEventListener('message', function(event) {
      // 这里的event.data 就是登录成功的信息
      // 数据格式：{ "code": "aaaa", "state": "bbbb" }
      alert(JSON.stringify(event.data));
    });
  </script>

浙政钉h5扫码登录

npm install gdt-jsapi

 import dd from 'gdt-jsapi';
  dd.ready(() => {
    dd.getAuthCode({}).then(res =>{
      // 通过 res 返回的code 或 authCode 调用后端的获取用户信息的接口
      console.log(res)
    }).
    catch(err =>{})
  })
  

// 本人在项目中用的是第二种方式
<div class="login_content">
	<h3>指标填报系统</h3>
 	<p>请扫下方二维码登录，扫码后在手机上点击“确认授权”即可</p>
 	<!-- 登录二维码的区域 iframe -->
 	<iframe :src="scanUrl" frameborder="0" height="360px" width="360px" />
</div>
data () {
  // 通过后台配置 redirect_uri, client_id  
  const redirect_uri = 'http://127.0.0.1'
  const client_id = 'xxxx'
  return {
    scanUrl: `https://login-pro.ding.zj.gov.cn/oauth2/auth.htm?response_type=code&client_id=${client_id}&redirect_uri=${redirect_uri}&scope=get_user_info&authType=QRCODE&embedMode=true`
  }
},
// 浙政钉登录
loginListener(event) {
   // console.log('进入message', event)
   const code = event.data && event.data.code
   if ( code ) {
     // 根据 code 去获取用户信息
     console.log(code)
   }
 },
mounted() {
 // 浙政钉 扫码登录第三方网站
 window.addEventListener('message', this.loginListener);
},
// css
.login_content {
  background-color: #fff;
  padding: 30px 40px;
  border-radius: 5px;
  margin-right: 14%;
  h3 {
    font-size: 28px;
    color: #000000;
    font-weight: 400;
    border-bottom: 1px solid #efefef;
    padding: 14px 0;
    margin: 0 -40px;
    text-align: center;
  }  
  p {
    margin: 24px 0 14px;
    font-size: 14px;
    color: #999999;
  }
  #login_container {
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
  }
}

对接中遇到的问题

注意：配置回调地址时千万带#，转码后redirect_uri回调地址生成的二维码会有问题，下面的二维码就是我当时配置回调地址时带了#，转码时#不会处理，导致生成的二维码有问题，扫码过后一直重定向到专有钉钉手机号登录页

正确生成的二维码是这个样的