経緯
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);
サンプル全文
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);
}
}
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; }
}
}
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タグに表示して以下のような感じにしてみました。
以上です。