钉钉PC端使用 Blazor WebAssembly 读取用户信息

Posted 2023-05-08 707wk

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了钉钉PC端使用 Blazor WebAssembly 读取用户信息相关的知识，希望对你有一定的参考价值。

功能: 在钉钉内打开 Blazor WebAssembly 网站时, 读取钉钉当前的用户信息, 并显示启用的功能列表

版本: .NET6

界面库: Ant Design Blazor

基础要求:

1. 让公司管理员设置自己为钉钉开发者

2. 下载钉钉RC版作为调试工具, 下载地址: https://open.dingtalk.com/document/resourcedownload/h5-debug

3. 钉钉开发者后台 -> 企业内部开发 -> 新建H5微应用. 在开发管理中设置服务器出口IP、应用首页地址、PC端首页地址. 在权限管理中开通调用OpenApp专有API时需要具备的权限权限

4. 有固定公网IP, 建议使用域名绑定

5. 已经使用钉钉的服务端SDK搭建了服务端

在项目的 index.html 文件的 body 里添加

 <script src="https://g.alicdn.com/dingding/dingtalk-jsapi/3.0.12/dingtalk.open.js"></script>
 
     <script>
         // 获取钉钉免登码
         window.GetUserAuthCode = (corpId) => 
             dd.ready(function () 
                 dd.runtime.permission.requestAuthCode(
                     corpId: corpId,
                     onSuccess: function (result) 
                         //alert(result.code);
                         DotNet.invokeMethodAsync(\'ERPQueryTool\', \'StaticDingTalkLogined\', result.code);
                         /*
                             code: \'hYLK98jkf0m\' //string authCode
                         */
                     ,
                     onFail: function (err)  
 
                 );
             );
         ;
 
         // 在钉钉内下载文件
         window.DingTalkDownloadFile = (url, name) => 
             dd.ready(function () 
 
                 dd.biz.util.downloadFile(
                     url: url, //要下载的文件的url
                     name: name, //定义下载文件名字
                     onProgress: function (msg) 
                         // 文件下载进度回调
                     ,
                     onSuccess: function (result) 
                         /*
                           true
                         */
                     ,
                     onFail: function ()  
                 )
 
             );
         ;
 
         // 在钉钉内下载后打开保存目录
         window.DingTalkOpenFolderAfterDownloadFile = (url, name) => 
             dd.ready(function () 
 
                 dd.biz.util.downloadFile(
                     url: url, //要下载的文件的url
                     name: name, //定义下载文件名字
                     onProgress: function (msg) 
                         // 文件下载进度回调
                     ,
                     onSuccess: function (result) 
                         /*
                           true
                         */
                         dd.biz.util.openLocalFile(
                             url: url, //本地文件的url，指的是调用DingTalkPC.biz.util.downloadFile接口下载时填入的url，配合DingTalkPC.biz.util.downloadFile使用
                             onSuccess: function (result) 
                                 /*
                                   true
                                 */
                             ,
                             onFail: function ()  
                         );
                     ,
                     onFail: function ()  
                 );
 
             );
 
         ;
     </script>

在项目的 MainLayout.razor 里添加

    private static Action<string>? LoginedAction;

    protected override async void OnAfterRender(bool firstRender)
    
        base.OnAfterRender(firstRender);

        if (!firstRender)
        
            return;
        

        LoginedAction = DingTalkLogined;

        StartDingTalkLogin();

    

    // 调用JS方法, 获取 authCode
    private async void StartDingTalkLogin()
    
        await JS.InvokeAsync<string>("GetUserAuthCode", Tool.LoginHelper.DingTalkCorpId);
    

    // JS方法回调
    [JSInvokable]
    public static void StaticDingTalkLogined(string authCode)
    
        LoginedAction?.Invoke(authCode);
    

    // 根据 authCode 获取用户信息
    private async void DingTalkLogined(string authCode)
    
        // 调用服务端获取 authCode 对应的用户信息

        // 获取启用的功能列表