5
![Mejor respuesta del mensaje [MOD] Identificación con RRSS](images/thx/star.png)
Pedido: Debes agradecer para ver el contenido...Autor: Debes agradecer para ver el contenido...
Identificación con RRSS
Bueno, en realidad es algo que había creado para ZCode, lo pude haber hecho con alguna librería php para facilitarlo, pero como solamente requeria algunos servicios, poner un monton de archivos para no usarlo, se me hacia una perdida de recursos innecesarios, por lo cual he decidido dejar: Google, Discord, Github y Facebook.
A este 'MOD' lo hice para ZCode, por lo cual algunas cosas deberán adaptarlos ustedes a su tema, como por ejemplo la configuración de las redes sociales.
Solo colocaré enlaces de youtube para obtener las claves de cada uno, ya que se convertiría en un tutorial demasiado extenso.
Google: Debes agradecer para ver el contenido... (Min. 12:49)
Twitter: Debes agradecer para ver el contenido... (Min. 26:03) [sin uso, por el momento]
Facebook: Debes agradecer para ver el contenido... (Min. 32:07)
Discord: Debes agradecer para ver el contenido... (Hasta el min 02:05)
Github: Debes agradecer para ver el contenido...
En el servidor de discord accediendo a Debes agradecer para ver el contenido... tendrás las formas de obtener las claves en modo guía, solo los pasos sin imágenes (y también están fijados en el canal "#actualizaciones")
Lo que realmente necesitaremos usar es Client-ID, Client-Secret y en RedirectURL/Callback le colocarás la url que da la administración de tu sitio.
1 - Ejecutar las siguentes consultas
Código PHP: ( Seleccionar Todo )
CREATE TABLE IF NOT EXISTS `miembros_social` (
`social_id` int(11) NOT NULL AUTO_INCREMENT,
`social_user_id` int(11) NOT NULL DEFAULT 0,
`social_name` varchar(20) NOT NULL DEFAULT '',
`social_nick` varchar(24) NOT NULL DEFAULT '',
`social_email` varchar(80) NOT NULL DEFAULT '',
PRIMARY KEY (`social_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
CREATE TABLE IF NOT EXISTS `settings_social` (
`social_id` int(11) NOT NULL AUTO_INCREMENT,
`social_name` varchar(22) NOT NULL DEFAULT '',
`social_client_id` tinytext NULL,
`social_client_secret` tinytext NULL,
`social_redirect_uri` tinytext NULL,
PRIMARY KEY (`social_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
2 - Agregar en .htaccess debajo de
Código PHP: ( Seleccionar Todo )
RewriteRule ^agregar.php$ inc/php/agregar.php [QSA,L]
añadir esto
Código PHP: ( Seleccionar Todo )
# CALLBACK PARA REDES SOCIALES
RewriteRule ^(github|discord|google|facebook|twitter)\.php$ inc/callback/$1.php [QSA,L]
3 - Agregar en header.php debajo de
Código PHP: ( Seleccionar Todo )
$smarty->assign('tsConfig', $tsCore->settings);
esto
Código PHP: ( Seleccionar Todo )
$smarty->assign('SocialMager', $tsCore->OAuth());
4 - Ir a inc/class/c.core.php y arriba de la última llave } agregan lo siguiente
Código PHP: ( Seleccionar Todo )
public function getEndPoints(string $social = '', string $type = '') {
$getEndPoints = [
'github' => [
'authorize' => 'Registrate o inicia tu sesión para ver este contenido
'token' => "Registrate o inicia tu sesión para ver este contenido",
'revoke' => "",
'user' => "Registrate o inicia tu sesión para ver este contenido",
'scope' => "user"
],
'discord' => [
'authorize' => 'Registrate o inicia tu sesión para ver este contenido
'token' => "Registrate o inicia tu sesión para ver este contenido",
'revoke' => "Registrate o inicia tu sesión para ver este contenido",
'user' => "Registrate o inicia tu sesión para ver este contenido@me",
'scope' => "email identify"
],
'google' => [
'authorize' => 'Registrate o inicia tu sesión para ver este contenido
'token' => "Registrate o inicia tu sesión para ver este contenido",
'user' => "Registrate o inicia tu sesión para ver este contenido",
'revoke' => "",
'scope' => "Registrate o inicia tu sesión para ver este contenido Registrate o inicia tu sesión para ver este contenido"
],
'facebook' => [
'authorize' => "Registrate o inicia tu sesión para ver este contenido",
'token' => "Registrate o inicia tu sesión para ver este contenido",
'revoke' => "",
'user' => "Registrate o inicia tu sesión para ver este contenido",
'scope' => "email,public_profile"
]
];
return $getEndPoints[$social][$type];
}
/**
* Genera URLs de autorización OAuth para diferentes proveedores sociales.
*
* @return array Un array asociativo con el nombre del proveedor como clave y la URL de autorización como valor.
*/
public function OAuth(string $redirect = ''): array {
// Obtener la lista de proveedores OAuth
$OAuths = result_array(db_exec([__FILE__, __LINE__], 'query', 'SELECT social_name, social_client_id, social_client_secret, social_redirect_uri FROM settings_social'));
$routes = [];
foreach ($OAuths as $auth) {
// Preparar los parámetros para la solicitud OAuth
$parameters['client_id'] = $auth['social_client_id'];
$parameters['scope'] = $this->getEndPoints($auth['social_name'], 'scope');
$parameters['response_type'] = ($auth['social_name'] === 'github') ? '' : 'code';
$parameters['redirect_uri'] = $auth['social_redirect_uri'];
// Eliminar el parámetro response_type si es 'github'
if ($auth['social_name'] === 'github') {
unset($parameters['response_type']);
}
if(in_array($auth['social_name'], ['google', 'discord'])) {
$parameters['prompt'] = 'consent';
}
// Construir la URL de autorización
$queryString = http_build_query(array_filter($parameters));
$authorizeUrl = $this->getEndPoints($auth['social_name'], 'authorize');
$routes[$auth['social_name']] = "$authorizeUrl?$queryString";
}
return $routes;
}
5 - Ir a inc/class/c.cuenta.php y justo debajo de
Código PHP: ( Seleccionar Todo )
class tsCuenta {
agregan
Código PHP: ( Seleccionar Todo )
private function getSocialUser(int $user_id = 0) {
// Redes viculadas
$socials = result_array(db_exec([__FILE__, __LINE__], 'query', "SELECT social_name as name FROM miembros_social WHERE social_user_id = $user_id"));
$array_social = [
'discord' => false,
'facebook' => false,
'github' => false,
'google' => false
];
foreach($socials as $sn) {
$name = $sn['name'];
if (isset($array_social[$name])) {
$array_social[$name] = true;
}
}
return $array_social;
}
Luego dentro de la función
Código PHP: ( Seleccionar Todo )
public function loadPerfil($user_id = 0){
buscar
Código PHP: ( Seleccionar Todo )
$perfilInfo = $this->unData($perfilInfo);
y agregar debajo
Código PHP: ( Seleccionar Todo )
$perfilInfo['socials'] = $this->getSocialUser($user_id);
6 - Luego en inc/class/c.user.php y arriba de la funcion
Código PHP: ( Seleccionar Todo )
public function loginUser(...)
agregar lo siguiente
Código PHP: ( Seleccionar Todo )
/*
* Desconectar la red social de nuestra cuenta
*/
public function unlinkAccount() {
global $tsCore;
# Buscamos para desactivar
$delete = $tsCore->setSecure($_POST['social']);
if($this->is_member) {
$data = db_exec('fetch_assoc', db_exec([__FILE__, __LINE__], 'query', "SELECT u.user_id, m.social_id, m.social_name FROM u_miembros AS u LEFT JOIN miembros_social AS m ON m.social_user_id = u.user_id WHERE u.user_id = {$this->uid} AND m.social_name = '$delete' LIMIT 1"));
$sid = (int)$data['social_id'];
// Actualizamos la tabla
return (db_exec([__FILE__, __LINE__], 'query', "DELETE FROM miembros_social WHERE social_id = $sid AND social_name = '$delete' AND social_user_id = {$this->uid}")) ? true : false;
}
}
/**
* Se repiten en 2 funciones diferentes
*/
public function sessionUpdate(int $id = 0, bool $rem = true) {
// Actualizamos la session
$this->session->update($id, $rem, TRUE);
$this->loadUser(true);
$this->DarMedalla();
}
luego buscar en la funcion
Código PHP: ( Seleccionar Todo )
public function loginUser(...)
buscamos
Código PHP: ( Seleccionar Todo )
$this->session->update($data['user_id'], $remember, TRUE);
$this->loadUser(true);
$this->DarMedalla();
y reemplazamos
Código PHP: ( Seleccionar Todo )
$this->sessionUpdate($data['user_id'], $remember);
7 - Ir a inc/php/admin.php y arriba de
Código PHP: ( Seleccionar Todo )
} elseif($action == 'configs'){
añadir
Código PHP: ( Seleccionar Todo )
// Redes sociales
} elseif($action === 'socials') {
// CLASE MEDAL
require_once TS_CLASS . "c.socials.php";
$tsSocials = new tsSocials();
$smarty->assign('tsNetsSocials', [
'discord' => 'Discord',
'facebook' => 'Facebook',
'github' => 'Github',
'google' => 'Google'
]);
//
$tsTitle = 'Configurar redes sociales';
if(empty($act)) $smarty->assign('tsSocials', $tsSocials->getSocials());
// Editar o Nuevo tema
elseif(in_array($act, ['editar', 'nueva'])) {
$tsTitle = ucfirst($act) . ' red social';
if(!empty($_POST['save']) OR !empty($_POST['edit'])) {
$social = ($act === 'editar') ? $tsSocials->saveSocial() : $tsSocials->newSocial();
if($social) $tsCore->redirectTo($tsCore->settings['url'].'/admin/socials?save=true');
} else {
if($act === 'editar') $smarty->assign("tsSocial", $tsSocials->getSocial());
if($act === 'nuevo') $smarty->assign("tsError", $tsSocials->newSocial());
}
} elseif($act === 'borrar') {
if($tsSocials->eliminarRed()) $tsCore->redirectTo($tsCore->settings['url'].'/admin/socials?save=true');
}
8 - Ir a themes/TUTEMA/js/admin.js y agregar al final
Código PHP: ( Seleccionar Todo )
$(document).ready(() => {
let redirectURI = $('#redirect_uri');
if(empty(redirectURI.val())) redirectURI.val(`${global_data.url}/discord.php`)
$('#social_name').on('change', () => {
let replace = $('#social_name option:selected').val() ;
redirectURI.val(`${global_data.url}/${replace}.php`);
});
$("#botonCopiar").on("click", function() {
redirectURI.select();
document.execCommand("copy");
window.getSelection().removeAllRanges();
$(this).html("Redirect URL ha sido copiado correctamente!");
setTimeout(() => $(this).html('Copiar'), 5000);
});
});
9 - Ir a themes/TUTEMA/js/cuenta.js al principio o final (donde quieran) agregan
Código PHP: ( Seleccionar Todo )
function desvincular(social) {
$.post(`${global_data.url}/cuenta-desvincular.php`, { social }, req => {
if(req) {
mydialog.show();
mydialog.title('Bien');
mydialog.body('Ha sido desvinculado correctamente.');
mydialog.buttons(true, true, 'Listo', 'mydialog.close();', true, true, false);
mydialog.center();
}
});
}
10 - Ir a themes/TUTEMA/sections/main_header.tpl y arriba de
Código PHP: ( Seleccionar Todo )
<link href="{$tsConfig.tema.t_url}/estilos.css" rel="stylesheet" type="text/css">
esto
Código PHP: ( Seleccionar Todo )
<link href="{$tsConfig.tema.t_url}/socialButton.css" rel="stylesheet" type="text/css">
11 - Ir a themes/TUTEMA/templates/t.admin.tpl y debajo de
Código PHP: ( Seleccionar Todo )
{include file='admin_mods/m.admin_configs.tpl'}
agregar
Código PHP: ( Seleccionar Todo )
{elseif $tsAction == 'socials'}
{include file='admin_mods/m.admin_socials.tpl'}
12 - Ir a themes/TUTEMA/templates/admin_mods/m.admin_sidebar.tpl y debajo de
Código PHP: ( Seleccionar Todo )
<li id="a_creditos"><span class="cat-title"><a href="{$tsConfig.url}/admin/creditos">Soporte y Créditos</a></span></li>
añadir
Código PHP: ( Seleccionar Todo )
<li id="a_socials"><span class="cat-title"><a href="{$tsConfig.url}/admin/socials">Configurar redes</a></span></li>
13 - Ir a themes/TUTEMA/template/modules/m.cuenta_sidebar.tpl (agregalo donde quieras)
Código PHP: ( Seleccionar Todo )
<div class="">
<h4>Tus redes sociales</h4>
{foreach from=$SocialMager key=nombre item=social}
<div class="btn-group-socials d-block">
<a class="btn btn--{$nombre}" href="{if $tsPerfil.socials.$nombre}javascript:desvincular('{$nombre}'){else}{$social}{/if}">
<span class="btn--icon"><span class="icon_social icon_{$nombre}"></span></span>
<span class="btn--text">{if $tsPerfil.socials.$nombre}Desv{else}V{/if}incular {$nombre}</span>
</a>
</div>
{foreachelse}
<div class="empty">Conexiones a tus redes sociales, pero aun {$tsConfig.titulo} no las ha configurado!</div>
{/foreach}
</div>
14 - Ir a themes/TUTEMA/template/t.login.tpl añaden, ya que con esto podrán iniciar sesión desde alguna red social
Código PHP: ( Seleccionar Todo )
{if $SocialMager}
<div class="buttons-social">
{foreach from=$SocialMager key=nombre item=social}
<a class="btn btn--{$nombre} btn--only-icon btn-active" href="{$social}">
<span class="btn--icon"><span class="icon_social icon_{$nombre}"></span></span>
<span class="btn--text">Iniciar con {$nombre}</span>
</a>
{/foreach}
</div>
{/if}
15 - Ir a themes/TUTEMA/template/t.registro.tpl añaden, ya que con esto podrán crear cuenta desde alguna red social
Código PHP: ( Seleccionar Todo )
{if $SocialMager}
<div class="buttons-social">
{foreach from=$SocialMager key=nombre item=social}
<a class="btn btn--{$nombre} btn--only-icon btn-active" href="{$social}">
<span class="btn--icon"><span class="icon_social icon_{$nombre}"></span></span>
<span class="btn--text">Crear cuenta con {$nombre}</span>
</a>
{/foreach}
</div>
{/if}
En el punto 14 y 15 tiene la clase 'btn--only-icon', el cual claramente muestra solo el icono, si quieren visualizar el texto deberán borrar dicha clase
Debes agradecer para ver el contenido...
c.socials.php en inc/class/
m.admin_socials.tpl en themes/TUTEMA/templates/admin_mods
socialButtons.css en themes/TUTEMA/
Facebook
Twitter
Reddit
Digg
del.icio.us
Tumblr
Pinterest
Blogger
Fark
LinkedIn
Mix
Google