Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@IKEH

Imgur APIで学ぶOAuth2.0認証

はじめに

概要

  • Imgurとは…オンライン画像共有と画像管理サービスです。
  • つまりは、画像をアップロードしオンラインに保存・共有することができるサービスです。
  • ImgurにはAPI(認証・アップロード・削除etc...)が用意されています。
  • 今回はこのImgur APIを使ってOAuth2.0認証および画像のアップロードを行います。

対象

  • OAuth2.0認証の実例を確認したい方
  • Imgur APIを使用したい方

OAuth2.0認証の流れ

概要

使用するパラメータ

  • 今回OAuth2.0認証で使用するパラメータは以下の4つです。
    • ※役割の記述は筆者の意訳のため不適切かもしれません。その際はご指摘下さい。
名称 役割 補足
Client ID ImgurAPIサービスから各アプリに割り振られたID
Client Secret ImgurAPIサービスから各アプリに割り振られたパスワード
Refresh Token Access Tokenを更新するためのキー
Access Token アプリがユーザの情報を使用できるよう要求するためのキー
意訳すると…アプリ内限定で有効な、ユーザIDとパスワードの代わりとなる認証キー
一定期間後に失効

OAuth2.0認証のフロー図

【凡例】
赤字:使用する情報
青字:更新された情報

1. ユーザ認証

  • Imgur APIサービスにアプリの利用登録は済んでいる段階から話を始めます。
  • アプリでユーザ情報を利用するため、認証用URLに飛ばして許可を求めます。

2. Access Tokenの更新

  • Access Tokenは使用期限があります。
  • そのため画像をアップロードする前にRefresh Tokenを使って更新します。
  • その際Refresh Tokenも新しいものが発行されます。

3. 画像のアップロード

  • Access Tokenを使って画像のアップロードを行います。

Imgur APIのユーザ登録

-w688

  • API登録後、ClientIDClient secretが表示されるので、書き留めておきます。
  • 画像の認証キー類は失効させているのでそのまま載せておきます。

-w742

  • Callback URLを下記より設定します。

  • 特に決まりはありませんが、今回は下記の形式で登録します。
    • {アプリ名}-{Client ID}://oauth-callback
    • 例: qiita-demo-a89ca891c652c84://oauth-callback
  • 本記事では扱いませんが、例えばMacアプリを作る場合、プロジェクト設定でこのコールバックURLを設定し、認証後のコールバックURLをアプリ側で受け取れるように設定します。

-w440

  • Web側の設定は以上で、ImgurAPIの使用準備が完了しました。

非認証の画像アップロード

  • 次に実際にターミナルからAPIを利用してみます。
  • ImgurAPIには非認証のアップロード機能も用意されています。
    • 非認証アップロードの場合、削除用のハッシュ値を忘れてしまうと、アップロードした画像の削除ができなくなるので注意が必要です。
  • 認証アップロードの場合、画像がユーザに紐づきます。
    • 例えばユーザ画面から過去にアップロードした画像の確認や削除が可能です。
  • OAuth2.0認証は一旦横に置いて、これを使用して画像をアップロードしてみましょう。
    • ここでリクエストのフォーマットや、レスポンスの形式の概要を掴みます。
  • まずはAPIのドキュメントを確認します。

-w1656

  • サンプルに沿ってターミナルで実行してみます。
  • まずは画像をbase64文字列化します
    • 数MBの画像を使用したところbase64文字列が長いとエラーになってしまいました。
    • なのでサイズの小さいスクリーンショットを撮ってこれを使用しました。

qiita_demo

my_image=`base64 "/Users/<UserName>/Desktop/images/qiita_demo.png"`
  • あとはこれをサンプル通り投げましょう。
curl --location --request POST 'https://api.imgur.com/3/image' \
--header 'Authorization: Client-ID a89ca891c652c84' \
--form "image=${my_image}"           
  • 成功すれば(ステータスが200)下記の通りのJSON文字列が返ってきます。
{
    "data": {
        "id": "r5ZYjPi",
        "title": null,
        "description": null,
        "datetime": 1595926930,
        "type": "image/png",
        "animated": false,
        "width": 200,
        "height": 60,
        "size": 9789,
        "views": 0,
        "bandwidth": 0,
        "vote": null,
        "favorite": false,
        "nsfw": null,
        "section": null,
        "account_url": null,
        "account_id": 0,
        "is_ad": false,
        "in_most_viral": false,
        "has_sound": false,
        "tags": [],
        "ad_type": 0,
        "ad_url": "",
        "edited": "0",
        "in_gallery": false,
        "deletehash": "fhZe90irhTZKfg6",
        "name": "",
        "link": "https://i.imgur.com/r5ZYjPi.png"
    },
    "success": true,
    "status": 200
}
  • URLにアクセスすると、実際にアップロードされていることが確認出来ます。
"link": "https://i.imgur.com/r5ZYjPi.png"
  • 返ってきたJSONを見てみましょう。
  • 下記のリンク先に、APIで返ってくるJSONの形式が確認できます。

-w324

