Integração de instâncias do Titan com Redes Sociais

156 views
Skip to first unread message

Camilo Carromeu

unread,
Jul 18, 2013, 1:21:52 PM7/18/13
to titan-f...@googlegroups.com
Olá pessoal,

Disponibilizei uma versão estável do Titan com uma nova API para integração de instâncias com redes sociais. A versão inicial integra apenas o Facebook e permite, por enquanto, apenas o registro e login automático na instância. É uma versão ALPHA e seu uso em produção é fortemente desencorajado. Estou divulgando para os aventureiros me ajudarem em testes e enviarem contribuições.

Inline image 2

Ao clicar no botão da rede social o usuário deve conceder permissão à aplicação para acessar os dados de seu perfil. Com acesso a estes dados o Titan verifica se há algum cadastro na base da instância vinculado àquele perfil. Não havendo, o Titan verifica se há algum cadastro com o mesmo e-mail do perfil. Por conta desta regra, a integração com redes sociais funciona apenas se a coluna '_email' da tabela '_user' for UNIQUE. O Titan também faz essa verificação no LDAP, caso o sistema esteja utilizando. Se existir um cadastro com o mesmo e-mail, o perfil na rede social é vinculado à ele. Caso não exista, é criado um novo cadastro (on-the-fly). Neste ponto existe uma limitação da versão atual da API: não é possível, ainda, editar dados adicionais antes do registro do usuário na instância. Ou seja, isso significa que se, por exemplo, for obrigatório ao cadastro do usuário o preenchimento do CPF, não há um passo em que ele pode adicionar esta informação. Por enquanto você terá que cuidar disto em um componente dentro da instância. Este problema se propaga também no uso de LDAP. A API cria o usuário (caso ele não exista) no servidor LDAP, mas insere apenas campos básicos que normalmente existem em qualquer servidor OpenLDAP.

Repare que, uma vez inserido na instância, o usuário sempre poderá se autenticar pela rede social. O sistema gera automaticamente um login (baseado no login da rede social) e uma senha (randômica). Caso o usuário queira logar utilizando também esta senha, terá que alterá-la pelo "Esqueci minha senha".

A API utiliza uma arquitetura baseada em DRIVERs, semelhante aos componentes que estamos acostumados. Assim, é possível criar novos drivers não-nativos ou sobrecarregar os nativos para que se comportem de forma diferente.

Os drivers estão localizados dentro do repositório ("[CORE]/repos/social/"). Para ativar o uso da API, basta colocar no 'configure/titan.xml' a referência para o arquivo de mapeamento:

<social
xml-path="configure/social.xml"
/>

Neste caso o arquivo se chama 'social.xml' e está dentro da pasta 'configure/'. Seu conteúdo é semelhante ao seguinte:

<?xml version="1.0" encoding="UTF-8"?>
<social-mapping>
<social
driver="Facebook"
register-as="community"
auth-id="XXXXXXXXXX"
auth-secret="YYYYYYYYYY">
<attribute name="username" column="_login" />
<attribute name="name" column="_name" />
<attribute name="email" column="_email" permission="email" />
<attribute name="timezone" column="_timezone" />
<attribute name="locale" column="_language" />
<attribute name="birthday" column="birth_date" permission="user_birthday" />
<attribute name="gender" column="gender" />
<attribute name="picture" column="photo" />
<attribute name="website" column="url" permission="user_website" />
<attribute name="relationship_status" column="marriage" permission="user_relationships" />
<attribute name="link" column="facebook" />
<!--
<attribute name="hometown" column="" permission="user_hometown" />
<attribute name="bio" column="" permission="user_about_me" />
-->
</social>
</social-mapping>

