PHP

PHP - Autenticação via Redes Sociais facilita com Auth0

Facilite a autenticação via redes sociais com uma ferramenta que integra múltiplos provedores sem a necessidade de criar aplicativos em cada um deles. Neste tutorial, aprenda a configurar autenticações simplificadas para Facebook, Google, Apple, Microsoft e Github, economizando tempo e dinheiro.

Paloma Macetko

• 6 min read
PHP - Autenticação via Redes Sociais facilita com Auth0

Olá meus Unicórnios! 🦄✨

Se você já implantou autenticação via redes sociais sabe que cada uma delas tem suas peculiaridades e dificuldades.

  • Atualmente, no Facebook, precisas conta Facebook Business Validada, o que nem sempre é possível.
  • Na Apple precisas de uma conta Apple Developer que não é barata.

Ou seja, cada rede social nos requer tempo e dinheiro.

Para facilitar isto, existe o Auth0, uma ferramenta de autenticação, onde podes utilizar a autenticação via redes sociais sem criar aplicativos nos provedores.

Isto facilita DRASTICAMENTE, algo que iria levar dias você faz em minutos.

Neste tutorial, iremos implantar as autenticações via:

  • Facebook
  • Google
  • Apple
  • Microsoft
  • Github

De uma forma extremamente simples, sem precisar criar aplicativos em cada rede social.

Para este objetivo, iremos utilizar o serviço Auth0:

Auth0: Secure access for everyone. But not just anyone.
Rapidly integrate authentication and authorization for web, mobile, and legacy applications so you can focus on your core business.
Auth0

Criando Conta na Auth0

A primeira coisa que precisamos fazer é criar uma conta na Auth0.

A conta você pode começar via Redes Sociais, então já entramos direto nas etapas complementares.

No campo "Account Type" selecione "Other" e clique em "Next":

Na janela de Bem Vindo, clique em "I have used Auth0 before" e "Get Started" (Para pular o guia de início):

Criando Aplicativo na Auth0

Clique em "Create Application":

Preencha um nome para o App e clique em "Continue" (Não precisa selecionar a linguagem):

Nosso APP foi criado!

Clique em "Settings":

Nesta janela, copie as informações de seu aplicativo:

Os dados que iremos precisar são:

  • Domain
  • Client ID
  • Client Secret

Desça a janela até "Application URIs" e preencha o campo "Allowed Callback URLs" com a URL para onde os clientes serão redirecionados:

Após isto, clique em "Save Changes":

Adicionando as Redes Sociais

Após criar o aplicativo, precisamos ativar as redes sociais que estarão disponíveis para Autenticação.

Para isto, no menu da esquerda, clique em "Authentication -> Social":

Clique em "Create Connection":

Selecione o "Facebook":

E na janela seguinte, clique em "Continue":

Após isto, podemos personalizar a integração com um Aplicativo criado no Facebook, o que NÃO IREMOS FAZER, então, apenas clique em "Create" no final da página:

Após isto, marque nosso aplicativo, para que nosso aplicativo possa utilizar esta rede social:

Pronto, já adicionamos o Facebook.

Faça as mesmas etapas para as outras redes sociais que você deseja adicionar.
Depois disto, teremos todas as redes sociais desejadas ativadas:

Observe um ponto importante, cada Rede Social possui um "ID", este ID será utilizada no Fluxo de Autenticação:

Então, se quero autenticar via Google, vou utilizar o ID:

google-oauth2

Autenticando via PHP

A autenticação segue o fluxo padrão do OAuth.

Primeiro precisamos criar a URL de Autorização, para onde iremos direcionar o cliente.

Esta Url é composta de:

https://[Dominio]/authorize?response_type=code&client_id=[ClientID]&redirect_uri=[LinkRedirecionamento]&scope=[Permissoes]&connection=[RedeSocial]

Sobre os campos:

  • [Dominio]: Obtido nas Configurações do Aplicativo
  • [ClientID]: Obtido nas Configurações do Aplicativo
  • [LinkRedirecionamento]: Este é o Link para qual o Aplicativo ira redirecionar o cliente, deve ser IGUAL ao campo "Allowed Callback URLs" preenchido nas configurações do Aplicativo
  • [Permissoes]: As permissões que iremos requerer, por padrão, preenchemos com "openid profile email"
  • [RedeSocial]: Este é o ID da Rede Social, para o Facebook, iremos preencher com "facebook"

Em nosso exemplo, iremos ter:

https://dev-jyx14mud050h5veh.us.auth0.com/authorize?response_type=code&client_id=vUhyWEPsBwSmIa4zCYgNCbZVcZznLtVF&redirect_uri=https%3A%2F%2Fwwww.palomamacetko.com.br%2FTesteAuth0.php&scope=openid+profile+email&connection=facebook

Quando o cliente for redirecionamento a este link, o Auth0 ira iniciar o fluxo de autorização:

No final da autorização, o cliente será redirecionado para a [LinkRedirecionamento] com a QueryString "code":

https://wwww.palomamacetko.com.br/TesteAuth0?code=XXXXXXXX

Precisamos utilizar este [code] para gerar o "access_token".

Isto é feito, fazendo um POST para:

https://[Dominio]/oauth/token

