vue+django钉钉扫码登录

一、生成第三方的url地址，钉钉跳转扫码界面

<template>
    <p><button @click="dingding">钉钉登录</button></p>
</template>

<script>
export default {
    data(){
        return{
        }
    },
        // 钉钉登录
        dingding:function(){
            var appid = 'dingoajf8cqgyemqarekhr'
    	    var redirect_uri = 'http://127.0.0.1:8080/'+'dingding'

		    var url = 'https://oapi.dingtalk.com/connect/qrconnect?appid='+appid+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+redirect_uri

		    window.location.href = url;
        },
    }
}
</script>

<style>

</style>

二、完成扫码操作，跳转到对应的回调地址，并携带相关信息，将第三方返回的信息发送给后端处理

<template>
  <div>

    <div v-show='is_show' style="    padding-top: 20%;padding-left: 40%;font-size: 20px">
    跳转中....
    </div>

    <div v-show='visiable'>
    绑定用户
    <br>
     用户名: <input type="text" v-model="username"  @blur="check_username">
    <span style="color:red">{{username_message}}</span><br>
    密码: <input type="password" v-model="password"><br>
    <button @click="bindUser">绑定</button>
    </div>
    </div>
</template>
<script>

import Axios from 'axios'
export default {
  data() {
    return {
      visiable: false, // 绑定用户窗口
      uid: "", // weibo_uid
      username: "",
      password: "",
      username_message: "",
      username_error: false,
      is_show: true,
    };
  },
  mounted() {
    this.getCode();
  },
  methods: {
    check_username() {
      console.log("判断用户名");
      console.log(this.username == "");
      var reg = new RegExp(/^[a-zA-Z0-9_-]{4,16}$/); //字符串正则表达式 4到14位（字母，数字，下划线，减号）
      if (this.username == "") {
        this.username_message = "用户名不能为空";
        this.username_error = true;
        return false;
      }
      if (!reg.test(this.username)) {
        this.username_message = "用户名格式不正确";
        this.username_error = true;
        return false;
      }
      return true;
    },

    // 获取钉钉传过来的code，发送给django后端进行验证
    getCode() {
      console.log('当前路由》》》',this.$route.path)
      // 获取url中的code 信息
      // 当前url 是  http://192.168.56.100:8888/oauth/callback/?code=fe6cbe07708aecf4a2b3d942ed692c4c
      let code = this.$route.query.code;
      console.log(this.$route.query);
      // 给后端发送code
      let params = { code: code };
      //回调
      Axios.post('user/dingding/',params).then((resp) => {
        console.log(resp);
        if (resp.data.code == 200) {
          let res = resp.data;
          localStorage.setItem("username", res.data.username);
          localStorage.setItem("uid", res.data.id);
          this.login_username = res.data.username;
          this.opened = false;
          this.$router.push("/");
          alert('登录成功')
        } else {
          this.visiable = true;
          this.is_show = false;
          this.uid = resp.data.data;
          console.log('11111111111111111',this.uid)
        }
      });
    },
    bindUser() {
      Axios.post('user/dingding/bind/',{
        username: this.username,
        password: this.password,
        unid: this.uid,
      })
      // 绑定用户钉钉
      .then((resp) => {
        console.log(resp);
        if (resp.data.code == 200) {
          let res = resp.data;
          localStorage.setItem("username", res.data.username);
          localStorage.setItem("uid", res.data.id);
          this.login_username = res.data.username;
          this.opened = false;
          this.$router.push("/");
          alert('登录成功')
        } else {
          alert(resp.data.message);
        }
      });
    },
  },
};
</script>

三、账号已经绑定钉钉使用的后端接口

class DingDingCallBack(APIView):
    """
    钉钉三方登录回调
    """

    def post(self, request):
        # 获取code
        code = request.data.get('code')
        t = time.time()
        # 时间戳
        timestamp = str((int(round(t * 1000))))
        appSecret = 'Fcah25vIw-koApCVN0mGonFwT2nSze14cEe6Fre8i269LqMNvrAdku4HRI2Mu9VK'
        # 构造签名
        signature = base64.b64encode(
            hmac.new(appSecret.encode('utf-8'), timestamp.encode('utf-8'), digestmod=sha256).digest())
        # 请求接口，换取钉钉用户名
        payload = {'tmp_auth_code': code}
        headers = {'Content-Type': 'application/json'}
        res = requests.post('https://oapi.dingtalk.com/sns/getuserinfo_bycode?signature=' + urllib.parse.quote(
            signature.decode("utf-8")) + "&timestamp=" + timestamp + "&accessKey=dingoajf8cqgyemqarekhr",
                            data=json.dumps(payload), headers=headers)
        res_json = res.json()
        if res_json['errcode'] != 0:
            return {'message': res_json['errmsg'], 'code': 500, 'data': {'uid': '110'}}
        unid = res_json['user_info']['unionid']
        # 查找用户是否已经添加绑定关系
        user = OauthUser.objects.filter(uid=unid).first()
        if user:
            # 用户已经添加绑定关系
            if user.user:
                # 直接返回主页面
                return Response({'message': 'ok', 'code': 200, 'data': res})
        return Response({'message': 'Not bind account', 'code': 201, 'data': unid})

四、账号未绑定钉钉的后端接口

class BindDingDing(APIView):
    """
    绑定钉钉账号
    """

    def post(self, request):
        unid = request.data.get('unid')
        username = request.data.get('username')
        password = request.data.get('password')
        user = User.objects.get(username=username)
        rest = check_password(password, user.password)
        if not rest:
            return Response({'message': '账号密码错误', 'code': 405})
        oauth = OauthUser.objects.filter(uid=unid).first()
        if oauth:
            return Response({'message': '该用户已经绑定，无法重复绑定', 'code': 403})
        weibo = 'dingding'
        users = User.objects.get(username=username)
        dingding = OauthUser.objects.create(user=users, uid=unid, oauth_type=weibo)
        dingding.save()
        data = [{
            'username': username, 'id': unid
        }]
        return Response({'message': '绑定成功', 'code': 200, 'data': data})