このトピックでは、フロントエンドのJavaScriptウェブアプリケーションがOAuth 2.0を使用してDriveおよびPhoto Serviceにアクセスする方法について説明します。フロントエンドJavaScriptウェブアプリケーションは、ChromeプラグインまたはJavaScriptのウィジェットです。
アプリケーションはフロントエンドアプリケーションであるため、AppSecretsなどの機密情報をこれらのアプリケーションに保存することは安全ではありません。これらのアプリケーションのDriveおよびPhoto Serviceの認証手順は、ウェブサーバーアプリケーションの認証手順とは異なります。
1. 概要
(1) OAuth 2.0 Implicit Grant Type
Implicit Grant Typeは、サードパーティアプリケーションサーバーから認証コードを取得する必要なく、ブラウザの認証サーバーから直接アクセストークンを取得する方法です。すべての操作はブラウザで実行されます。トークンはすべての訪問者に表示され、クライアント側での認証は必要ありません。
(2) SPAのフローチャート
2. 準備
(1) ドメインの作成
PDS（DriveおよびPhoto Service）コンソールでドメインを作成します。ドメインが作成されると、https://{domainId}.api.aliyunpds.comの形式の第4レベルAPIドメイン名が提供されます。
(2) ログインページの有効化
認証のためにDriveおよびPhoto Serviceによって提供されるログインページを有効にします。DriveおよびPhoto Serviceは、次の第4レベルドメイン名を提供します：https://{domainId}.api.aliyunpds.com。
(3) DriveおよびPhoto ServiceコンソールでOAuthクライアントとして使用するアプリケーションの作成
アプリケーションを作成します。「タイプ」として「WebBrowser（Webクライアントアプリケーション）」を選択します。「パーミッションスコープ」パラメータを指定します。詳細については、スコープを参照してください。スコープは同意ページに表示されます。リダイレクトURIを設定します。アプリケーションが作成されると、アプリケーションのAppIdを取得できます。AppIdは、OAuth認証のClientIdとして使用されます。
3. 認証の原則とAPI操作
(1) 認証操作の呼び出し
新しいページで次のコマンドを実行します。
// 認証用のウェブページを開きます。
var domainId ='あなたのドメインID'
var authWin = window.open('https://'+domainId+'.api.aliyunpds.com/v2/oauth/authorize?client_id='+APP_ID+'&response_type=token&state=abc&login_type=default&redirect_uri=http://example.com/callback', '_blank', 'location=0,status=0,titlebar=0,menubar=0,resizable=0,height=500,width=600', true)
authWin.onmessage=function(e){
var hash = e.data;
// ハッシュの値を解析してアクセストークンを取得します。
}APIリクエスト構文：
GET /v2/oauth/authorize?client_id=<APPID>&response_type=token&state=[state]&login_type=<login_type>&redirect_uri=<redirect_uri> HTTP/1.1
Host: {domainId}.api.aliyunpds.comパラメータ | 必須 | 説明 |
client_id | はい | アプリケーションのAppId。AppIdがない場合は、DriveおよびPhoto Serviceコンソールでアプリケーションを作成してAppIdを取得します。 |
redirect_uri | はい | 認証プロセスが完了した後、DriveおよびPhoto Service認証サーバーがユーザーをリダイレクトするURI。ウェブサーバーアプリケーションによって提供されるURL。例： |
scope | いいえ | アプリケーションに必要な権限を指定するスコープ。スコープは同意ページに表示されます。詳細については、スコープを参照してください。 |
response_type | はい | レスポンスのタイプ。値を |
state | いいえ（推奨） | このパラメータが指定されている場合、DriveおよびPhoto Service認証サーバーはリプレイ攻撃を防ぐために、この値をリダイレクトURIでそのまま返します。 |
login_type | はい | ログイン方法。有効な値： |
hide_consent | いいえ | ユーザーが初めてログインする場合に同意ページを表示するかどうかを指定します。有効な値： |
lang | いいえ | ページが表示される言語。有効な値： |
(2) リダイレクトURI
認証が成功した場合、DriveおよびPhoto Service認証サーバーは、
http://example.com/callback#access_token=xxx&expires_in=xxx&token_type=Bearerの形式のURIにユーザーをリダイレクトします。認証に失敗した場合、DriveおよびPhoto Service認証サーバーは、
http://example.com/callback#error=xxxxxxの形式のURIにユーザーをリダイレクトします。
サンプルコード：
<!DOCTYPE html>
<html>
<body>
<script>
var hash = location.hash;
if (hash) {
var sch = new URLSearchParams(hash.replace(/^#?/g, ''))
var access_token = sch.get('access_token')
var expires_in = parseInt(sch.get('expires_in'))
var expire_time = sch.get('expire_time')
if(!isNaN(expires_in) && !expire_time){
expire_time=new Date(Date.now()+expires_in*1000).toISOString()
}
var token_type = sch.get('token_type')
var state = JSON.parse(sch.get('state') || '{}')
top.opener.postMessage({ access_token, expires_in,expire_time, token_type }, state.origin)
window.location.replace(window.location.origin + window.location.pathname)
} else {
window.close()
}
</script>
</body>
</html>コールバックページでハッシュの値を解析してアクセストークンを取得します。postMessage（）を使用して、認証用ウェブページとユーザーがリダイレクトされるページ間の通信を有効にします。
(3) アクセストークンの取得
認証用ウェブページで、リダイレクトされたページからpostMessage（）によって返されたアクセストークンを取得できます。
4. DriveおよびPhoto Service API操作の呼び出し
アプリケーションは、アクセストークンを使用してDriveおよびPhoto Service API操作を呼び出すことができます。アクセストークンは、APIリクエストのAuthorizationヘッダーに含める必要があります。
詳細については、メソッドの呼び出しを参照してください。