编程学习之旅

Appearance

钉钉小程序授权登录详细说明 ​

项目地址 ​

页面路径 ​

  • pages/DingDingMiniProgram/DingDingMiniProgram.vue

功能描述 ​

该页面实现了钉钉小程序的授权登录功能，用户进入页面后会自动触发钉钉授权逻辑，获取authCode用于后续登录操作。

文件结构 ​

  • DingDingMiniProgram.vue: 主页面文件，包含钉钉授权登录的逻辑。
  • 钉钉小程序授权登录.md: 说明文档，详细描述功能和实现步骤。

核心功能 ​

  1. 自动触发登录

    • 页面加载时自动调用钉钉的getAuthCode接口获取授权码。

  2. 授权码处理

    • 成功获取authCode后，可调用后端接口完成登录。

  3. 错误处理

    • 针对授权失败的情况，提供了错误提示和日志记录。

代码解析 ​

页面模板 ​

vue
<template>
	<view class="phoneLogin-box"></view>
</template>
  • phoneLogin-box: 页面容器。

页面逻辑 ​

onLoad方法 ​
javascript
onLoad(option) {
	// 只要进来就要走登录
	// #ifdef MP-ALIPAY
	const that = this;
	this.option = option;
	dd.getAuthCode({
		success: function(res) {
			if (res?.authCode) {
				uni.hideLoading();
				that.code = res.authCode;
				// 后续处理逻辑
				// that.mpFreeLogin(res.authCode, option);
			} else {
				uni.hideLoading();
				uni.showToast({
					title: '钉钉授权登录失败',
					icon: 'none'
				});
				this.msgTip = '钉钉授权登录失败';
				console.error('钉钉授权登录失败', res);
			}
		},
		fail: function(err) {
			uni.hideLoading();
			uni.showToast({
				title: '钉钉授权登录失败',
				icon: 'none'
			});
			console.error('钉钉授权登录失败', err);
		}
	});
	// #endif
}
  • 功能: 页面加载时触发钉钉授权。
  • 逻辑:
    • 调用dd.getAuthCode获取授权码。
    • 成功时保存authCode，失败时提示错误信息。

样式 ​

scss
<style lang="scss" scoped>
.phoneLogin-box {
	/* 样式可根据需求自定义 */
}
</style>
  • 样式: 当前页面无特殊样式，可根据需求自定义。

注意事项 ​

  1. 平台判断

    • 使用#ifdef MP-ALIPAY确保代码仅在钉钉小程序中执行。

  2. 授权失败处理

    • 提供用户友好的错误提示，避免因授权失败导致用户困惑。

  3. 后续逻辑

    • 获取authCode后需调用后端接口完成登录。

  4. 日志记录

    • 在success和fail回调中记录日志，便于排查问题。

总结 ​

通过以上实现，用户进入钉钉小程序页面后可自动完成授权登录，逻辑简单清晰，适合快速集成到项目中。