Flutter將影片或圖文分享到抖音

HuStoking發表於2024-05-31
Flutter

如何在 Flutter 中分享影片到抖音

話不多說，先上效果：

原理

釋出內容至抖音 H5 場景_移動/網站應用_抖音開放平臺 (open-douyin.com)

  • 本教程沒有接入抖音原生 SDK 以及任何第三方外掛，使用抖音的 h5 分享介面配合 url_launcher 外掛實現跳轉至抖音分享頁面
  • 需要分享的資源需要被部署在可被公開訪問的伺服器上，呼叫抖音的 h5 分享介面需提供被分享資源的 url
  • 需在自己的服務端進行簽名計算，並將結果返回給前端，以供呼叫抖音的 api

步驟

  1. 在 抖音開放平臺註冊 app，拿到 client_key 和 client_secret
  2. 生成 client_token
  3. 獲取 open_ticket
  4. 在服務端計算簽名
  5. 將需要的引數返回給前端
  6. Flutter 拿到從服務端獲取的引數 + 影片/圖文連結 拉起抖音 App 分享

前端實現

服務端計算簽名的部分就不多說了，大家根據官網的教程來就好，返回給前端的資料結構類似這樣的：

{
// 服務端設定的 用於計算簽名的 隨機字串
"nonceStr": "ae86",
// 簽名
"signature": "665f1211738c4f348d093535e2ef93ac",
// 秒級時間戳
"timestamp": "1717054967",
// 分享型別 預設 h5
"shareType": "h5",
"clientKey": "ztfqxgipi39ko49q"
}

前端生成 分享 schema，並調起分享程式碼：

  Future<void> douyinShare({
    // 圖片列表
    List<String> images = const [],
    // 影片 url
    String? videoUrl = "",
    // 自定義標籤
    List<String> tagList = const [],
    // 標題
    required String title,
  }) async {
    Response response = await dio.get('/<獲取簽名介面>');

    final Map<String, dynamic> param = {
      'title': title,
      'client_key': response.data['clientKey'],
      'nonce_str': response.data['nonceStr'],
      'signature': response.data['signature'],
      'timestamp': response.data['timestamp'],
      'share_type': response.data['h5'],
      // 1-直接跳轉到釋出頁 0-跳轉到編輯頁
      'share_to_publish': '1',
    };

    // 標籤
    param['hashtag_list'] = json.encode(['自定義標籤', '自定義標籤2', ...tagList]);

    // 向 param 中新增圖片或影片
    if (images.isNotEmpty) {
      if (images.length > 1) {
        param['image_list_path'] = json.encode(images);
      } else {
        param['image_path'] = images.first;
      }
    } else if (videoUrl != "") {
      param['video_path'] = videoUrl;
    } else {
      // error handle
    }

    // 固定寫法
    final Uri url = Uri(
      scheme: 'snssdk1128',
      host: 'openplatform',
      path: 'share',
      queryParameters: param,
    );

    if (await canLaunchUrl(url)) {
      await launchUrl(url);
    }
  }

上述程式碼只展示了核心邏輯，至於具體的實現就請各位自行決斷，例如 錯誤處理、 Util 工具類、 單例模式 等等...

IOS 需要新增應用白名單

抖音的 ApplicationQueriesScheme 為: snssdk1128

在 ios/info.plist 檔案中加入

<key>LSApplicationQueriesSchemes</key>
<array>
	<string>snssdk1128</string> <!-- 抖音 -->
	...
</array>

完

相關文章