{"id":26593,"date":"2021-04-27T13:56:00","date_gmt":"2021-04-27T10:56:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26593"},"modified":"2021-10-18T04:21:13","modified_gmt":"2021-10-18T01:21:13","slug":"sistema-de-login-social-usando-laravel-socialite","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/sistema-de-login-social-usando-laravel-socialite\/","title":{"rendered":"Sistema de login social usando Laravel Socialite"},"content":{"rendered":"

Cr\u00e9dito: Este artigo \u00e9 inspirado neste post Laravel Social Authentication with Socialite<\/a><\/p>\n

Voc\u00ea est\u00e1 procurando implementar um sistema de login social em seu site Laravel? Ao permitir o login social, seus usu\u00e1rios n\u00e3o precisam se registrar no seu site. Isso tamb\u00e9m nos poupa muito trabalho, como enviar link de ativa\u00e7\u00e3o e verificar conta de e-mail. Neste artigo, estudamos como adicionar um sistema de login social usando a socialite Laravel.<\/p>\n

A<\/a> biblioteca Laravel Socialite<\/a> fornece autentica\u00e7\u00e3o OAuth com Facebook, Twitter, Google, LinkedIn, GitHub e Bitbucket. O que precisamos fazer \u00e9 instalar esta biblioteca em nosso site Laravel, configur\u00e1-la, obter as chaves API de um site social e pronto.<\/p>\n

\"Sistema<\/a><\/p>\n

Criar tabela de usu\u00e1rios<\/h3>\n

Para implementar o sistema de login social, precisamos criar uma tabela de usu\u00e1rios que ir\u00e1 armazenar os detalhes fornecidos pelo site social.<\/p>\n

Se voc\u00ea tiver uma nova instala\u00e7\u00e3o de um Laravel, abra a ferramenta de linha de comando no diret\u00f3rio raiz de um projeto e execute o comando php artisan make:auth<\/code>. Este comando criar\u00e1 controladores de autentica\u00e7\u00e3o como LoginController, RegisterController, etc., que est\u00e3o localizados no diret\u00f3rio app \/ Http \/ Controllers \/ Auth. Ele tamb\u00e9m cria visualiza\u00e7\u00f5es login.blade.php, register.blade.php no diret\u00f3rio resources \/ view \/ auth.<\/p>\n

Em seguida, abra a tabela de migra\u00e7\u00e3o para usu\u00e1rios. Modificaremos esta migra\u00e7\u00e3o padr\u00e3o e adicionaremos mais duas colunas chamadas provedor e provedor_id.<\/p>\n

public function up()\n{\n\u00a0\u00a0\u00a0\u00a0Schema::create('users', function (Blueprint $table) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->increments('id');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('name');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('email')->nullable();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('password')->nullable();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('provider');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('provider_id');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->rememberToken();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->timestamps();\n\u00a0\u00a0\u00a0\u00a0});\n}<\/code><\/pre>\n
Como voc\u00ea pode ver, definimos as colunas de e-mail e senha como anul\u00e1veis. Por qu\u00ea? Quando usamos a autentica\u00e7\u00e3o de login social, n\u00e3o h\u00e1 garantia de obter uma id de e-mail de um usu\u00e1rio. E a senha tamb\u00e9m n\u00e3o \u00e9 necess\u00e1ria nesse caso. Portanto, mantemos o e-mail e a senha anul\u00e1veis. O provedor de coluna armazenar\u00e1 o nome do site social, como facebook, twitter, etc. A coluna provider_id armazenar\u00e1 o id social de um usu\u00e1rio respectivo ao site social.<\/p>\n
Depois de modificar a migra\u00e7\u00e3o do usu\u00e1rio conforme descrito acima, execute o comando php artisan migrate<\/code>. Isso criar\u00e1 uma tabela chamada ‘usu\u00e1rios’ em seu banco de dados.<\/p>\n
Provavelmente, ao executar o comando de migra\u00e7\u00e3o, voc\u00ea obter\u00e1 algum erro estranho relacionado ao comprimento do caractere. Em caso afirmativo, abra o arquivo AppServiceProvider.php do diret\u00f3rio app \/ Providers. Neste arquivo, precisamos definir o comprimento da string padr\u00e3o para as colunas da tabela do banco de dados.<\/p>\n
Arquivo AppServiceProvider.php<\/p>\n
<?php\n\u00a0\nnamespace AppProviders;\n\u00a0\nuse IlluminateSupportServiceProvider;\nuse IlluminateSupportFacadesSchema;\n\u00a0\nclass AppServiceProvider extends ServiceProvider\n{\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Bootstrap any application services.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return void\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function boot()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Schema::defaultStringLength(255);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Register any application services.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return void\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function register()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Modelo de Usu\u00e1rio<\/h3>\n
Por padr\u00e3o, o Laravel inclui um modelo do AppUser Eloquent no diret\u00f3rio do seu aplicativo. Abra o User.php na pasta do aplicativo. Adicione mais duas colunas provedor, provider_id \u00e0 vari\u00e1vel $ fillable.<\/p>\n
protected $fillable = [\n\u00a0\u00a0\u00a0\u00a0'name', 'email', 'password', 'provider', 'provider_id',\n];<\/code><\/pre>\n
Instalar e configurar o Laravel Socialite<\/h3>\n
Para instalar esta biblioteca, voc\u00ea deve ter o composer<\/a> instalado em seu sistema.<\/p>\n
Em sua ferramenta de linha de comando, execute o comando abaixo.<\/p>\n
composer require laravel\/socialite<\/code><\/p>\n
Ap\u00f3s instalar a biblioteca, registre LaravelSocialiteSocialiteServiceProvider em seu arquivo de configura\u00e7\u00e3o config \/ app.php.<\/p>\n
'providers' => [\n\u00a0\u00a0\u00a0\u00a0\/\/ Other service providers...\n\u00a0\n\u00a0\u00a0\u00a0\u00a0LaravelSocialiteSocialiteServiceProvider::class,\n],<\/code><\/pre>\n
No mesmo arquivo config \/ app.php, na matriz aliases, adicione Socialite facade.<\/p>\n
'Socialite' => LaravelSocialiteFacadesSocialite::class,<\/code><\/pre>\n
Agora \u00e9 hora de registrar seu aplicativo no site social. Por exemplo, presumimos que voc\u00ea deseja implementar a autentica\u00e7\u00e3o de login do Facebook. Ent\u00e3o v\u00e1 em frente e crie um aplicativo no Facebook<\/a>.<\/p>\n
Assim que estiver pronto com o id do aplicativo, o segredo do aplicativo do Facebook, abra o arquivo config \/ services.php e adicione o c\u00f3digo abaixo a ele.<\/p>\n
'facebook' => [\n\u00a0\u00a0\u00a0\u00a0'client_id' => env('FB_APP_ID'),\n\u00a0\u00a0\u00a0\u00a0'client_secret' => env('FB_APP_SECRET'),\n\u00a0\u00a0\u00a0\u00a0'redirect' => env('FB_CALLBACK_URL'),\n],<\/code><\/pre>\n
Conforme mostrado no c\u00f3digo acima, temos que armazenar os detalhes do nosso aplicativo e a URL de retorno de chamada no arquivo .env.<\/p>\n
FB_APP_ID=PASTE_APP_ID_HERE\nFB_APP_SECRET=PASTE_APP_SECRET_HERE\nFB_CALLBACK_URL=YOU_SITE_URL\/login\/facebook\/callback<\/code><\/pre>\n
Passamos o URL de retorno de chamada como YOU_SITE_URL \/ login \/ facebook \/ retorno de chamada. Agora \u00e9 hora de criar duas rotas, uma para redirecionar o usu\u00e1rio ao provedor OAuth (no nosso caso, Facebook) e outra para receber o callback do provedor ap\u00f3s a autentica\u00e7\u00e3o.<\/p>\n
C\u00f3digo real para lidar com OAuth<\/h3>\n
Neste est\u00e1gio, conclu\u00edmos todas as configura\u00e7\u00f5es do Laravel Socialite. \u00c9 hora de escrever algum c\u00f3digo que lida com o redirecionamento OAuth e busque os detalhes do usu\u00e1rio.<\/p>\n
Abra seu arquivo login.blade.php e coloque o c\u00f3digo abaixo nele, provavelmente ap\u00f3s o bot\u00e3o de envio.<\/p>\n
<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"col-md-6 col-md-offset-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Login with\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"{{ url('\/login\/facebook') }}\"><i class=\"fa fa-facebook-official\" aria-hidden=\"true\"><\/i> Facebook<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"{{ url('\/login\/twitter') }}\"><i class=\"fa fa-twitter\" aria-hidden=\"true\"><\/i> Twitter<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"{{ url('\/login\/github') }}\"><i class=\"fa fa-github\" aria-hidden=\"true\"><\/i> Github<\/a>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div><\/code><\/pre>\n
Aqui, estamos adicionando um link para Github e Twitter. As etapas para adicionar OAuth para esses sites sociais tamb\u00e9m s\u00e3o iguais \u00e0s do Facebook. Voc\u00ea s\u00f3 precisa criar um aplicativo dos respectivos sites sociais e armazenar esses detalhes da mesma forma que adicionamos para o Facebook.<\/p>\n
Em seu arquivo de rota, defina as rotas conforme abaixo.<\/p>\n
Route::get('login\/{provider}', 'AuthLoginController@redirectToProvider');\nRoute::get('login\/{provider}\/callback', 'AuthLoginController@handleProviderCallback');<\/code><\/pre>\n
Em seguida, navegue at\u00e9 app \/ Http \/ Controllers \/ Auth \/ LoginController.php e modifique o arquivo. Voc\u00ea deve adicionar o c\u00f3digo abaixo nele.<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllersAuth;\n\u00a0\nuse AppHttpControllersController;\nuse IlluminateFoundationAuthAuthenticatesUsers;\nuse Socialite;\nuse AppUser;\nuse Auth;\n\u00a0\nclass LoginController extends Controller\n{\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Redirect the user to the GitHub authentication page.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return Response\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function redirectToProvider($provider)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return Socialite::driver($provider)->scopes(['email'])->redirect();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Obtain the user information from GitHub.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return Response\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function handleProviderCallback($provider)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$user = Socialite::driver($provider)->user();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$authUser = $this->findOrCreateUser($user, $provider);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Auth::login($authUser, true);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect($this->redirectTo);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* If a user has registered before using social auth, return the user\n\u00a0\u00a0\u00a0\u00a0\u00a0* else, create a new user object.\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param\u00a0 $user Socialite user object\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param $provider Social auth provider\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return\u00a0 User\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function findOrCreateUser($user, $provider)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$authUser = User::where('provider_id', $user->id)->first();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ($authUser) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $authUser;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return User::create([\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'name'\u00a0\u00a0\u00a0\u00a0 => $user->name,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'email'\u00a0\u00a0\u00a0 => $user->email,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'provider' => $provider,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'provider_id' => $user->id\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]);\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
O m\u00e9todo redirectToProvider redireciona o usu\u00e1rio para a p\u00e1gina de login de um site social. Depois que o usu\u00e1rio autoriza o aplicativo, buscamos as informa\u00e7\u00f5es do usu\u00e1rio na fun\u00e7\u00e3o handleProviderCallback. Se o usu\u00e1rio n\u00e3o existe em nosso sistema, adicionamos seus detalhes usando o m\u00e9todo findOrCreateUser.<\/p>\n
Esperamos que voc\u00ea conhe\u00e7a o sistema de login social usando o Laravel Socialite. Se voc\u00ea tiver alguma d\u00favida ou sugest\u00e3o, por favor, deixe um coment\u00e1rio abaixo.<\/p>\n
Artigos relacionados<\/h4>\n