Podio Javascript SDK：客户端限制显示来自跑道的图像

Question

我目前正在使用 Podio JS SDK to connect to the podio REST API. I have setup a login screen to capture username and password using the username and password authentication 流程。

我可以提出请求并获得我需要的信息。在我的一个请求中，我收到了一张图片 url。然后我将 img url 放入像这样的图像标签中，

<img src="img.url"/>

问题是我的客户端无法查看图像。我在这里查看 Working with files 以找到答案。

问题是图像只能由当前登录的用户在客户端中查看，但我已经通过身份验证。

我错过了什么吗？我如何显示图像，因为我已经使用用户名和密码登录，我将 access_token、refresh_token 等存储在本地存储中，并且可以进行所有其他必要的调用.

Answer 1

尝试通过 headers 发送图像。这曾经有效，尽管它是一个非常笨拙的解决方案。可能会被新的 PodioAPI 弃用。

首先设置你的函数。

function showImage($item, $index, $id, $style = '', $class='', $alt='',$imgtitle='') {

foreach($item->fields as $field) {

    if($field->field_id== $id) {
        $picture_id = $field->values[$index]['value']['file_id'];
        echo "<img style='$style' class='$class' src='getImage.php?id=$picture_id' alt='$alt' title='$imgtitle' />";
        global $picture_id;
    }
}
}

这将是你的 getimage.php。您也可以像这样设置 PDF。

$img_id = $_GET['id'];

$cache = new cache(
        ...
        );

$file_id = "image{$img_id}";
if(!$cache->has($file_id)) {
    $file = $cache->set($file_id, PodioFile::get($img_id));
} else {
    $file = $cache->get($file_id);
}

$picture_id = "image_cache_{$img_id}";
if(!$cache->has($picture_id)) {
    $image = $cache->set($picture_id, Podio::get($file->link, array(), array('file_download' => true))->body);
} else {
    $image = $cache->get($picture_id);
}

header('Content-Type: image/png');
echo $image;

希望对您有所帮助。

Answer 2

虽然您有一个访问令牌并且可以使用 username and password authentication 访问您的所有跑道数据，但跑道的身份验证是基于 cookie 的，因此如果您的客户端不通过跑道网络应用程序的登录屏幕进行身份验证，您的客户端将无法直接从网络应用程序读取图像。您的访问将被阻止。

解决方案

如果您没有通过客户端进行身份验证，但可以访问 api，您可以从此处下载原始图像数据：https://api.podio.com/file/{{imgId}}/raw。获得原始图像数据后，您可以将数据编码为 base64 格式，如果它是 Web 客户端，则在客户端中使用 Data URI 作为 <img> 标签的 src。

Podio Javascript SDK：客户端限制显示来自跑道的图像

Podio Javascript SDK: Client Restricted from displaying Image from podio

html

javascript

angularjs

podio

ionic-framework