Drive and Photo Service:OAuth 2.0 access for web browser applications

Frontend JavaScript web applications — including Chrome extensions and JavaScript widgets — cannot securely store confidential information such as AppSecrets. This topic describes how these applications access Drive and Photo Service (PDS) using the OAuth 2.0 implicit grant flow.

Warning: The implicit grant flow described in this topic is not recommended for new applications. Industry standards (RFC 6749, Okta, and Microsoft) advise against it because access tokens are exposed in the URL fragment and cannot be confirmed as received by the client. For applications that support it, use the Authorization Code flow with PKCE instead.

How the implicit grant flow works

The implicit grant is an OAuth 2.0 flow that lets a browser application get an access token directly from the PDS authorization server, without going through an authorization code exchange on a third-party server. All steps happen in the browser. The token appears in the URL fragment and requires no client-side secret.

Prerequisites

Before you begin, complete the following steps in the PDS (Drive and Photo Service) console:

Create a domain

Create a domain in the PDS console. After creation, PDS provides a fourth-level API domain in the format https://{domainId}.api.aliyunpds.com.

Enable the logon page

Enable the PDS-provided logon page for authorization. PDS hosts the logon page at https://{domainId}.api.aliyunpds.com.

Create an OAuth client application

In the PDS console, create an application and set Type to WebBrowser (Web Client Application). Specify the Permission Scope parameter — the selected scopes appear on the consent page. For more information, see Scopes. Configure a redirect URI. After creation, PDS provides an AppId, which you use as the client_id (OAuth client ID) in authorization requests.

Authorization flow

Step 1: Call the authorization endpoint

Open a new browser window and redirect the user to the PDS authorization endpoint:

// Open the PDS authorization page in a new window.
var domainId = 'Your domain 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;
  // Parse the hash value to get the access token.
}

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

Step 2: Handle the redirect

After the user completes authorization, PDS redirects them to the redirect URI you configured.

• On success, the redirect URI includes the access token in the URL fragment: http://example.com/callback#access_token=xxx&expires_in=xxx&token_type=Bearer

• On failure, the redirect URI includes an error code in the URL fragment: http://example.com/callback#error=xxxxxx

Common authorization errors

The callback page parses the URL fragment to extract the access token, then uses postMessage() to pass it back to the originating page:

<!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>

Step 3: Get the access token

In the authorization window, listen for the postMessage() event to receive the access token from the callback page.

Call PDS API operations

Include the access token in the Authorization header of every PDS API request.

• For more information, see Calling methods.