Acesso OAuth 2.0 do Facebook para Website

O processo de autorização OAuth 2.0 usado pelo Facebook é o "Authorization Code Grant". Vamos introduzir como implementá-lo e como depurá-lo no Apidog.

O que é OAuth 2.0?

OAuth 2.0 é um protocolo de autorização amplamente utilizado que permite o acesso de terceiros a recursos protegidos sem exigir credenciais do usuário. Envolve quatro papéis principais:

Proprietário do Recurso: Normalmente, o usuário que possui os recursos protegidos.
Cliente: O aplicativo de terceiros que busca acesso aos dados do proprietário do recurso.
Servidor de Autorização: Valida o proprietário do recurso e concede a autorização ao cliente.
Servidor de Recursos: Armazena e gerencia os recursos protegidos, fornecendo APIs para acesso.

Fluxos de Autorização Comuns

O protocolo OAuth 2.0 implementa a autorização através de vários fluxos de autorização. Os fluxos de autorização comuns incluem:

Authorization Code Grant: O cliente redireciona o usuário para o servidor de autorização. Após o usuário fazer login e conceder permissão, o servidor de autorização retorna um código de autorização para o cliente. O cliente então troca o código de autorização juntamente com suas credenciais por um token de acesso.
Authorization Code Grant com PKCE (Proof Key for Code Exchange): Semelhante ao fluxo padrão de código de autorização, mas o cliente aprimora a segurança utilizando PKCE (Proof Key for Code Exchange).
Resource Owner Password Credentials Grant: O proprietário do recurso fornece diretamente seu nome de usuário e senha ao cliente. O cliente então usa essas credenciais para solicitar um token de acesso do servidor de autorização.
Client Credentials Grant: O cliente solicita diretamente um token de acesso do servidor de autorização usando suas próprias credenciais. Esse fluxo é adequado para casos onde o próprio cliente precisa acessar os recursos.
Implicit Grant: Usado para obter um token de acesso diretamente do cliente em uma aplicação baseada em navegador. Esse fluxo é tipicamente utilizado para aplicações front-end da web.

Passo 1: Crie o aplicativo e obtenha o ID do cliente e a chave secreta do cliente

Primeiro, você precisa abrir uma conta de desenvolvedor do Facebook em https://developers.facebook.com. Após abri-la, crie uma aplicação nela.

Após a aplicação ser criada com sucesso, clique na opção [Configurações da Aplicação->Básica]. O número da aplicação aqui é o ID do cliente (Client ID), e a chave da aplicação é a chave secreta do cliente (Client Secret). Precisaremos desses dois atributos mais tarde.

Passo 2: Configure o endereço de retorno

Após a aplicação ser criada, você também precisa definir o "endereço de retorno" no painel de controle, clique na opção [Painel de Controle -> Personalizar esta aplicação] e depois clique em "Configurações de Login do Facebook" para entrar na interface de configuração.

No item "URI de Redirecionamento Válido do OAuth" na interface de configuração, preencha o endereço de retorno (Callback URL), que é o endereço de redirecionamento. Geralmente é o nome de domínio do seu servidor (o Facebook exige que comece com https).

Se você ainda não tiver um, pode preenchê-lo primeiro, desde que tenha certeza de que o nome de domínio pode ser acessado. Após a configuração ser concluída, salve-a.

O propósito de precisarmos do "endereço de retorno" é obter o código de autorização (code) na barra de endereços. Geralmente, após preencher o nome de usuário e a senha na página de login OAuth 2.0, será redirecionado para o "endereço de retorno" e poderá ser exibido na barra de endereços.

Obtenha o código de autorização (code). A seguir, a barra de endereços é usada para obter o valor do código manualmente:

Após as informações acima serem configuradas, entramos oficialmente no processo principal de autorização OAuth 2.0.

Passo 3: Obtenha o token de acesso

Quando o primeiro e o segundo passos acima estiverem prontos, podemos solicitar um token de acesso (Token). Vamos demonstrar esse passo através do Apidog.

Apidot é uma excelente ferramenta de depuração e gerenciamento de API, você pode obter diretamente o token de acesso no Apidog. Se você ainda não tiver o Apidog instalado, vá baixá-lo agora!

botão

Crie uma Solicitação HTTP Após criar um projeto HTTP no Apidog, abra-o e, em seguida, crie uma solicitação no projeto, escolha a opção "Editar Documento -> Auth -> OAuth 2.0".

2. Configure o ID do Cliente, Chave Secreta do Cliente e URL de Retorno O modo de autorização padrão selecionado na página OAuth 2.0 no Apidog é Authorization Code, já que o Facebook OAuth 2.0 também utiliza Authorization Code. Portanto, você não precisa mudar aqui.

