Criação de Aplicativos de redes sociais para Autenticação

Tamanho: px

Começar a partir da página:

Download "Criação de Aplicativos de redes sociais para Autenticação"

Aparecida Van Der Vinne Martinho
8 Há anos
Visualizações:

1 Criação de Aplicativos de redes sociais para Autenticação 1

2 ÍNDICE OBJETIVO FINALIDADE CRIANDO APLICATIVO DO FACEBOOK NAVEGANDO NA PÁGINA AUTENTIQUE COM SUA CONTA: ADICIONANDO UM NOVO APLICATIVO: ESCOLHENDO O TIPO DE APLICATIVO: CRIANDO APLICATIVO PROPRIAMENTE DITO CRIANDO O APLICATIVO: CONFIGURANDO O APLICATIVO: ESCOLHA O APLICATIVO DA WEB: ADICIONE A URL DE REDIRECIONAMENTO: CONFIGURAÇÕES AVANÇADAS: COLOCANDO EM MODO DE PRODUÇÃO O APLICATIVO DO FACEBOOK: COPIANDO O ID DO CLIENTE E A SENHA SECRETA: AUTENTICANDO NA ÁREA ADMINISTRATIVA DO PACKET FENCE: ESCOLHENDO O SOURCE DO FACEBOOK: CONFIGURANDO O SOURCE DO FACEBOOK: ADICIONANDO UMA REGRA PARA O PERFIL DO USUÁRIO: CRIANDO DE APLICATIVO DO MICROSOFT LIVE AUTENTICAR COM SUA CONTA DO MICROSOFT LIVE: CLIQUE NO LINK DE CRIAR UM APLICATIVO: DIGITE O NOME DO APLICATIVO E ESCOLHA O IDIOMA E CLIQUE EM ACEITO: ESCOLHA A URL A LOGO DO APLICATIVO, URL DE TERMOS DE SERVIÇO E DE PRIVACIDADE: CONFIGURANDO A API PARA PODER AUTENTICAR NO MICROSOFT LIVE: ID DO CLIENTE E SEGREDO DO CLIENTE: ESCOLHENDO O SOURCE DO MICROSOFT LIVE: CONFIGURANDO O SOURCE DO WINDOWS LIVE: CRIANDO APLICATIVO DO GOOGLE NAVEGANDO NA PAGINA CLIQUE EM CRIAR UM PROJETO: DEFINA UM NOME PARA SEU PROJETO: ATIVANDO A API DE AUTENTICAÇÃO: ADICIONANDO AS CREDENCIAIS: CRIANDO O ID DO CLIENTE E A CHAVE SECRETA: ESCOLHENDO O TIPO DE APLICAÇÃO: ESCOLHA SOURCE DO GOOGLE: CONFIGURANDO O SOURCE DO GOOGLE: CRIANDO DE APLICATIVO DO LINKEDIN NAVEGANDO NA PAGINA EFETUE A AUTENTICAÇÃO COM UMA CONTA DO LINKEDIN: CRIANDO O APLICATIVO: ADICIONANDO A URL DE REDIRECIONAMENTO E COPIANDO O ID E O SEGREDO DO CLIENTE: ESCOLHA SOURCE DO LINKEDIN:

9 ADICIONE A URL DE REDIRECIONAMENTO:... 9 2.10 CONFIGURAÇÕES AVANÇADAS:... 10 2.11 COLOCANDO EM MODO DE PRODUÇÃO O APLICATIVO DO FACEBOOK:... 11 2.12 COPIANDO O ID DO CLIENTE E A SENHA SECRETA:.

3 5.6 CONFIGURANDO O SOURCE DO LINKEDIN:

4 4

5 Mostrar como é o processo de configuração de autenticação usando as redes sociais como Facebook, Microsoft Live, Google e Linkedin no Packet Fence. 1.1 Finalidade Mostrar como são as criações dos aplicativos do Facebook, Microsoft Live, Google e Linkedin de forma simples sem a necessidade de adicionar ícones e qualquer outra customização que seja de forma pessoal e sua configuração no Packet Fence; 5

1 Finalidade Mostrar como são as criações dos aplicativos do Facebook, Microsoft Live, Google e

6 Para criar um aplicativo deverá possuir uma conta ou criar uma nova. Tendo uma conta do Facebook basta entrar no seguinte site e realizar os seguintes passos: 2.1 Navegando na página Autentique com sua conta: 6

https://developers.facebook.com/ e realizar os seguintes passos: 2.

7 2.3 Adicionando um novo Aplicativo: 2.4 Escolhendo o tipo de aplicativo: 7

