钉钉 基于vue开发h5微应用,免登录获取用户信息

需求
在钉钉里面内嵌一个自定义的h5应用,点击微应用获取到用户信息,实现微应用免登录访问

vue + 钉钉

  • 先安装 npm install dingtalk-jsapi --save

vue根据钉钉企业id获取微应用免登授权码code

import * as dd from 'dingtalk-jsapi'

/* eslint-disable */
export function GetCode(callback) {
  const corpId = 'xxxxxxxxx' //钉钉企业id
  if (dd.env.platform !== 'notInDingTalk') {
    dd.ready(() => {
      dd.runtime.permission.requestAuthCode({
        corpId: corpId,
        onSuccess: (info) => {
          callback(info.code)
        },
        onFail: (err) => {
          alert('fail')
          alert(JSON.stringify(err))
        }
      })
    })
  }
}

使用
import { GetCode } from '@/views/dingTalk/Dingding.js'

GetCode((code: any) => {
  console.log(code, 123)
})

获取用户信息【建议用户信息保存在前端缓存中(dd.setStorage)或者cookie中,避免每次进入应用都调用钉钉接口进行免登。】

 async loadData() {
    const userInfos = this.$cookie.get('userinfos')
    if (!userInfos) {
      await GetCode((code: any) => {
        this.serviceType = code
      })
      // 获取企业内部应用的access_token,
      let access_token = await axios
        .get(
          '/gettoken?appkey=xxxx&appsecret=xxxx'
        )
        .then((response: { data: any }) => {
          return response.data.access_token
        })
        .catch((err: Error) => {})
      // 通过免登码和access_token获取用户信息
      let userId = await axios
        .get(
          `/user/getuserinfo?access_token=${access_token}&code=${this.serviceType}`
        )
        .then((res: { data: any }) => {
          return res.data.userid
        })
        .catch((err: Error) => {})
      // 通过userId和access_token获取用户详情
      axios
        .get(`/user/get?access_token=${access_token}&userid=${userId}`)
        .then((res: { data: any }) => {
          this.message = JSON.stringify(res.data)
          this.$cookie.set('userinfos', JSON.stringify(res.data), {
            expires: 7
          })
        })
        .catch((err: Error) => {})
    } else {
      this.message = '获取缓存在cookie中的数据' + userInfos
    }
  }

vue.config.js 配置

devServer: {
 proxy: {
   '/': {
     target: 'https://oapi.dingtalk.com/',
     autoRewrite: true,
     cookieDomainRewrite: {
       '*': ''
     },
     pathRewrite: {
       ['^' + '/']: ''
     }
   }
 }
}
要在Vue中实现钉钉登录获取用户信息,你可以按照以下步骤进行操作: 1. 引用中的代码示例,首先在Vue组件中引入钉钉JSAPI库,并定义一个函数`dingding_no_login`来处理钉钉登录的逻辑。 2. 使用`dd.ready`方法来确保钉钉环境准备就绪后,调用`dd.runtime.permission.requestAuthCode`方法获取登授权码。在`onSuccess`回调中,可以通过`info.code`获取登授权码。 3. 将登授权码发送给后端接口进行验证,并获取用户信息。可以使用`await`关键字来等待后端接口返回结果。 4. 在获取用户信息后,可以进行相应的跳转或保存用户信息的操作。 以下是一个示例代码,展示了如何在Vue中实现钉钉登录获取用户信息: ```javascript import * as dd from 'dingtalk-jsapi' export default { methods: { async dingding_no_login() { if (dd.env.platform != 'notInDingTalk') { dd.ready(async () => { dd.runtime.permission.requestAuthCode({ corpId: "企业id", onSuccess: async (info) => { const res = await dingdingNoLogin({ code: info.code }) // 进行跳转或保存token的操作 } }); }); } } }, mounted() { this.dingding_no_login(); } } ``` 注意替换代码中的"企业id"为你的实际企业id。同时,你需要根据实际需求进行相应的跳转或保存用户信息的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [前端vue 钉钉内部使用公司内部系统登录 应用登录](https://blog.csdn.net/weixin_64064327/article/details/125711817)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [钉钉 基于vue开发h5应用登录获取用户信息](https://blog.csdn.net/weixin_40079913/article/details/120198601)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值