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
- Authorization: Client IDと Client Secretを":"(コロン)で連結し、Base64エンコードした値
- code: 手順1で取得した認可コード
- redirect_uri: 同意画面へのURL作成方法 で指定した redirect_uri
- code_verifier: 同意画面へのURL作成方法 で作成した code_verifier
手順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
- client_id: 登録したアプリケーションに紐づく Client ID
- code: 手順1で取得した認可コード
- redirect_uri: 同意画面へのURL作成方法 で指定した redirect_uri
- code_verifier: 同意画面へのURL作成方法 で作成した code_verifier
手順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)
});