Teams App 掃描二維碼

上篇文章我們講了如何在app的manifest裡設定裝置的權限，這篇文章我們來實際操作開發一個可以掃描二維碼的teams app。

首先，我們先到app studio裡，建立一個teams app，然後建立tab，重要的一點是，我們確定manifest.json裡含有這麼一段：

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.10/MicrosoftTeams.schema.json",
  "manifestVersion": "1.10",
  ...
  "devicePermissions": [
    "media",
  ],
  ...
}
           

或者我們在app studio裡確定這個被勾選。

這裡就是說明這個app需要裝置的媒體權限，也就是需要使用攝像頭的權限。

然後，按照标準的步驟來開發tab的配置頁面，這裡我就不再展開了，可以檢視我以前寫的文章：開發Teams Tabs應用程式。

在我們需要調用二維碼掃描的地方，我們使用如下的TypeScript代碼：

const config: microsoftTeams.media.BarCodeConfig = { timeOutIntervalInSec: 30 };
microsoftTeams.media.scanBarCode((error: microsoftTeams.SdkError, decodedText: string) =>
{
  if (error) {
    const extraErrorMessage = error.message ?? '';
    let errorMessage;
    switch (error.errorCode) {
    case 100: // NOT_SUPPORTED_ON_PLATFORM
        errorMessage = '目前平台不支援此API';
        break;
    case 500: // INTERNAL_ERROR
        errorMessage = '内部錯誤';
        break;
    case 1000: // PERMISSION_DENIED
        errorMessage = '權限被使用者拒絕';
        break;
    case 3000: // NO_HW_SUPPORT
        errorMessage = '底層硬體不支援此能力';
        break;
    case 4000: // INVALID_ARGUMENTS
        errorMessage = '參數錯誤';
        break;
    case 8000: // USER_ABORT
        errorMessage = '使用者取消操作';
        break;
    case 8001: // OPERATION_TIMED_OUT
        errorMessage = '操作逾時';
        break;
    case 9000: // OLD_PLATFORM
        errorMessage = '平台太老，不支援此API';
        break;
    default:
        errorMessage = '未知錯誤';
        break;
    }
    output('發生錯誤:' + errorMessage + ' ' + extraErrorMessage);
  }
  else if (decodedText) {
    // 成功，decodedText裡是掃碼識别出的内容
    output(decodedText);
  }
}, config);
           

上面的代碼是typescript，如果大家使用的是javascript，基本類似，這裡就不在具體列出。

如果一切都順利的話，當我們第一次開始掃碼的時候，會彈出一個确認權限的界面，如下：

圖檔來源

如果同意之後，我們就可以開始掃碼了。

下篇文章我們再來看看如何擷取使用者的地理位置。敬請期待 :)