如何实现钉钉登录第三方网站登录

流程：

登录 钉钉开发者后台，创建并配置应用。

登录钉钉开发者后台，创建h5微应用

配置个人权限所需要的权限

设置钉钉回调地址

使用钉钉提供的页面登录授权，或者使用自定义扫码登陆

1.回调地址和client_id(appKey)必须的，前端和后台都可以重定向到这个页面。登录跳转到前端回调界面获取url上的authCode传递到第三方后台调取钉钉服务获取access_token,通过token获取钉钉用户信息。

https://login.dingtalk.com/oauth2/auth?
redirect_uri=callback        //必须
&response_type=code
&client_id=dingbbbbbbb       //必须
&scope=openid
&state=dddd
&prompt=consent

2.前端重定向使用钉钉登录页面

<template></template>
<script>
import "./ddLogin";
import { appKey, callbackUrl } from "@/config/env";
import { defineComponent, onMounted } from "vue";


export default defineComponent({
    name: "ddLogin",
    components: {},
    setup() {
        const handleClick = () => {
            const url = `https://login.dingtalk.com/oauth2/auth?redirect_uri=${callbackUrl}&response_type=code&client_id=${appKey}&scope=openid&state=dddd&prompt=consent`
            window.location = decodeURIComponent(url);
        };
        onMounted(() => {
            handleClick();
        });
        return {
            handleClick
        };
    }
});
</script>

<style lang="scss">

</style>

3.钉钉回调页面，第三方服务请求获取钉钉用户信息

node服务，获取前端给到的code调用钉钉新版api

1.nodeJs后台接口封装

import axios from 'axios';
let api= axios.create({
  baseURL: 'https://api.dingtalk.com'
})

//钉钉接口
//获取access_token
const gettoken = data => {
  return api({
      url: '/v1.0/oauth2/userAccessToken',
      method: 'post',
      data
  }).then(res=>res.data);
};

//用户信息
const getuserinfo = token => {
  return api({
      url: '/v1.0/contact/users/me',
      method: 'get',
      headers:{
       'x-acs-dingtalk-access-token':token,
      },
    
  }).then(res=>res.data);
};

export {gettoken,getuserinfo}

2.调取钉钉服务先获取access_token,然后获取用户信息，切记h5微应用应配置相应的个人信息权限。

    try{
      let parms={ clientId:appkey, clientSecret:appsecret,code, refreshToken : code,grantType : "authorization_code"}
      //获取钉钉access_token
      let {accessToken}=await gettoken(parms)
      //获取钉钉用户信息
      var data=await getuserinfo(accessToken)
    } catch (error) {
      throw  error
    }

token返回结果

HTTP/1.1 200 OK
Content-Type:application/json

{
  "accessToken" : "abcd",
  "refreshToken" : "abcd",
  "expireIn" : 7200,
  "corpId" : "corpxxxx"
}

用户信息返回结果

HTTP/1.1 200 OK
Content-Type:application/json

{
  "nick" : "zhangsan",
  "avatarUrl" : "https://xxx",
  "mobile" : "150xxxx9144",
  "openId" : "123",
  "unionId" : "z21HjQliSzpw0Yxxxx",
  "email" : "zhangsan@alibaba-inc.com",
  "stateCode" : "86"
}