OAuth2.0 を利用した API 実行手順

サーバサイドアプリケーション向け

概要

「Authorization Code Grant + PKCE + ClientSecret」にて認可を行い、API を実行します。 この認可の詳細については参考: 認可フローについてを参照ください。

手順1:認可コード取得

認可コードを受け取るためには、まずユーザ側に認可コード発行の同意を求める必要があります。 同意画面へのURL作成方法 を元に同意を求める画面への URL を作成し、ユーザに同意を求めます。

ユーザ側で同意が行われると上記 URL 作成時に指定した redirect_uri へリダイレクトされ、query string より認可コード(code)を取得できます。

例) https://example.com/oauth?code=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

手順2:アクセストークンの取得

事前に アプリケーション登録にて登録したアプリケーション(クライアントタイプ:サーバーサイドアプリケーション)より、Client ID と Client Secret を取得します。 この Client ID と Client Secret を元に https://alis.to/oauth2/token へ下記例を参考にリクエストし、Access Token, Refresh Token, ID Tokenを取得します。

リクエスト例

POST /oauth2/token HTTP/1.1
Host: alis.to
Content-Type: application/x-www-form-urlencoded
Authorization: Basic xxxxxxxxxxxxxxxxx

grant_type=authorization_code
&code=xxxxxxxxxxxxxxx
&redirect_uri=https%3A%2F%2Fclient.example.org%2Fcb
&code_verifier=7vN7KSmEl5qFeHeRZmfMsR7fl_BsluESjvl32W9el5A6WgsAbXCaqwK43BmXjs7cGw9hTQC9xmVb41xi8fL4CA

手順3:ID Tokenの検証

ID Token の署名を検証します。検証方法については ID Token の検証を確認ください。

手順4:API 実行サンプル

取得したアクセストークン(Access Token)を Authorization ヘッダに付与することで、API 実行を行えます。 実行できる API は同意時に指定した scope によって異なります。詳細は権限一覧を確認ください。 APIの実行は https://alis.to/oauth2api/ のパスに対して実施ください。 また、アクセストークンには有効期限が設定されています。再取得する場合はアクセストークンの再取得を参照してください

  const url = "https://alis.to/oauth2api/me/info"
  const result = await fetch(url, {
    method: "GET",
    headers: {
      "Authorization": `${access_token}`,
      "Content-Type": "application/json; charset=utf-8"
    },
    body: JSON.stringify(data)
  });

ネイティブアプリケーション向け

概要

ネイティブアプリケーションは ClientSecret を秘匿できないので、 「Authorization Code Grant + PKCE」にて認可を行い、API を実行します。 この認可の詳細については参考: 認可フローについてを参照ください。

手順1:認可コード取得

認可コードを受け取るためには、まずユーザ側に認可コード発行の同意を求める必要があります。 同意画面へのURL作成方法 を元に同意を求める画面への URL を作成し、ユーザに同意を求めます。

ユーザ側で同意が行われると上記 URL 作成時に指定した redirect_uri へリダイレクトされ、query string より認可コード(code)を取得できます。

例) app://example.com/oauth?code=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

手順2:アクセストークンの取得

事前に アプリケーション登録にて登録したアプリケーション(クライアントタイプ:ネイティブアプリケーション)より、Client ID を取得します。 この Client ID を元に https://alis.to/oauth2/token へ下記例を参考にリクエストし、Access Token, Refresh Token, ID Tokenを取得します。

リクエスト例

POST /oauth2/token HTTP/1.1
Host: alis.to
Content-Type: application/x-www-form-urlencoded
 
grant_type=authorization_code
&client_id=1234567890
&code=xxxxxxxxxxxxxxx
&redirect_uri=https%3A%2F%2Fclient.example.org%2Fcb
&code_verifier=7vN7KSmEl5qFeHeRZmfMsR7fl_BsluESjvl32W9el5A6WgsAbXCaqwK43BmXjs7cGw9hTQC9xmVb41xi8fL4CA

手順3:ID Tokenの検証

ID Token の署名を検証します。検証方法については ID Token の検証を確認ください。

手順4:API 実行サンプル

取得したアクセストークン(Access Token)を Authorization ヘッダに付与することで、API 実行を行えます。 実行できる API は同意時に指定した scope によって異なります。詳細は権限一覧を確認ください。 また、アクセストークンには有効期限が設定されています。再取得する場合はアクセストークンの再取得を参照してください。

実行例 (JavaScript)

const result = await fetch(url, {
  method: "POST",
  headers: {
    "Authorization": `${access_token}`,
    "Content-Type": "application/json; charset=utf-8"
  },
  body: JSON.stringify(data)
});

参考: 認可フローについて