Pular para o conteúdo
PHP

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

Capa do artigo: 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.com

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

PHP

Leia também