-w682

  • 基本的にAPIの返り値は、下記のフォーマットで結果が返ってくるということですね
    • 前述の例ではdataに画像の詳細情報が入っていますね。
{
    "data"    : <mixed>,
    "status"  : 200,
    "success" : true
}
  • 以上が非認証の画像アップロードです。
  • イメージがつかめたでしょうか。

認証の画像アップロード

OAuth2.0認証

  • では本題のOAuth2.0認証です。
  • RefreshTokenAccessTokenを含んだコールバックURLを取得する所まで実装します。
  • まずはAPIのドキュメントを確認します。
https://api.imgur.com/oauth2/authorize?client_id=YOUR_CLIENT_ID&response_type=REQUESTED_RESPONSE_TYPE&state=APPLICATION_STATE
  • 上記のフォーマットのURLを作成して、ブラウザで開けば良さそうです。
    • stateはhogeをとりあえず入れています。この記事では特に使用しません。
  • では下記のURLをブラウザで開きます。
https://api.imgur.com/oauth2/authorize?client_id=a89ca891c652c84&response_type=token&state=hoge
  • ログインしているユーザに対して、APIを使用許可を求める画面が表示されます。

-w745

Google Chromeの「デベロッパーツール」を使えば簡単に確認できる。Windowsなら[F12]キー、Macなら[option]+[command]+[I]キーを押してデベロッパーツールを起動し、[Network]タブを選んでから対象のページを開く。すると、その読み込みの過程(ログ)が記録・表示される。

  • Allowを選択すると、Refresh TokenAccess Tokenなどのユーザ情報を含んだURLにリダイレクトされます。
    • スキーム・ホストはもちろんコールバックURLで指定したものです。

-w1683

qiita-imgur-api-demo-a89ca891c652c84://oauth-callback
?state=hoge
#access_token=188e32bbb697b7f5f8b00a8e9f81b3440571bdd0
&expires_in=315360000
&token_type=bearer
&refresh_token=7b8c109852078dce30b18333f93c222e0a1ca9a2
&account_username=IKEH1024
&account_id=104356397
  • 以上でRefresh TokenAccess Tokenが取得できました。
  • これで認証の画像アップロードが可能な状態になりました。

Access Tokenの更新

  • 先に話した通り、Access Tokenには利用期限があります。
  • そのためAPI使用前にRefresh Tokenを使ってAccess Tokenの更新が必要です。
  • APIのドキュメントを確認します。
  • 先程取得したRefresh Tokenを使ってAccess Tokenを更新します。
curl --location --request POST 'https://api.imgur.com/oauth2/token' \
--form 'refresh_token=7b8c109852078dce30b18333f93c222e0a1ca9a2' \
--form 'client_id=a89ca891c652c84' \
--form 'client_secret=602541ff9d75c7ca7bf79bc958ea834c80542ac2' \
--form 'grant_type=refresh_token'
  • 更新されたRefresh TokenAccess Tokenを含んだレスポンスが返ってきます。
{
    "access_token": "d4468f3948766331f2ef5137ccdd8ca1faf5831d",
    "expires_in": 315360000,
    "token_type": "bearer",
    "scope": null,
    "refresh_token": "59f96cacae28879354a788ab6eb02125d45e5f3a",
    "account_id": 104356397,
    "account_username": "IKEH1024"
}

画像のアップロード

  • 認証の画像アップロードは非認証のときとほとんど同じです。
  • ヘッダのClient IDの代わりにAccessTokenを指定するだけですね。
    • なぜかドキュメントにPOST Image Upload(Authed)が無いですが、他の箇所を参考にして発言しています。

-w347

my_image=`base64 "/Users/<UserName>/Desktop/images/qiita_demo.png"`
curl --location --request POST 'https://api.imgur.com/3/image' \
--header 'Authorization: Bearer d4468f3948766331f2ef5137ccdd8ca1faf5831d' \
--form "image=${my_image}"  
  • 返ってくるJSON文字列は以下の通りです。
{
    "data": {
        "id": "mL1yuNg",
        "title": null,
        "description": null,
        "datetime": 1595953444,
        "type": "image/png",
        "animated": false,
        "width": 200,
        "height": 60,
        "size": 9789,
        "views": 0,
        "bandwidth": 0,
        "vote": null,
        "favorite": false,
        "nsfw": null,
        "section": null,
        "account_url": null,
        "account_id": 104356397,
        "is_ad": false,
        "in_most_viral": false,
        "has_sound": false,
        "tags": [],
        "ad_type": 0,
        "ad_url": "",
        "edited": "0",
        "in_gallery": false,
        "deletehash": "USDnDO9hoGqZtt5",
        "name": "",
        "link": "https://i.imgur.com/mL1yuNg.png"
    },
    "success": true,
    "status": 200
}

おわりに

  • 私自身OAuth2.0認証仕組みの理解に苦しんだので、理解の一助になれば幸いです。
  • 私が他に使用したことがあるOAuth2.0認証を伴うサービスはGoogle Photoのみですが、基本的に同じ仕組みだったので、一度理解しておくと後々も役立ちそうです。
5
Help us understand the problem. What is going on with this article?
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
IKEH
macOS Engineer Objective-C / Swift / Python

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?