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

日照索隆

已于 2023-12-29 11:01:50 修改

阅读量3.3k

点赞数 1

分类专栏：前端文章标签：钉钉 node.js javascript vue.js 前端

于 2023-01-11 15:08:23 首次发布

本文链接：https://blog.csdn.net/qq_50845984/article/details/128618674

版权

前端专栏收录该内容

1 篇文章

订阅专栏

文章详细描述了如何利用钉钉的OAuth2登录授权机制，从创建应用到配置回调地址，再到前端重定向和后台获取用户信息的完整流程。前端通过调用钉钉登录页面获取authCode，然后将此码传给后台，后台用此code换取access_token并获取用户的通讯录和个人信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：

前端或者后台重定向页面使用钉钉提供的页面登录授权，点击登录跳转到前端的回调页面url获取authCode，前端调用接口把authCode传递给后台，后台通过authCode获取钉钉获取微应用后台免登的access_token，通过access_token获取用户通讯录个人信息.

流程：

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

登录钉钉开发者后台，创建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"
}