Faça login com o Twitter no Laravel usando o Laravel Socialite

Recentemente publiquei um artigo sobre Login com Twitter em PHP. Um de nossos leitores pediu para escrever um artigo sobre login com Twitter no Laravel. Embora o Laravel seja construído na linguagem de programação PHP e eu tenha escrito sobre o login do Twitter em PHP, sei que o tutorial anterior não é adequado para o framework Laravel. O Laravel tem sua própria estrutura de pastas e fluxo de desenvolvimento. Um desenvolvedor deve seguir os padrões do Laravel ao construir aplicações web nele.

O Laravel possui seus pacotes oficiais que auxiliam os desenvolvedores a obter certas funcionalidades. Um dos pacotes é Socialite. Usando Socialite, você pode integrar o login social com diferentes provedores como Facebook, Twitter, LinkedIn, Google, etc.

Neste artigo, estudamos Login com Twitter no Laravel usando o Laravel Socialite.

Começando

Vamos começar com a nova instalação do Laravel. Não é obrigatório usar uma nova instalação do Laravel, você também pode usar seu projeto existente.

Para instalar o Laravel mais recente, execute o comando abaixo:

composer create-project --prefer-dist laravel/laravel twitterlogin

Após a instalação, crie o banco de dados e adicione as credenciais no .envarquivo. Estamos construindo um sistema de login, portanto, devemos armazenar os detalhes do usuário no banco de dados.

Este tutorial é baseado em Sign in with Twitter, portanto, obteremos a id do Twitter do usuário após a autenticação bem-sucedida. Para armazenar esta identificação social, estamos adicionando colunas providere provider_idà tabela de ‘usuários’. A coluna providerarmazenará o valor como ‘twitter’ e uma coluna provider_idé para o id do Twitter do usuário.

Quando usamos login social, não precisamos armazenar senhas, então a coluna de senha deve aceitar o valor ‘NULL’ como padrão. Não há garantia de obter o e-mail do usuário após o login social, portanto, por curiosidade, precisamos definir as colunas do e-mail também para aceitar o valor ‘NULL’.

Abra o arquivo de migração da tabela de ‘usuários’ e adicione o código abaixo.

/**
 * Run the migrations.
 *
 * @return void
 */
public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->string('email')->nullable();
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password')->nullable();
        $table->string('provider');
        $table->string('provider_id');
        $table->rememberToken();
        $table->timestamps();
    });
}

Depois disso, execute o comando de migração que criará tabelas em seu banco de dados.

php artisan migrate

Você também precisa adicionar as colunas providere provider_idao modelo de usuário.

app / User.php

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
protected $fillable = [
    'name', 'email', 'password', 'provider', 'provider_id'
];

Obtenha credenciais do Twitter

Como vamos integrar o login do Twitter no Laravel, primeiro você precisa obter suas credenciais do Twitter. Siga as etapas abaixo para criar um aplicativo do Twitter e obter suas credenciais.

• Faça login na conta de desenvolvedor do Twitter e crie um novo aplicativo.
• Preencha todos os campos obrigatórios, como o nome e a descrição do aplicativo.
• Adicione o domínio do seu site no campo Site.
• Defina o URL de retorno como http://localhost:8000/twitter/callback. Ajuste o URL de acordo com sua necessidade.
• Depois de se registrar, copie e cole as credenciais do aplicativo criado (Chave e Segredo do Consumidor) que exigem algum tempo.

Usando essas credenciais copiadas, seu aplicativo Laravel completará o fluxo OAuth quando os usuários entrarem com sua conta do Twitter.

Criar rotas e controlador

Para incluir a funcionalidade de login no Twitter, precisamos adicionar um código em nosso projeto Laravel. Vamos criar um LoginControllerusando o comando:

php artisan make:controller LoginController

Precisamos adicionar um link de login no arquivo blade. Crie um login.blade.phpe adicione o seguinte HTML a ele.

<a href="{{ url('/login/twitter') }}" class="btn btn-success">
    {{ __('Login with Twitter') }}
</a>

Você pode chamar essa visualização a partir do indexmétodo de LoginController.

/**
 * Call the view
 */
public function index()
{
    return view('login');
}

Em seguida, adicione a rota para ele. Também estou adicionando mais algumas rotas que serão necessárias para a próxima parte do tutorial.

Route::get('login', 'LoginController@index');
Route::get('login/{provider}', 'LoginController@redirectToProvider');
Route::get('{provider}/callback', 'LoginController@handleProviderCallback');
Route::get('/home', function() {
    return 'User is logged in';
});

Depois que o usuário fizer o login com o Twitter, vou redirecioná-lo para a homerota. É apenas para fins de demonstração. Você deve alterar esta rota para outra coisa.

Entrar com o Twitter no Laravel

É hora de usar o pacote Socialite agora. Usando o comando abaixo você pode instalar o pacote Socialite em seu projeto Laravel.

composer require laravel/socialite

Depois de instalar o Socialite, precisamos configurá-lo. Abra config/services.phpe adicione a configuração do Twitter a este arquivo da seguinte maneira:

'twitter' => [
    'client_id' => env('TWITTER_API_KEY'),
    'client_secret' => env('TWITTER_API_SECRET_KEY'),
    'redirect' => env('TWITTER_CALLBACK_URL'),
],

Você pode notar que usei o envmétodo para obter os valores especificados. Isso significa que precisamos definir essas constantes no .envarquivo.

TWITTER_API_KEY=PASTE_TWITTER_API_KEY
TWITTER_API_SECRET_KEY=PASTE_TWITTER_API_SECRET_KEY
TWITTER_CALLBACK_URL=http://localhost:8000/twitter/callback

Certifique-se de substituir os marcadores de posição pelas chaves de API reais. Em seguida LoginController, estamos escrevendo uma função que redireciona um usuário para a página de login do Twitter e, se a autorização for bem-sucedida, ela fará o login do usuário.

LoginController.php

<?php
 
namespace AppHttpControllers;
 
use IlluminateHttpRequest;
use Socialite;
use AppModelsUser;
use Auth;
 
class LoginController extends Controller
{
    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/home';
  
    /**
     * Call the view
     */
    public function index()
    {
        return view('login');
    }
  
    /**
     * Redirect the user to the Twitter authentication page.
     *
     * @return Response
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }
    
    /**
     * Obtain the user information from Twitter.
     *
     * @return Response
     */
    public function handleProviderCallback($provider)
    {
        $user = Socialite::driver($provider)->user();
        $authUser = $this->findOrCreateUser($user, $provider);
        Auth::login($authUser, true);
        return redirect($this->redirectTo);
    }
    
    /**
     * If a user has registered before using social auth, return the user
     * else, create a new user object.
     * @param  $user Socialite user object
     * @param $provider Social auth provider
     * @return  User
     */
    public function findOrCreateUser($user, $provider)
    {
        $authUser = User::where('provider_id', $user->id)->first();
        if ($authUser) {
            return $authUser;
        }
        return User::create([
            'name'     => $user->name,
            'email'    => $user->email,
            'provider' => $provider,
            'provider_id' => $user->id
        ]);
    }
}

Vá para a página de login e clique no link ‘Login com Twitter’. Conclua o processo e você deve fazer login no sistema usando o Twitter. Você também pode encontrar entradas de usuários na userstabela.

Espero que você aprenda sobre como fazer o login com o Twitter no Laravel usando o pacote Socialite. Eu gostaria de ouvir suas opiniões ou sugestões na seção de comentários abaixo.

Artigos relacionados

• Faça login com o LinkedIn no Laravel usando o Laravel Socialite
• Login do Google no Laravel usando Laravel Socialite