Laravel

Autenticação em redes sociais com Laravel

Por em

Neste post, vamos configurar o Laravel para que ele consiga fazer o processo de autenticação utilizando as redes sociais, nesse nosso caso o Github.

Preparando o ambiente para desenvolvimento

Depois da instalação do Laravel, em nosso caso, no momento da escrita deste post, o Laravel 5.1. Entramos no arquivo composer.json, e inserimos o pacote Socialite, indicada pela própria documentação do laravel. Veja abaixo:

...
"require": { 
	"php": ">=5.5.9", 
	"laravel/framework": "5.1.*", 
	"laravel/socialite": "^2.0" 
},
…

Com o terminal aberto na raiz de nosso projeto, digite:

$ composer update

Configurações Iniciais

Após nosso projeto estar atualizado, e o pacote Socialite instalado, vamos entrar na view welcome.blade.php, caminho: resources/views/welcome.blade.php;
e vamos fazer uma alteração simples, criando apenas um link, veja:

...
    <body> 
	<div class="container"> 
	    <div class="content"> 
		<div class="title"> 
		    <a href="" title="Logar pelo GitHub"> 
		        Autorização com GitHub
		    </a> 
		</div> 
	    </div> 
	</div> 
    </body>
...

Agora vamos criar um controller para chamar nossa view. No terminal digite:

$ php artisan make:controller Socialogin/SocialoginController --plain

Com o comando acima, será criado um controller chamado SocialoginController, na pasta Socialogin, sem os métodos pré configurados. Caminho completo do arquivo criado: app/Http/Controllers/Socialogin/SocialoginController.php

Entrando no Controller criado, vamos criar um construtor, para chamar uma Factory que será responsável por construir a view, ao darmos um “use” nesta Factory, vamos apelidá-la de ViewFactory, veja abaixo:

<?php 

namespace App\Http\Controllers\Socialogin; 

use Illuminate\Http\Request; 

use App\Http\Requests; 
use App\Http\Controllers\Controller; 

use Illuminate\Contracts\View\Factory as ViewFactory; 

/** 
 * Class SocialoginController 
 * @package App\Http\Controllers\Socialogin 
 */ 
class SocialoginController extends Controller 
{ 
    /** 
     * @var ViewFactory 
     */ 
    private $viewFactory; 

    /** 
     * Construct 
     * 
     * @param ViewFactory $viewFactory 
     */ 
    public function __construct(ViewFactory $viewFactory) 
    { 
        $this->viewFactory = $viewFactory; 
    }
...

O próximo passo é criar um método chamado index, para chamar a view welcome, veja:

...
    /** 
    * @return \Illuminate\Contracts\View\View 
    */ 
    public function index() 
    { 
        return $this->viewFactory->make('welcome'); 
    }
...

Para vermos se está tudo correto, vamos criar uma rota, que será encarregada de chamar o controller e apresentar as view. Entre no arquivo de rotas, caminho: app/Http/routes.php, vamos apagar a rota existente, e criar uma nova rota, veja:

<?php 

Route::get('/', ['as' => 'index', 'uses' => 'Socialogin\SocialoginController@index']);

Para testarmos, vamos entrar no terminal, digitar o comando abaixo, e rodar o servidor:

$ php artisan serve

No navegador vamos acessar a url: http://localhost:8000/

Veja o resultado:

Navegador

Configurando o Socialite

Para configurar o Socialite em nosso projeto, temos que registrá-lo, entre no arquivo app.php, caminho: config/app.php e vamos registrar, veja abaixo:

'providers' => [ 
    // Outros serviços de... 
    Laravel\Socialite\SocialiteServiceProvider::class, 
],

Nesse mesmo arquivo, vamos adicionar uma facade, veja:

'aliases' => [ 
        // Outros Facades
        'Socialite' => Laravel\Socialite\Facades\Socialite::class, 

    ],

A configuração no arquivo app.php está pronta, vamos entrar no arquivo services.php para finalizarmos as configurações. Entre no arquivo, caminho: config/services.php e adicione o conteúdo abaixo:

...
    // Outras configurações 

    'github' => [ 
        'client_id'        => env('GITHUB_CLIENT_ID'), 
        'client_secret'    => env('GITHUB_CLIENT_SECRET'), 
        'redirect'         => env('GITHUB_REDIRECT'), 
    ], 
...

Abra o arquivo .env localizado na raiz do projeto e digite o conteúdo abaixo, porém com as credenciais da API criada no GitHub.

GITHUB_CLIENT_ID=******************** 
GITHUB_CLIENT_SECRET=******************** 
GITHUB_REDIRECT=http://localhost:8000/github/callback

Não mostrarei como criar uma aplicação no GitHub, porém colocarei os passos para isso, veja:

1º Entre no seu GitHub
2º Vá em Settings
3º Vá em Applications
4º Developer applications
5º Register new Application
6º Coloque o nome da aplicação, a url responsável, um descrição, e a url de redirecionamento, em nosso caso “http://localhost:8000/github/callback”
7º Registre a aplicação, e após será redirecionado para a página principal da aplicação onde será fácil encontrar as credenciais citada acima: que estará como Client ID e Client Secret.

Configurando o Controller e Rotas

Após a configuração do Socialite, vamos configurar o controller; entre no controler SocialoginController criado acima, e vamos chamar uma Factory do Socialite no construtor, e também criaremos um método chamado redirectToProvider para fazer o redirecionamento para a página do GitHub, para o usuário fazer a autorização.

Veja abaixo:


viewFactory = $viewFactory; 
        $this->socialite = $socialiteFactory; 
    } 

    /** 
     * @return \Illuminate\Contracts\View\View 
     */ 
    public function index() 
    { 
        return $this->viewFactory->make('welcome'); 
    } 

    /** 
     * @return mixed 
     */ 
    public function redirectToProvider() 
    { 
        return $this->socialite->driver('github')->redirect(); 
    } 
}

Para finalizar com o controller, vamos criar um método chamado handleProviderCallback, que em, nosso caso será responsável por retornar todos os dados do usuário, veja abaixo:

    /** 
     * @return mixed 
     */ 
    public function handleProviderCallback() 
    { 
        $user = $this->socialite->driver('github')->user(); 

        dd($user); 
    }

Pronto controller finalizado.

Agora temos que criar as rotas. Uma responsável, por chamar o método redirectToProvider do controller, para sermos redirecionado para o GitHub, e outra rota para receber os dados do usuário, que no caso, é a mesma roda configurada na criação da API como sendo a rota autorizada para receber os dados. Veja abaixo:

... 

Route::get('/github', ['as' => 'social_redirect', 'uses' => 'Socialogin\SocialoginController@redirectToProvider']); 

Route::get('/github/callback', ['as' => 'social_callback', 'uses' => 'Socialogin\SocialoginController@handleProviderCallback']);

Finalizando

Para finalizar a aplicação, vamos colocar o caminho da rota em nosso link, na view welcome.blade.php, veja:


Veja:

Navegador

Acessando autorização

Conclusão

Com o pacote Socialite, com as mesmas configurações descritas acima, também é possível fazer a mesma autorização com as APIs do Facebook, Google+, Twitter, Linkedin e Bitbucket…
Grande parte das configurações deste post, foram tiradas da documentação do Laravel 5,1.