由于身份验证可以加载模型

Question

我刚刚按照 startup tutorial 加载了一个模型。

首先，我从 autodesk 开发人员那里获得了现有的 client_id 和 client_secret，然后使用 client_id 和 client_secret 构建了一个基于 express 的应用程序以检索访问权限标记如

var config ={
    credentials: {
        client_id:  'xxxxxxxx',
        client_secret:  'xxxxxxx',
        grant_type: 'client_credentials',
        scope:'data:read data:write data:create bucket:create bucket:read'
    },
    BaseEndPoint: 'https://developer.api.autodesk.com',
    Version: 'v1'
} ;
config.AuthenticateEndPoint =config.BaseEndPoint + '/authentication/' + config.Version + '/authenticate' ;

unirest.post (config.AuthenticateEndPoint)
    .header ('Accept', 'application/json')
    .send (config.credentials)
    .end (function (response) {

    }

{"access_token":"ruTBP6POxlpcy8HK2KlWzoFu61oE","token_type":"Bearer","expires_in":86399}

然后将此访问令牌发送回一个简单的 html 客户端。

<!DOCTYPE html>
<html>
  <head>
    <title>Very Basic 3D Viewer</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
    <meta charset="utf-8">


    <script   src="js/jquery-3.1.1.min.js" ></script>

    <!-- The Viewer CSS -->
    <link rel="stylesheet" href="https://developer.api.autodesk.com/viewingservice/v1/viewers/style.min.css" type="text/css">
    <link rel="stylesheet" href="https://developer.api.autodesk.com/viewingservice/v1/viewers/A360.css" type="text/css">
  </head>

  <body>
    <div id="viewer"></div>
    <!-- The Viewer JS -->
    <script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/three.min.js?v=v1.2.22"></script>
    <script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js?v=v1.2.22"></script>
    <script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/Autodesk360App.js"></script>

    <!-- Developer JS -->
    <script>
        $(document).ready(function () {

                var viewerApp;
                var options = {
                    env: 'AutodeskProduction',
                    accessToken: 'YOUR ACCESS TOKEN'
                };

                var documentId = 'YOUR BASE 64 ENCODED URN';

                $.getJSON( 'http://'+window.location.host+ "/gettoken", function( data ) {
                    console.log(data);

                    options.accessToken = data.accessToken;
                    documentId = data.urn;
                    options.document = data.urn;
                });


                console.log(options.accessToken, documentId);

                Autodesk.Viewing.Initializer(options, function onInitialized(){
                    viewerApp = new Autodesk.A360ViewingApplication('viewer');
                    //viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D);
                    //viewerApp.loadDocumentWithItemAndObject(documentId);
                });


        });


    </script>
  </body>
</html>

客户端出现问题，可以成功获取访问令牌。然而，这给了我一个错误

'POST https://developer.api.autodesk.com/utility/v1/settoken 401 (Unauthorized)'

        Autodesk.Viewing.Initializer(options, function onInitialized(){
            viewerApp = new Autodesk.A360ViewingApplication('viewer');
            //viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D);
            //viewerApp.loadDocumentWithItemAndObject(documentId);
        });

我不知道是什么问题，api 或客户端或服务器端有问题吗？

注意：在注册开发者 api 时，我只是将回调命名为 http://localhost:3000 因为目前我正在本地环境中对其进行测试，这是问题所在吗？

Answer 1

代码在这里

var config ={
    credentials: {
        client_id:  'xxxxxxxx',
        client_secret:  'xxxxxxx',
        grant_type: 'client_credentials',
        scope:'data:read data:write data:create bucket:create bucket:read'
    },
    BaseEndPoint: 'https://developer.api.autodesk.com',
    Version: 'v1'
} ;
config.AuthenticateEndPoint =config.BaseEndPoint + '/authentication/' + config.Version + '/authenticate' ;

unirest.post (config.AuthenticateEndPoint)
    .header ('Accept', 'application/json')
    .send (config.credentials)
    .end (function (response) {

    }

是正确的。您获得了一个有效的访问令牌，我假设您运行此代码来自您的 node.js 服务器。在您的服务器上，您实现了一个端点，即 /gettoken，您的客户端应用程序将调用该端点以获取返回到您的页面的访问令牌，从而初始化查看器。到目前为止一切顺利。

但是，当您考虑客户端的调用顺序时，就会出现问题。

$(document).ready(function () {

意味着您的代码将在 DOM 准备就绪时执行 - 这很好。在这里，您初始化变量：

var options = {
    env: 'AutodeskProduction',
    accessToken: 'YOUR ACCESS TOKEN'
};

var documentId = 'YOUR BASE 64 ENCODED URN';

到这里还是ok的，但是注意accessToken和documentId都已经invalid valid了

接下来，您使用 $.getJSON() 查询访问令牌，这是一种调用端点的异步方式。这意味着这个功能 returns 在您阅读回复之前立即生效。

所以下一个执行的代码不是回调函数中的代码，而是这个代码：

console.log(options.accessToken, documentId);

Autodesk.Viewing.Initializer(options, function onInitialized(){
    viewerApp = new Autodesk.A360ViewingApplication('viewer');
    //viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D);
    //viewerApp.loadDocumentWithItemAndObject(documentId);
});

此时accessToken和documentId仍然取到了无效值，这会导致你的代码失败。简而言之，您需要从回调中初始化 Viewer 以等待 /gettoken 响应返回。

$.getJSON( 'http://'+window.location.host+ "/gettoken", function( data ) {
    console.log(data);

    options.accessToken = data.accessToken;
    documentId = data.urn;
    options.document = data.urn;

    Autodesk.Viewing.Initializer(options, function onInitialized(){
        viewerApp = new Autodesk.A360ViewingApplication('viewer');
        //viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D);
        //viewerApp.loadDocumentWithItemAndObject(documentId);
    });
});

由于身份验证可以加载模型

can load up the model due to the authentication

autodesk-forge