Passando como Parâmetro os campos abaixo:

  • [grant_type]: Valor Fixo "authorization_code"
  • [ClientID]: Obtido nas Configurações do Aplicativo
  • [ClientSecret]: Obtido nas Configurações do Aplicativo
  • [LinkRedirecionamento]: Este é o Link para qual o Aplicativo ira redirecionar o cliente, deve ser IGUAL ao campo "Allowed Callback URLs" preenchido nas configurações do Aplicativo
  • [code]: Código recebido na QueryString

Iremos receber um Json com os dados da autorização, a informação que precisamos, é "access_token":

{
"access_token": "XXXXXXXXXXXXXXXXXXXXXXXXX",
"id_token": "XXXXXXXXXXXXXXXXXXXXXXXXX",
"scope": "openid profile email",
"expires_in": 86400,
"token_type": "Bearer"
}

Segue um Exemplo em PHP:

<?
// Dados do Post
$DadsEnv                    = array();
$DadsEnv["client_id"]       = "vUhyWEPsBwSmIa4zCYgNCbZVcZznLtVF";
$DadsEnv["client_secret"]   = "bLl35Y3PA1AMtdZaNbC1nb1zSg_UICeAvYdztTgOyfRDkfObDK0vsHkPKwUhulZN";
$DadsEnv["grant_type"]      = "authorization_code";
$DadsEnv["code"]            = $_REQUEST["code"];
$DadsEnv["redirect_uri"]    = "https://www.palomamacetko.com.br/TesteAuth0.php";

// Curl
$curl 		                = curl_init();

curl_setopt_array($curl, array(
CURLOPT_URL 				=> "https://dev-jyx14mud050h5veh.us.auth0.com/oauth/token",
CURLOPT_RETURNTRANSFER 		=> true,
CURLOPT_MAXREDIRS 			=> 10,
CURLOPT_SSL_VERIFYHOST 		=> false,
CURLOPT_SSL_VERIFYPEER 		=> false,
CURLOPT_CUSTOMREQUEST		=> "POST",
CURLOPT_POSTFIELDS 			=> http_build_query($DadsEnv)
));

$response 	= curl_exec($curl);
$response2 	= json_decode($response, true);

curl_close($curl);

// Retorna o "access_token"
echo $response2["access_token"];
?>

Obtendo os Dados do Cliente

Depois da autorização do cliente, e a geração do "access_token" temos acesso aos dados do cliente.

Para obter os dados do cliente, precisamos fazer uma GET para:

https://[Dominio]/userinfo

Enviando o "access_token" na Autorização:

Authorization: Bearer [access_token]

Iremos receber um Json com os dados do cliente:

{
"sub": "facebook|8111220735587895",
"given_name": "Paloma",
"family_name": "Macetko",
"nickname": "Paloma Macetko",
"name": "Paloma Macetko",
"picture": "https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=8111220735587895&height=50&width=50&ext=1724588410&hash=AbZB62hoXe0wGaO-zEC_o2MV",
"updated_at": "2024-07-26T12:20:11.098Z",
"email_verified": true
}

Segue um Exemplo em PHP:

<?
// Curl
$curl 		                = curl_init();

curl_setopt_array($curl, array(
CURLOPT_URL 				=> "https://dev-jyx14mud050h5veh.us.auth0.com/userinfo",
CURLOPT_RETURNTRANSFER 		=> true,
CURLOPT_MAXREDIRS 			=> 10,
CURLOPT_SSL_VERIFYHOST 		=> false,
CURLOPT_SSL_VERIFYPEER 		=> false,
CURLOPT_HTTPHEADER 			=> array(
"accept: application/json",
"content-type: application/json",
"Authorization: Bearer " . $response2["access_token"]
)
));

$response 	= curl_exec($curl);
$response2 	= json_decode($response, true);

curl_close($curl);

echo $response;

// Retorna os Dados do Cliente
var_dump($response2);
?>

Autorizando através das outras redes sociais

Para as outras redes sociais, o fluxo é idêntico, única coisa que precisamos mudar é o "connection" na geração do link de autorização.

Exemplo para autenticação via Microsoft:

https://dev-jyx14mud050h5veh.us.auth0.com/authorize?response_type=code&client_id=vUhyWEPsBwSmIa4zCYgNCbZVcZznLtVF&redirect_uri=https%3A%2F%2Fwwww.palomamacetko.com.br%2FTesteAuth0.php&scope=openid+profile+email&connection=windowslive

Então, basta alteramos o parâmetro "connection" seguindo os ID das redes sociais exibidos no painel da Auth0:

Mudando a Conta Auth0 para Produção

Já encerramos toda a integração, mas não podemos esquecer de evoluir nossa conta na Auth0 para produção, que é a indicação de que finalizamos os testes.

Para isto, no painel da Auth0, clique em "Settings":

Desça até "Environment Tag", clique em "Production" e clique em "Save":

Na janela exibida, clique em "Confirm":

PRONTO! 🌟

Agora você esta pronto para utilizar o poder do Auth0 em sua totalidade.

Por hoje é só, meus unicórnios! 🦄✨

Que a magia do arco-íris continue brilhando em suas vidas! Até mais! 🌈🌟