Em seguida, encontre o ID do Cliente e URL de Retorno na parte inferior da página e preencha o ID do Cliente obtido, Chave Secreta do Cliente e URL de Retorno configurado a partir do serviço Facebook OAuth 2.0. Os parâmetros específicos são as configurações mencionadas em "Passo 1, Passo 2" acima.

3. Configure a URL de Solicitação de Código de Autorização De acordo com a documentação oficial do Facebook, durante a autenticação OAuth 2.0, a URL de solicitação de código de autorização é: https://www.facebook.com/v19.0/dialog/oauth

Simplesmente preencha esta URL de solicitação de código de autorização no URL de Autorização. Esta URL pode ser entendida como a página de autorização de login. Ela abre esta página (na forma de uma janela no lado do cliente) ao verificar o status de login pela primeira vez, pedindo para você inserir seu nome de usuário e senha.

Normalmente, ao construir manualmente uma página de autorização de login, parâmetros adicionais são necessários na URL de autorização, como:

https://www.facebook.com/v19.0/dialog/oauth?
  client_id={app-id}
  &redirect_uri={redirect-uri}
  &state={state-param}

Nota: A continuidade dos parâmetros não deve ter quebras de linha normalmente.

No entanto, no Apidog, parâmetros adicionais após a URL base geralmente não são necessários. Apenas o caminho antes do ponto de interrogação "?" é necessário, pois outros parâmetros obrigatórios são configurados separadamente em outras opções. É claro que, se você quiser incluir alguns parâmetros de consulta, pode também adicioná-los clicando no ícone ao lado desta caixa de entrada:

Podemos também expandir as opções "Mais" e preencher os valores para os parâmetros que precisam ser preenchidos, como preencher "Escopo" com a permissão necessária "public_profile". A permissão "public_profile" no Facebook permite que a aplicação leia os campos de perfil público padrão do nó do usuário, e essa permissão é concedida automaticamente a todas as aplicações.

Na opção "State", preencha "state", que serve para prevenir falsificação de solicitação entre sites. Plataformas de terceiros geralmente exigem que isso seja preenchido, portanto geralmente o preenchemos, caso contrário, podem ocorrer erros ao obter o token de acesso.

4. Configure a URL de Solicitação do Token de Acesso De acordo com a documentação oficial do Facebook, para obter um token de acesso, a URL solicitada é: https://graph.facebook.com/v19.0/oauth/access_token

Simplesmente preencha este endereço no campo de entrada da URL do Token de Acesso. Da mesma forma, outros parâmetros foram configurados separadamente em outros campos de entrada, portanto não precisam ser incluídos na URL.

5. Obtenha o Token de Acesso Uma vez que todos os itens de configuração mencionados acima estão definidos, você pode clicar no botão "Obter Token" para obter o token de acesso.

Após clicar, se for seu primeiro login, uma janela aparecerá pedindo sua autorização, onde você precisará inserir seu nome de usuário e senha da conta do Facebook. Se você estiver fazendo login de um novo dispositivo, pode também precisar do seu e-mail para verificação adicional.

Após inserir seu nome de usuário e senha, você será solicitado a confirmar a autorização.

Clique em confirmar para completar a autorização. Uma vez autorizado, o token de acesso será obtido automaticamente e exibido na página. Ao mesmo tempo, outras informações retornadas pelo Facebook também serão analisadas.

Passo 4: Acesse Recursos Abertos Baseados no Token Com o token de acesso (Token), agora você pode usá-lo para acessar os recursos abertos do Facebook. Você pode ver que tipo de recursos abertos estão disponíveis na Graph API do Facebook.

Por exemplo, a seguinte API recupera o ID e nome do usuário. Se sua interface não retornar nada, você pode precisar verificar se tem as permissões necessárias, como mencionado na Seção 3 do "Passo 3", basta configurá-las no Escopo. https://graph.facebook.com/v12.0/me?fields=id,name

Ao enviar uma solicitação, o Apidog anexará automaticamente o token ao cabeçalho de Autorização e o enviará anexado a "Bearer".

Se você quiser carregar o token na URL, também pode modificar o "Adicionar Localização" do token nas opções de configuração da página e selecionar "Parâmetros de Consulta".

Resumo

OAuth 2.0 é um protocolo de autorização de padrão aberto que permite que aplicações de terceiros acessem recursos protegidos de forma segura. O processo de autorização pelo código de autorização é um método de autorização comum e é utilizado pelo Facebook.

Durante a implementação, você precisa criar uma aplicação, configurar um endereço de retorno, obter um token de acesso e usar o Apidog para depuração. Após obter o token de acesso, você pode usar o token para chamar os recursos abertos do Facebook.