钉钉扫码登录

<div id="login-qr-code"></div>

computed: {
   getRedirectUrl() {
        return encodeURIComponent(window.location.href); //这里是扫码成功后跳转的回调地址
    },
    getAuthUrl() {
        return `https://oapi.dingtalk.com/connect/qrconnect?appid=${this.appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${this.getRedirectUrl}`;
    },
    getGoto() {
        return encodeURIComponent(this.getAuthUrl);
    },
  },
  data() {
    return {
      appid: undefined,//自己申请的appid
      dingCodeConfig: {
        id: "login-qr-code",//匹配到设置的html的id
        style: "border:none;background-color:#FFFFFF;",
        width: "400",
        height: "400",
      },//生成二维码样式的配置
    };
  },
  async mounted(){
  	this.scanQrCodeLogin()
  	await this.getAppkey()
  	await this.getQrCode()
  },
  methods:{
  // 获取 appkey
    getAppkey() {
      api({
        tenantId: tenantId //租户id
      }).then(res => {
        if (res.success && res.data) {
          const {appKey} =res.data
          this.appid=appKey
        }
      }).finally(() => {

      })
    },
    //生成钉钉二维码
    getQrCode() {
      //钉钉扫码流程：扫码成功登录后会自动跳到这个url页面，url路径会携带code，你拿到这个code，调用登录接口成功就跳转。
      let that = this;
      //你的项目页面
      let url = that.getRedirectUrl;
      console.log('生成钉钉二维码=== getRedirectUrl',that.getRedirectUrl)
      console.log('生成钉钉二维码=== appid',that.appid)
      console.log('生成钉钉二维码===getGoto', that.getGoto)
      let obj = DDLogin({
          id: "login-qr-code",//这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span 	id="login_container"></span>
          goto: that.getGoto, //请参考注释里的方式
          style: "border:none;background-color:#FFFFFF;",
          width: "400",//官方参数 365
          height: "400"//官方参数 400
      });

      console.log('生成钉钉二维码===getGoto', that.getGoto)
      let handleMessage = (event) => {
          let origin = event.origin;
          console.log("origin", event.origin);
          if (origin == "https://login.dingtalk.com") { //判断是否来自ddLogin扫码事件。
              let loginTmpCode = event.data;
              //获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了
              console.log("loginTmpCode", loginTmpCode);
              //此步拿到临时loginTmpCode换取正式code
              window.location.href = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${that.appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}&loginTmpCode=${loginTmpCode}`
          }
      };
      if (typeof window.addEventListener != 'undefined') {
          window.addEventListener('message', handleMessage, false);
      } else if (typeof window.attachEvent != 'undefined') {
          window.attachEvent('onmessage', handleMessage);
      }
    },
    //扫码登录
    扫码成功后会把页面进行重定向，地址会携带code  通过code进行接口登录。
    scanQrCodeLogin(){
	    if(this.$route.query.code && this.$route.query.state){
	    	api({
		        code: this.$route.query.code,
		        tenantId: tenantId,
		        type: 'scan'
		      }).then(res => {
		        
		      })
	    }
      
    },
  }