Apenas o driver nativo para Facebook está disponível por enquanto. Para habilitar, é necessário primeiro registrar sua aplicação no Facebook Developers. Para isto, acesse o site do Facebook Developers e se registre como desenvolvedor (https://developers.facebook.com/). Em seguida, no menu superior, vá em "Apps" e, depois, no botão "Create New App".

Inline image 3

Pronto, copie a "App ID" e a "App Secret" para os campos "auth-id" e "auth-secret" da configuração do driver no 'configure/social.xml'. No atributo 'register-as' deve ser inserido o nome do tipo de usuário (configurado no arquivo 'configure/security.xml') que será atribuído ao cadastro do usuário quando ele for criado na instância. Por fim, são mapeados os campos que vêm do Facebook com as colunas que existem na tabela '_user' da instância. Os campos disponibilizados pelo Facebook podem ser visualizados no link abaixo:


Os valores do Facebook precisam ser transformados antes de serem salvos na instância. Para fazer esta transformação os drivers do Titan trabalhando com "adapters". Os adapters nativos estão localizados na pasta '_adapter' do driver. Caso tenha uma coluna na sua tabela '_user' que possua um formato diferente, você precisará sobreescrever este adapter. Por exemplo, o atributo "gender" vêm com os seguintes valores do Facebook: 'female' ou 'male'. Por padrão, a coluna 'gender' sugerida na instância-base do Titan aceita os valores '_F_' e '_M_'. Sua instância, no entanto, pode não adotar este padrão. Assim, você terá que sobreescrever o adapter nativo. Para isto basta criar uma pasta local (p.e., 'local/social/Facebook/_adapter/') e copiar para ela o "gender.php" nativo (pasta '_adpater' do driver no repositório do CORE). Altere o código e, na declaração do atributo na configuração do driver no arquivo 'configure/social.xml' adicione o 'adapter':

<?xml version="1.0" encoding="UTF-8"?>
<social-mapping>
<social
driver="Facebook"
register-as="community"
auth-id="XXXXXXXXXX"
auth-secret="YYYYYYYYYY">
<attribute name="username" column="_login" />
<attribute name="name" column="_name" />
<attribute name="email" column="_email" permission="email" />
<attribute name="timezone" column="_timezone" />
<attribute name="locale" column="_language" />
<attribute name="birthday" column="birth_date" permission="user_birthday" />
<attribute name="gender" column="gender" adapter="local/social/Facebook/_adapter/gender.php" />
<attribute name="picture" column="photo" />
<attribute name="website" column="url" permission="user_website" />
<attribute name="relationship_status" column="marriage" permission="user_relationships" />
<attribute name="link" column="facebook" />
<!--
<attribute name="hometown" column="" permission="user_hometown" />
<attribute name="bio" column="" permission="user_about_me" />
-->
</social>
</social-mapping>

Você pode facilmente importar outras informações para a instância adicionando novas tags "<attribute />". Perceba que algumas informações requerem permissões especiais. Estas devem ser passadas por meio da palavra-chave 'permission'.

Além dos XMLs, é necessário inserir no DB a coluna onde ficará armazenada o ID do usuário na rede social (desta forma, mesmo que ele venha a alterar seu e-mail posteriormente, o perfil continuará relacionado ao cadastro):

ALTER TABLE titan._user ADD COLUMN _facebook BIGINT;

ALTER TABLE titan._user ADD CONSTRAINT _user__facebook_key UNIQUE (_facebook);

Lembrando que a coluna '_email' precisa ser UNIQUE:

ALTER TABLE titan._user ADD CONSTRAINT _user__email_key UNIQUE (_email);

A tag '<social></social>' aceita que seja passado um 'path' para o caso de você querer sobreescrever um driver completamente ou criar um driver para uma rede não contemplada pelos drivers nativos. Para criar drivers basta estender a classe abstrata "SocialDriver" e implementar os métodos requeridos.

Espero que seja útil.

Abraços,

Camilo

--
http://www.carromeu.com/

e-Mails:
cam...@carromeu.com
camilo....@embrapa.br

Skype: ccarromeu
gTalk: cam...@carromeu.com

http://twitter.com/ccarromeu/
2.png
1.png

Camilo Carromeu

unread,
Jul 23, 2013, 11:15:06 AM7/23/13
to titan-f...@googlegroups.com
Olá pessoal,

Evolui um pouco mais a integração do Titan com redes sociais. Em resumo, foi adicionada a interface de gestão que possibilita conectar ou desconectar de suas redes sociais e foi adicionada a integração do o Google Plus.

Primeiramente, há uma alteração importante a ser feita. A coluna que registra o ID do Facebook passa agora a registrar o "username". Portanto:

ALTER TABLE titan._user DROP COLUMN _facebook;

ALTER TABLE titan._user ADD COLUMN _facebook VARCHAR(50);

ALTER TABLE titan._user ADD CONSTRAINT _user__facebook_key UNIQUE (_facebook);

Também foi adicionado um novo atributo denominado 'auto-register' à tag '<social />' do 'configure/social.xml'. Ela aceita valores 'true' ou 'false' e diz ao Titan se ele deve tentar registrar o usuário caso este não tenha conectado o perfil da rede social à instância ou caso não encontre um cadastro com o mesmo e-mail da rede social. Por padrão o Titan sempre tentará criar o usuário. Isto significa que pode haver a criação de cadastros redundantes caso o usuário já tenha se cadastrado na instância com um e-mail diferente do que utiliza na rede social e caso esta rede social não esteja conectada ao perfil dele por meio da interface de gestão. Neste caso, ao clicar no botão para logar com a rede social o Titan (com 'auto-register' habilitado) criará um novo cadastro com base neste e-mail.

A interface de gestão de Redes Sociais foi adicionada ao componente "global.home". O código é simples (apenas as funções 'showSocialNetworks' e 'disconnectFromSocialNetwork' do '_js.php' deste componente), uma vez que ela precisa apenas consultar a API. Assim, você pode facilmente adicioná-la a seus próprios componentes.

Inline image 1

Para habilitá-la utilizando este componente, altere o 'config.inc.xml' da seção adicionando as linhas em vermelho:

<?xml version="1.0" encoding="UTF-8"?>
<action-mapping>
<directive name="_NEED_UPDATE_AFTER_DAYS_" value="90" />
<action
name="home"
label="System Monitor | pt_BR: Monitor do Sistema | es_ES: Monitor de sistema"
description="">
<menu function="search" image="create.png" label="Add RSS Feed | pt_BR: Adicionar Feed RSS | es_ES: Agregar Feed RSS" />
<menu action="profile" image="personal.png" />
</action>
<action
name="profile"
label="Personal Data Show | pt_BR: Visualizar Dados Pessoais | es_ES: Mostrar datos de carácter personal"
default="true"
description="">
<menu function="js" js="showSocialNetworks ()" image="social.png" label="Social Networks | pt_BR: Redes Sociais" />
<menu function="search" image="permission.png" label="Change Password | pt_BR: Alterar Senha | es_ES: Cambiar contraseña" />
<menu action="personal" image="edit.png" />
<menu action="home" image="configure.png" />
</action>
<action
name="personal"
label="Edit Personal Data | pt_BR: Alterar Dados Pessoais | es_ES: Edición de Datos de Carácter Personal"
description="">
<menu function="js" js="showSocialNetworks ()" image="social.png" label="Social Networks | pt_BR: Redes Sociais" />
<menu function="search" image="permission.png" label="Change Password | pt_BR: Mudar Senha | es_ES: Cambiar contraseña" />
</action>
</action-mapping>

Em relação à integração com o Google+, comece o processo criando a coluna necessária no DB:

ALTER TABLE titan._user ADD COLUMN _google CHAR(21);

ALTER TABLE titan._user ADD CONSTRAINT _user__google_key UNIQUE (_google);

Em seguida, habilite no "Google APIs Console" sua aplicação. Vá à URL https://code.google.com/apis/console/ e crie um novo projeto. No item "Services" do menu do seu projeto, habilite a opção "Google+ API". Vá em "API Access" e clique no botão "Create an OAuth 2.0 client ID...". Insira as informações necessárias e você terá agora um ID para a aplicação e uma chave privada que deverão ser inseridas nos atributos 'auth-id' e 'auth-secret' da configuração do seu driver (tag '<social />') do seu 'configure/social.xml'.

É muito importante atentar-se ao valor do campo "Redirect URIs". Ao contrário do Facebook, que aceitava um "prefixo" para as URLs de redirecionamento, o Google exige a URL completa. Assim, é necessário inserir a URL da sua página de login. Se for a padrão:

http://[URL para instância]/titan.php?target=login

Caso habilite a gestão de redes sociais, será necessário colocar também a "URL de linking", que é no seguinte formato:

https://[URL para instância]/titan.php?target=social&driver=Google&section=[seção com o gestor de redes sociais]&action=[ação com o gestor de redes sociais]

Por exemplo, no Pandora esta URL têm o seguinte formato:


Fica assim:

Inline image 2

Reparem que a configuração do ambiente de desenvolvimento e de produção ficam no mesmo projeto. Reparem também que, no meu caso, há três "Redirect URIs" habilitadas, a do login e as relativas às duas ações que possuem o botão de gerenciar redes sociais.

Coloque agora a configuração do driver no 'configure/social.xml' (atente-se aos atributos, caso não tenha a coluna referenciada ou o nome seja diferente você precisará alterar abaixo):

<?xml version="1.0" encoding="UTF-8"?>
<social-mapping>
<social
driver="Facebook"
register-as="security.community"
auto-register="true"
auth-id="1234"
auth-secret="XXXX">
<attribute name="username" column="_login" />
<attribute name="name" column="_name" />
<attribute name="email" column="_email" permission="email" />
<attribute name="timezone" column="_timezone" />
<attribute name="locale" column="_language" />
<attribute name="birthday" column="birth_date" permission="user_birthday" />
<attribute name="gender" column="gender" />
<attribute name="picture" column="photo" />
<attribute name="website" column="url" permission="user_website" />
<attribute name="relationship_status" column="marriage" permission="user_relationships" />
<attribute name="link" column="facebook" />
</social>
<social
driver="Google"
register-as="security.community"
auto-register="true"
auth-id="4321"
auth-secret="YYYY">
<attribute name="name" column="_name" />
<attribute name="email" column="_email" />
<attribute name="locale" column="_language" />
<attribute name="birthday" column="birth_date" />
<attribute name="gender" column="gender" />
<attribute name="picture" column="photo" />
<attribute name="link" column="gplus" />
</social>
</social-mapping>

Pronto, o resultado na tela de logon será:

Inline image 3

Espero que seja útil.

Abraços,

Camilo


2013/7/18 Camilo Carromeu <cam...@carromeu.com>
1.png
2.png
02.png
03.png
01.png

Marcio Osshiro

unread,
May 4, 2014, 5:41:39 PM5/4/14
to titan-f...@googlegroups.com
Olá pessoal, saudações,

estou tentando utilizar a integração do titan com o facebook mas estou com um problema no field "username".

dei uma olhada neste link "https://developers.facebook.com/docs/graph-api/reference/v2.0/user" e não encontrei este campo


como devo proceder ?

abraços, Marcio
Reply all
Reply to author
Forward
0 new messages