身份验证-实现网页方式登录应用（登录第三方网站）.md 17 KB
实现网页方式登录应用（登录第三方网站）
更新于 2026-07-02本文档指导你如何实现用户通过浏览器登录应用（扫码或账密方式）。在本场景中，企业内部应用可以通过浏览器网页方式获取用户授权的个人信息。
说明
企业内部应用与三方企业应用实现流程类似，本文档以企业内部应用实现流程为例。
因内部应用的安全考虑，企业内部应用不支持跨组织授权登录。即只有组织内的用户可以通过浏览器网页方式登录应用。
简介
教学内容
本教程介绍用户通过网页（浏览器）的方式登录钉钉应用，并在第三方网站获取用户授权信息。
教学目标
将通过两种实现方式实现网页登录钉钉应用：
内嵌二维码方式实现用户登录授权
构造钉钉登录链接的方式实现用户登录授权
教学范围
面向钉钉应用开发者
前提条件
已经获取开发者权限。
已经申请了
Contact.User.mobile和Contact.User.Read权限点，如何申请可参考添加接口调用权限。已经安装了 IDE 或其他开发工具。
开发流程
方式一：使用钉钉提供的页面登录授权
构造钉钉应用授权登录访问地址
重要
为了方便阅读，以下参数示例做了换行处理。正常情况下无需进行参数换行。
redirect_uri必须要做urlencode，以下示例已经进行urlencode。
以下登录页面在初次校验登录状态时显示。
redirect_uri必须要做urlencode
1
2
3
4
5
6
7
https://login.dingtalk.com/oauth2/auth?
redirect_uri\=https%3A%2F%2Fwww.aaaaa.com%2Fauth
&response_type\=code
&client_id\=dingxxxxxxx //应用的AppKey
&scope\=openid corpid //此处的openId保持不变
&state\=dddd
&prompt\=consent
Enter to Rename, ⇧Enter to Preview
| 参数 | 是否必填 | 说明 |
|---|---|---|
| redirect_uri | 是 | 授权通过/拒绝后回调地址。 |
重要
需要与开发者后台钉钉登录与分享的地址保持一致，redirect_uri需要进行urlencode。 | | response_type | 是 | 固定值为code。
授权通过后返回authCode。 | | client_id | 是 | 步骤一中创建的应用详情中获取。
企业内部应用：client_id为应用的 Client ID。
第三方企业应用：client_id为应用的 Client ID。 | | scope | 是 | 授权范围，授权页面显示的授权信息以应用注册时配置的为准。
当前只支持两种输入：
openid：授权后可获得用户userid
openid corpid：授权后可获得用户id和登录过程中用户选择的组织id，空格分隔。注意url编码。 | | prompt | 是 | 值为consent时，会进入授权确认页。 | | state | 否 | 跟随authCode原样返回。 | | org_type | 否 | 控制输出特定类型的组织列表，org_type=management 表示只输出有管理权限的组织。
重要
scope包含corpid时该参数存在意义。 | | corpId | 否 | 用于指定用户需要选择的组织。
重要
scope包含corpid时该参数存在意义。
传入的corpId需要是当前用户所在的组织。 |
方式二：内嵌二维码方式登录授权
重要
嵌入二维码的页面必须和redirect_uri参数所指定的页面“同源”，否则扫码后会没有反应，“同源”指：协议相同、二级或三级域名相同、端口号相同等。详情请参考文档浏览器的同源策略。
在页面中引入钉钉扫码登录 JS SDK。
1
Enter to Rename, ⇧Enter to Preview
在需要引入扫码登录的地方，调用如下方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* STEP2：指定这个包裹容器元素的CSS样式，尤其注意宽高的设置 */
.self-defined-classname {
width: 300px;
height: 300px;
}
// STEP3：在需要的时候，调用 window.DTFrameLogin 方法构造登录二维码，并处理登录成功或失败的回调。
window.DTFrameLogin(
{
id: 'self_defined_element',
width: 300,
height: 300,
},
{
redirect_uri: encodeURIComponent('http://www.aaaaa.com/a/b/'),
client_id: 'dingxxxxxxxxxxxx',
scope: 'openid',
Enter to Rename, ⇧Enter to Preview
参数说明((TypeScript语言描述))：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// ********************************************************************************
// window.DTFrameLogin方法定义
// ********************************************************************************
window.DTFrameLogin: (
frameParams: IDTLoginFrameParams, // DOM包裹容器相关参数
loginParams: IDTLoginLoginParams, // 统一登录参数
successCbk: (result: IDTLoginSuccess) \=> void, // 登录成功后的回调函数
errorCbk?: (errorMsg: string) \=> void, // 登录失败后的回调函数
) \=> void;
// ********************************************************************************
// DOM包裹容器相关参数
// ********************************************************************************
// 注意！width与height参数只用于设置二维码iframe元素的尺寸，并不会影响包裹容器尺寸。
// 包裹容器的尺寸与样式需要接入方自己使用css设置
interface IDTLoginFrameParams {
id: string; // 必传，包裹容器元素ID，不带'#'
width?: number; // 选传，二维码iframe元素宽度，最小280，默认300
height?: number; // 选传，二维码iframe元素高度，最小280，默认300
}
Enter to Rename, ⇧Enter to Preview
访问已经构造的钉钉应用授权登录访问地址（方式一）/通过扫描二维码的方式实现用户登录授权（方式二）。
当用户同意授权后，此时会携带 authCode 到步骤五重定向 URL 的路径后，例如：
http://example.com?code=f85c6*****7b77&authCode=f85c6******e49e87b77。此处，code 和 authCode 一致，取任一即可。
根据 authCode，调用服务端获取用户token接口，获取用户个人token。
根据用户个人token，调用获取用户通讯录个人信息接口，获取授权用户个人信息。
说明
调用获取用户通讯录个人信息接口，获取当前授权人的信息，unionId参数值传字符串me。
至此，你就可以获取到用户的个人授权信息。
登录钉钉开发者后台。
单击应用开发 > 企业内部应用 > 钉钉应用 > 创建应用。
填写应用信息。
配置项 是否必选 配置说明 应用名称 是 输入应用名称，应用名称最小长度为 2 个字符。 应用描述 是 简要描述应用提供的产品或服务，应用描述最小长度为 4 个字符。 应用图标 否 上传应用图标，图标要求 JPG/PNG 格式、240 px * 240 px 以上、1:1 、2 MB 以内的无圆角图标。 单击保存，进入应用详情页，单击基础信息 > 凭证与基础信息，查看应用 Client ID 和 Client Secret。
注意：请保存 Client ID 和 Client Secret，后续会使用。
在应用详情页，单击开发配置 > 安全设置，进入安全配置页面。
在重定向URL（回调域名）一栏中，输入
http://localhost:5173，用于后续前端页面重定向使用。本示例使用
http://localhost:5173作为重定向域名，你可以根据实际环境定义。配置完成后，单击保存。
在应用详情页，单击应用发布 > 版本管理与发布，进入版本发布页面。
单击创建新版本，进入版本详情页面。
配置版本信息：
配置项 说明 应用版本号 使用默认版本即可。 版本信息 填写版本信息内容，根据自身业务情况填写。 应用可见范围 选择任意范围即可。 配置完成后。单击下方保存。
在保存成功的弹框页面，单击直接发布。
如果你不是企业管理员，发布应用时需要企业管理员审批，发布仅我可见则无需管理员审批。
确保已经完成上方步骤，获取运行下方demo示例的参数和基本配置。
下载web-login-application-demo-java-construct-link.zip示例 Demo。
打开 IDE，并导入已下载的 Demo。
示例代码分为 backend（后端代码目录）和frontend（前端代码目录）。
打开后端代码目录，在 resources 目录中修改
application.properties文件，填写clientId（应用Client ID）和clientSecret（应用Client Secret）参数。
点击启动后端服务。
说明
在启动后端服务前，请确保已经正确安装Maven 和 JDK，并配置了相关环境；如果是初次安装 IDE，需要在 IDE 中修改相关配置文件。
确保 5173 和 8080 端口没有被占用。
点击前端项目文件，鼠标右键并选择终端打开。
在终端窗口中，输出以下命令：
npm installnpm run dev注意：windows 在启动时候，请使用
_npm run dev:raw_
至此，前端和后端服务已经启动成功。
确保已经完成上方步骤，获取运行下方demo示例的参数和基本配置。
打开 IDE，并导入已下载的 Demo。
示例代码分为 backend（后端代码目录）和frontend（前端代码目录）。
打开后端代码目录，在 resources 目录中修改
application.properties文件，填写clientId（应用Client ID）和clientSecret（应用Client Secret）参数。
打开前端代码目录，在src目录下修改
main.js，并填写正确的corpId和clientId（应用Client ID）。
点击启动后端服务。
说明
在启动后端服务前，请确保已经正确安装Maven 和 JDK，并配置了相关环境；如果是初次安装 IDE，需要在 IDE 中修改相关配置文件。
确保 5173 和 8080 端口没有被占用。
点击前端项目文件，鼠标右键并选择终端打开。
在终端窗口中，输出以下命令：
npm installnpm run dev注意：windows 在启动时候，请使用
_npm run dev:raw_
至此，前端和后端服务已经启动成功。
在浏览器访问
http://localhost:5173，展示界面如下：展示 说明 使用钉钉提供的页面登录授权 
内嵌二维码方式登录授权 
扫描二维码/打开钉钉登录授权页，用户授权后，即可查看用户个人信息。
第三方企业应用无法获取用户完整手机号，为保障用户数据安全，已对手机号信息进行脱敏处理，第三方企业应用获取手机号示例：
155****3240。展示 说明 使用钉钉提供的页面登录授权 
内嵌二维码方式登录授权 