Acesso OAuth 2.0 para aplicativos de navegador web - Drive and Photo Service: Central de Documentação do Alibaba Cloud

Aplicativos web JavaScript de frontend — incluindo extensões do Chrome e widgets JavaScript — não armazenam informações confidenciais, como AppSecrets, com segurança. Este tópico descreve como esses aplicativos acessam o Drive and Photo Service (PDS) pelo fluxo de concessão implícita do OAuth 2.0.

Nota

Aplicativos web JavaScript de frontend — incluindo extensões do Chrome e widgets JavaScript — acessam o Drive and Photo Service pelo fluxo de concessão implícita do OAuth 2.0 descrito neste tópico.

Aviso: O fluxo de concessão implícita descrito neste tópico não é recomendado para novos aplicativos. Padrões do setor (RFC 6749, Okta e Microsoft) desencorajam seu uso porque os tokens de acesso ficam expostos no fragmento da URL e o cliente não pode confirmar o recebimento. Para aplicativos compatíveis, use o fluxo Authorization Code com PKCE.

Como funciona o fluxo de concessão implícita

A concessão implícita é um fluxo OAuth 2.0 que permite ao aplicativo de navegador obter um token de acesso diretamente do servidor de autorização do PDS, sem trocar códigos de autorização em um servidor de terceiros. Todas as etapas ocorrem no navegador. O token aparece no fragmento da URL e não exige segredo no lado do cliente.

Pré-requisitos

Antes de começar, conclua as etapas a seguir no console do PDS (Drive and Photo Service):

Criar um domínio

Crie um domínio no console do PDS. Após a criação, o PDS fornece um domínio de API de quarto nível no formato https://{domainId}.api.aliyunpds.com.

Ativar a página de logon

Ative a página de logon fornecida pelo PDS para autorização. O PDS hospeda a página de logon em https://{domainId}.api.aliyunpds.com.

Criar um aplicativo cliente OAuth

No console do PDS, crie um aplicativo e defina Type como WebBrowser (Web Client Application). Especifique o parâmetro Permission Scope. Os escopos selecionados aparecem na página de consentimento. Para mais informações, consulte Escopos. Configure uma URI de redirecionamento. Após a criação, o PDS fornece um AppId. Use-o como client_id (ID do cliente OAuth) nas solicitações de autorização.

Etapa 1: Chamar o endpoint de autorização

Abra uma nova janela do navegador e redirecione o usuário para o endpoint de autorização do PDS:

// 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.
}

Nota

Sintaxe do endpoint de autorização:

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

Parâmetro	Obrigatório	Descrição
client_id	Sim	AppId do seu aplicativo (ID do cliente OAuth). Crie um aplicativo no console do PDS para obter um AppId.
redirect_uri	Sim	URI para a qual o PDS redireciona o usuário após a autorização. Deve corresponder à URI de redirecionamento configurada para o seu aplicativo. Em caso de sucesso, o PDS anexa o token de acesso no formato `https://example.com/callback#access_token=xxx&expires_in=xxx&token_type=Bearer`.
scope	Não	Permissões solicitadas pelo aplicativo. Os escopos selecionados aparecem na página de consentimento. Para mais informações, consulte Escopos.
response_type	Sim	Defina como `token`.
state	Recomendado	Valor opaco incluído na solicitação pelo aplicativo. O PDS retorna esse valor inalterado na URI de redirecionamento. Use um valor gerado aleatoriamente para evitar ataques de falsificação de solicitação entre sites (CSRF).
login_type	Sim	Método de logon. Valores válidos: `default`, `phone`, `ding`, `ldap`, `wx` e `ram`. `default`: página de logon padrão, com links para outros métodos, como código de verificação por SMS. `phone`: código de verificação por SMS. `ding`: leitura de QR code do DingTalk. `ldap`: Active Directory (AD) ou Lightweight Directory Access Protocol (LDAP). `wx`: WeChat. `ram`: usuário RAM.
hide_consent	Não	Define se a página de consentimento será ignorada no primeiro logon. Valores válidos: `true` e `false`. Se for `true`, a página de consentimento não será exibida.
lang	Não	Idioma de exibição da página. Valores válidos: `zh_CN` e `en_US`. Valor padrão: `zh_CN`.

Etapa 2: Processar o redirecionamento

Após a conclusão da autorização, o PDS redireciona o usuário para a URI de redirecionamento configurada.

Em caso de sucesso, a URI de redirecionamento inclui o token de acesso no fragmento da URL: http://example.com/callback#access_token=xxx&expires_in=xxx&token_type=Bearer
Em caso de falha, a URI de redirecionamento inclui um código de erro no fragmento da URL: http://example.com/callback#error=xxxxxx

Erros comuns de autorização

Código de erro	Descrição	Ação
`invalid_request`	Um parâmetro obrigatório está ausente ou malformado.	Verifique se todos os parâmetros obrigatórios estão presentes e formatados corretamente e tente novamente.
`unauthorized_client`	O aplicativo não tem permissão para usar o fluxo de concessão implícita.	Confirme se o tipo do seu aplicativo está definido como WebBrowser no console do PDS.
`access_denied`	O usuário negou a solicitação de autorização.	Notifique o usuário de que o aplicativo não pode continuar sem autorização.
`invalid_scope`	O escopo solicitado é inválido ou desconhecido.	Compare os valores de escopo com a lista de escopos suportados.
`server_error`	O servidor de autorização do PDS encontrou um erro inesperado.	Tente repetir a solicitação.

A página de callback analisa o fragmento da URL para extrair o token de acesso e usa postMessage() para enviá-lo de volta à página de origem:

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

Etapa 3: Obter o token de acesso

Na janela de autorização, monitore o evento postMessage() para receber o token de acesso da página de callback.

Chamar operações da API do PDS

Inclua o token de acesso no cabeçalho Authorization de cada solicitação à API do PDS.

Para mais informações, consulte Métodos de chamada.

Drive and Photo Service:Acesso OAuth 2.0 para aplicativos de navegador web