Help us understand the problem. What is going on with this article?

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

経緯

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

認証の種類

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

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

 
 ⇒「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

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

以下の部分のID
image.png

※② redirect_uri

①の画面の下の方
image.png

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

認証フォームで許可

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

リダイレクトURIに設定したローカルに認証コードのパラメータ付きでリクエストされます。
image.png
上記code認証コード)の値をメモしておきます。

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

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

リクエストヘッダー

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

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

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

リクエストBody

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

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

post送信

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

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

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

API呼び出しサンプル

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

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

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タグに表示して以下のような感じにしてみました。

image.png

以上です。

GodPhwng
業界は7年程度です。 なーなーに理解していたところをしっかりと正しく理解したいです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした