Vimeo API OAuthアクセストークン取得

経緯

Youtubeの動画をAPIで取得して、有料会員限定に公開するサイトを作ろうとしたのですが
Youtubeの規約的に商用利用NGのようなのでVimeoを利用することにしました。

認証の種類

認証にはいくつか種類があるようです。

• client credentials grant
  https://developer.vimeo.com/api/authentication#using-the-client-credentials-grant

• publicなデータのみへのアクセス

• 認証のフローが簡単

• authorization code grant
  https://developer.vimeo.com/api/authentication#using-the-auth-code-grant

• privateなデータのみへのアクセスも可能

• 認証のフローが多い

• おそらく有効期限は無限

• implicit grant
  https://developer.vimeo.com/api/authentication#using-the-implicit-grant

• privateなデータのみへのアクセスも可能

• 認証のフローが「authorization code grant」よりは少ない

• 有効期限が１時間

• implicit grant
  https://developer.vimeo.com/api/authentication#using-the-device-code-grant
  文章読んでもよくわからなかったです。ブラウザでの認証フローが行えないデバイス用？

スマートスピーカーやテレビなど、ネットワークに接続されていて通信機能はあるけど認証や設定に利用する専用アプリやブラウザがない、入力機能が貧弱なデバイスからOAuthを利用したいときにこのGrantTypeを利用します。

※コメントで説明いただきました！

　
　⇒「authorization code grant」を使用することにしました。

authorization code grant

1.認証URLにアクセス

https://api.vimeo.com/oauth/authorize?response_type=code&client_id={client_id}&redirect_uri={redirect_uri}&state={state}&scope={scope_list}

にアクセスします。

パラメーター	値	説明
response_type	code	code固定
client_id	以下※①のID
redirect_uri	以下※②のURI
state	任意の値	これは何に使用してるかよくわからない
scope	public private	アクセスするデータのタイプ

※① client_id

アプリ一覧を開いて、対象のアプリをクリックし

以下の部分のID

※② redirect_uri

①の画面の下の方

空欄の場合は、http://localhost:8888等、適当なローカルを指定しておけばよいと思います。

認証フォームで許可

認証URLにアクセスすると、以下フォームが表示されるので
プライベートへのアクセスを許可（チェック）して「Allow」をクリック

リダイレクトURIに設定したローカルに認証コードのパラメータ付きでリクエストされます。

上記code（認証コード）の値をメモしておきます。

2.認証コードをPost送信してアクセストークンを要求

以下Postリクエストを作成します。

リクエストヘッダー

ヘッダー	値	説明
Authorization	basic クライアントID:シークレットID	値はBase64エンコードする
Content-Type	application/json
Accept	application/vnd.vimeo.*+json;version=3.4

クライアントIDは上で説明した※①
シークレットIDは上で説明した※①の画面の下の方

これらを半角セミコロン:で連結してbase64エンコードした値を設定します。
base64エンコードは適当なWEB上のサイトで行いました。セキュリティ的にどうなんでしょうね(+_+)

リクエストBody

{
  "grant_type": "authorization_code",
  "code": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  "redirect_uri": "http://localhost:8888"
}

JSON形式で記述します。
Xのところに先ほどメモした承認コードを設定します。

post送信

私はリクエスト作成と送信はPostmanを使用しました。

送信すると以下のようなJSONのレスポンスが返ってきます。

このaccess_tokenを使用することで、プライベートデータにアクセスができます。

API呼び出しサンプル

私が今開発中のサイトはC#を使用しているので、C#での利用サンプルになります。

Httpリクエストメッセージの作成は便利ライブラリに任せます。
NugetでVimeoClientをインストールします。

VimeoClientを取得したアクセストークンでインスタンス化します。

this.vimeoClient = new VimeoClient(accessToken);

あとは各種メソッドを呼び出すだけです。

videos = await vimeoClient.GetVideosAsync(Convert.ToInt64(userId), page, perPage);

サンプル全文

IVimeoService.cs

using AceAbacus.Server.Models;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace AceAbacus.Server.Services
{
    public interface IVimeoService
    {
        Task<IEnumerable<Video>> GetVideoListAsync(string userId);
    }
}

Vimeo.cs

namespace AceAbacus.Server.Models
{
    /// <summary>
    /// 動画クラス
    /// </summary>
    public class Video
    {
        /// <summary>
        /// 動画URL
        /// </summary>
        public string URL { get; set; }

        /// <summary>
        /// タイトル
        /// </summary>
        public string Title { get; set; }

        /// <summary>
        /// サムネイル
        /// </summary>
        public string Thumbnail { get; set; }
    }
}

VimeoService.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using VimeoDotNet;
using VimeoDotNet.Models;
using Video = AceAbacus.Server.Models.Video;

namespace AceAbacus.Server.Services
{
    public class VimeoService : IVimeoService
    {
        private readonly IVimeoClient vimeoClient;

        public VimeoService(string accessToken)
        {
            this.vimeoClient = new VimeoClient(accessToken);
        }

        public async Task<IEnumerable<Video>> GetVideoListAsync(string userId)
        {
            var page = 1;
            var perPage = 50;

            var videoList = new List<Video>();
            Paginated<VimeoDotNet.Models.Video> videos;

            do
            {
                // リクエスト
                videos = await vimeoClient.GetVideosAsync(Convert.ToInt64(userId), page, perPage);

                // Videoインスタンスにセット
                videoList.AddRange(videos.Data.Select(
                    video => new Video()
                    {
                        URL = video.Link,
                        Title = video.Name,
                        Thumbnail = video.Pictures?.Sizes[2].Link
                    })
                );

                page++;

            } while (videos.Paging.Next != null);

            return videoList;
        }
    }
}

実行結果
取得したタイトル、サムネイルをhtmlのtableタグに表示して以下のような感じにしてみました。

以上です。