8 2.5 Criando aplicativo propriamente dito 2.6 Criando o aplicativo: Cria um nome para seu aplicativo, a descrição, se o aplicativo é para teste coloque não, e escolha a Categoria do aplicativo. 2.7 Configurando o aplicativo: Clique em Settings que está à esquerda do monitor. Posteriormente clique no botão Add Plataform: 8

aplicativo é para teste coloque não, e escolha a Categoria do aplicativo. 2.

9 2.8 Escolha o aplicativo da WEB: 2.9 Adicione a URL de redirecionamento: Essa Url ( deverá ser adicionada na configuração do Packet Fence e clique em salvar. 9

(https://<hostname>/oauth2/facebook) deverá ser

10 2.10 Configurações avançadas: Clique em Advanced e procure a opção (Valid Oauth redirect URIs) e adicione a Url de redirecionamento. Isto é pra que seu aplicativo possa ficar disponível para produção. 10

11 2.11 Colocando em modo de produção o aplicativo do Facebook: Clique na opção Status & Review na opção do lado esquerdo do seu monitor clique no botão No. Assim ativará o modo de produção do aplicativo. 11

do lado esquerdo do seu monitor clique no botão No.

12 2.12 Copiando o Id do Cliente e a senha secreta: Clique na opção Dashboard do lado esquerdo do seu monitor e logo em seguida no botão show. Copie o ID e a Senha secreta: 2.13 Autenticando na área administrativa do Packet Fence: Autentique na área administrativa do Packet Fence e logo em seguida clique em Configuration: 2.14 Escolhendo o Source do Facebook: Localize na barra lateral esquerda do seu monitor a opção sources e clique, logo em seguida irá abrir uma tela com o botão Add Source External->Facebook: 2.15 Configurando o source do Facebook: Coloque um nome, uma descrição, o ID e o segredo secreto do cliente que foi copiado no passo 2.12 desse how to e adicione nos respectivos campos e no campo Portal URL adicione 12

exatamente a mesma Url de redirecionamento que colocou no passo 2.9 (http://<hostaname> /oauth2/facebook).

13 exatamente a mesma Url de redirecionamento que colocou no passo 2.9 ( /oauth2/facebook). Aqui possui uma configuração muito importante que não pode deixar de configurar, que é a opção Graph API URL of logged user. Essa opção pede para o servidor do Facebook os campos que você deseje que ele retorne. E o campo principal é do , segue o exemplo Feito isso clique em salvar Adicionando uma regra para o perfil do usuário: Ao realizar o passo 3.9 irá aparecer um botão Add rule que é para criar um perfil para todos os usuários que autenticarem usando o Facebook. Ao clicar nesse botão você deverá adicionar um nome mais adequado para regra e configurar as opções que deseja para o Source do Facebook e clica em salvar. Feito isso irá criar um botão do Facebook na tela de autenticação do Captive Portal dando a possibilidade de autenticar usando o Facebook. 13

Essa opção pede para o servidor do Facebook os campos que você deseje que ele retorne. E o campo principal é do email, segue o exemplo https://graph.facebook.com/me?fields=email,name,id.

14 Para criar um aplicativo deverá possuir uma conta ou criar uma nova. Tendo uma conta do Microsoft Live basta entrar no seguinte site e realizar os seguintes passos: 3.1 Autenticar com sua conta do Microsoft Live: 3.2 Clique no link de criar um aplicativo: 14

microsoft.com/fwlink/?linkid=193157 e realizar os seguintes passos: 3.

15 3.3 Digite o nome do aplicativo e escolha o Idioma e clique em aceito: 3.4 Escolha a url a logo do Aplicativo, url de termos de Serviço e de privacidade: Lembrando que a logo do aplicativo e as urls citadas não são obrigatório, mas é interessante adicioná-las. 3.5 Configurando a API para poder autenticar no Microsoft Live: Na opção de aplicativo móvel ou desktop, marque a opção Não, domínio destino pode deixar em branco e na url de redirecionamento adicione /oauth2/windowslive e clique em salvar. 15

citadas não são obrigatório, mas é interessante adicioná-las. 3.

16 3.6 Id do Cliente e Segredo do cliente: Clique na opção Configuração do Aplicativo e copie o ID do Cliente e o Segredo do cliente, pois será usado nas configurações do Packet Fence. 3.7 Escolhendo o Source do Microsoft Live: Siga o passo 2.13 desse how to: Localize na barra lateral esquerda do seu monitor a opção sources e clique, logo em seguida irá abrir uma tela com o botão Add Source-External->WindowsLive: 16

7 Escolhendo o Source do Microsoft Live: Siga o passo 2.

17 3.8 Configurando o source do Windows Live: Coloque um nome, uma descrição, o ID e o segredo secreto do cliente que foi copiado no passo 3.6 desse how to e adicione nos respectivos campos e no campo Portal URL adicione exatamente a mesma Url de redirecionamento que colocou no passo 3.5 ( /oauth2/windowslive) clique em salvar. E posteriormente siga o passo

6 desse how to e adicione nos respectivos campos e no campo Portal URL adicione exatamente a

Para criar um aplicativo deverá possuir uma conta ou criar uma nova. Tendo uma conta do Google basta entrar no seguinte https://developers.google.com/?hl=pt-br e realizar os seguintes passos: 4.

18 Para criar um aplicativo deverá possuir uma conta ou criar uma nova. Tendo uma conta do Google basta entrar no seguinte e realizar os seguintes passos: 4.1 Navegando na pagina Navegue na página e clique Sign In, logo em seguida faça o login com usuário e senha da conta do gmail: 4.2 Clique em criar um projeto: 18

hl=pt-br e realizar os seguintes passos: 4.1 Navegando na pagina https://developers.google.com/?

19 4.3 Defina um nome para seu projeto: 4.4 Ativando a API de Autenticação: Escolha o projeto que deseja ativar a API de autenticação, logo me seguida clique na opção a esquerda do seu monitor APIs e autenticação -> APIs->Google+ API e ativar a API 4.5 Adicionando as credenciais: Após ativar a API clique em Credenciais que está localizado a esquerda do monitor e logo em seguida Adicionar Credenciais e escolha a opção ID do cliente Oauth2. 19

clique na opção a esquerda do seu monitor APIs e autenticação -> APIs->Google+ API e ativar a API 4.

20 4.6 Criando o ID do cliente e a chave secreta: Clique Configurar tela de Consentimento, e preencha o nome do aplicativo a Url da página (Opcional), a logo (Opcional), Url de política de privacidade (Opcional) e a Url dos termos de serviço (Opcional) e clique em salvar. 20

21 4.7 Escolhendo o tipo de Aplicação: Escolha o tipo de aplicação (Aplicativo WEB) depois defina o nome e a url ( de redirecionamento que deverá ser a mesma que adicionará no Packet Fence. Clique em criar copie Id do cliente e a chave secreta. 21

22 4.8 Escolha Source do Google: Siga o passo 2.13 desse how to 4.9 Configurando o source do Google: Coloque um nome, uma descrição, o ID e o segredo secreto do cliente que foi copiado no passo 4.7 desse how to e adicione nos respectivos campos e no campo Portal URL adicione exatamente a mesma Url de redirecionamento que colocou no passo 4.7 ( ) clique em salvar. Posteriormente siga o passo

23 Para criar um aplicativo deverá possuir uma conta ou criar uma nova. Tendo uma conta Linkedin basta entrar no seguinte site e realizar os seguintes passos: 5.1 Navegando na pagina Clique na opção My Apps: 5.2 Efetue a autenticação com uma conta do Linkedin: 5.3 Criando o aplicativo: Clique no botão Criar Aplicativo e logo em seguida preencher o nome da empresa, o nome do aplicativo, a descrição do aplicativo a Url da logomarca (deverá estar na WEB usando HTTPS),o uso do aplicativo, URL do site da empresa, comercial e o numero do telefone comercial. 23

5.4 Adicionando a URL de redirecionamento e copiando o ID e o Segredo do Cliente: A URL de redirecionamento https://<hostname>/oauth2/linkedin deverá ser igual a que estiver na

24 5.4 Adicionando a URL de redirecionamento e copiando o ID e o Segredo do Cliente: A URL de redirecionamento deverá ser igual a que estiver na configuração do Packet Fence e copie o ID e o Segredo do cliente. Outro detalhe importante é marcar a opção r_ address para que a autenticação do Linkedin funcione com o Packet Fence. 24

25 5.5 Escolha Source do Linkedin: Siga o passo Configurando o source do Linkedin: Coloque um nome, uma descrição, o ID e o segredo secreto do cliente que foi copiado no passo 5.4 desse how to e adicione nos respectivos campos e no campo Portal URL adicione exatamente a mesma Url de redirecionamento que colocou no passo 5.4 ( clique em salvar. Posteriormente siga o passo

Documentos relacionados

Pessoal, abaixo fiz um passo-a-passo de como configurar o DVR para acessar a internet, neste caso utilizei os seguintes itens:

Pessoal, abaixo fiz um passo-a-passo de como configurar o DVR para acessar a internet, neste caso utilizei os seguintes itens: - Modem T580 v2. - DVR Penttaxy 8 canais - 5 metros de cabo UTP pra ligar