Partilhar via

Fazer logon usando sites externos em um site de Páginas da Web do ASP.NET (Razor)

  • Artigo

por Tom FitzMacken

Este artigo explica como fazer logon em seu site de Páginas da Web do ASP.NET (Razor) usando Facebook, Google, Twitter, Yahoo e outros sites, ou seja, como dar suporte ao OAuth e ao OpenID em seu site.

O que você aprenderá:

  • Como habilitar o logon de outros sites ao usar o modelo site inicial do WebMatrix.

Este é o recurso ASP.NET introduzido no artigo:

  • O OAuthWebSecurity auxiliar.

Versões de software usadas no tutorial

  • Páginas da Web do ASP.NET (Razor) 2
  • WebMatrix 3

Páginas da Web do ASP.NET inclui suporte para provedores OAuth e OpenID. Usando esses provedores, você pode permitir que os usuários façam logon em seu site usando suas credenciais existentes do Facebook, Twitter, Microsoft e Google. Por exemplo, para fazer logon usando uma conta do Facebook, os usuários podem simplesmente escolher um ícone do Facebook, que os redireciona para a página de logon do Facebook em que inserem suas informações de usuário. Em seguida, eles podem associar o logon do Facebook à sua conta em seu site. Um aprimoramento relacionado aos recursos de associação de Páginas da Web é que os usuários podem associar vários logons (incluindo logons de sites de redes sociais) a uma única conta em seu site.

Esta imagem mostra a página Logon do modelo Site Inicial , em que um usuário pode escolher um ícone do Facebook, Twitter, Google ou Microsoft para habilitar o logon com uma conta externa:

provedores externos

Você pode habilitar a associação OAuth e OpenID descompactando algumas linhas de código no modelo site inicial. Os métodos e as propriedades que você usa para trabalhar com os provedores OAuth e OpenID estão na WebMatrix.Security.OAuthWebSecurity classe . O modelo site inicial inclui uma infraestrutura de associação completa, completa com uma página de logon, um banco de dados de associação e todo o código necessário para permitir que os usuários façam logon em seu site usando credenciais locais ou aquelas de outro site.

Esta seção fornece um exemplo de como permitir que os usuários façam logon de sites externos para um site baseado no modelo site inicial . Depois de criar um site inicial, você faz isso (detalhes a seguir):

  • Para os sites que usam um provedor OAuth (Facebook, Twitter e Microsoft), você cria um aplicativo no site externo. Isso fornece as chaves de aplicativo necessárias para invocar o recurso de logon desses sites.

  • Para sites que usam um provedor OpenID (Google), você não precisa criar um aplicativo. Para todos esses sites, você deve ter uma conta para fazer logon e criar aplicativos de desenvolvedor.

    Observação

    Os aplicativos da Microsoft aceitam apenas uma URL dinâmica para um site funcional, portanto, você não pode usar uma URL de site local para testar logons.

  • Edite alguns arquivos em seu site para especificar o provedor de autenticação apropriado e enviar um logon para o site que você deseja usar.

Este artigo fornece instruções separadas para as seguintes tarefas:

Habilitando logons do Google

  1. Crie ou abra um site de Páginas da Web do ASP.NET baseado no modelo site do WebMatrix Starter.

  2. Abra a página _AppStart.cshtml e remova o comentário da linha de código a seguir.

    OAuthWebSecurity.RegisterGoogleClient();

Testando o logon do Google

  1. Execute a página default.cshtml do seu site e escolha o botão Fazer logon .

  2. Na página Logon , na seção Usar outro serviço para fazer logon , escolha o botão Enviar do Google ou do Yahoo . Este exemplo usa o logon do Google.

    A página da Web redireciona a solicitação para a página de logon do Google.

    Entrar no Google

  3. Insira credenciais para uma conta existente do Google.

  4. Se o Google perguntar se você deseja permitir que o Localhost use informações da conta, clique em Permitir.

    O código usa o token do Google para autenticar o usuário e retorna para esta página em seu site. Esta página permite que os usuários associem o logon do Google a uma conta existente em seu site ou possam registrar uma nova conta em seu site para associar o logon externo.

    Captura de tela que mostra a página de registro.

  5. Escolha o botão Associar . O navegador retorna à home page do aplicativo.

Habilitando logons do Facebook

  1. Acesse o site de desenvolvedores do Facebook (faça logon se você ainda não estiver conectado).

  2. Escolha o botão Criar Novo Aplicativo e siga os prompts para nomear e criar o novo aplicativo.

  3. Na seção Selecionar como seu aplicativo se integrará ao Facebook, escolha a seção Site .

  4. Preencha o campo URL do Site com a URL do seu site (por exemplo, http://www.example.com). O campo Domínio é opcional; você pode usar isso para fornecer autenticação para um domínio inteiro (como example.com).

    Observação

    Se você estiver executando um site em seu computador local com uma URL como http://localhost:12345 (em que o número é um número de porta local), você pode adicionar esse valor ao campo URL do Site para testar seu site. No entanto, sempre que o número da porta do site local for alterado, você precisará atualizar o campo URL do Site do aplicativo.

  5. Escolha o botão Salvar Alterações .

  6. Escolha a guia Aplicativos novamente e exiba a página inicial do aplicativo.

  7. Copie a ID do aplicativo e os valores do Segredo do Aplicativo para seu aplicativo e cole-os em um arquivo de texto temporário. Você passará esses valores para o provedor do Facebook no código do site.

  8. Saia do site do desenvolvedor do Facebook.

Agora você faz alterações em duas páginas em seu site para que os usuários possam fazer logon no site usando suas contas do Facebook.

  1. Crie ou abra um site de Páginas da Web do ASP.NET baseado no modelo site do WebMatrix Starter.

  2. Abra a página _AppStart.cshtml e remova o comentário do código para o provedor OAuth do Facebook. O bloco de código não compactado se parece com o seguinte:

    OAuthWebSecurity.RegisterFacebookClient(
        appId: "",
        appSecret: "");

  3. Copie o valor da ID do aplicativo do Facebook como o valor do appId parâmetro (dentro das aspas).

  4. Copie o valor do Segredo do Aplicativo do aplicativo facebook como o valor do appSecret parâmetro.

  5. Salve e feche o arquivo.

Testando o logon do Facebook

  1. Execute a página default.cshtml do site e escolha o botão Logon .

  2. Na página Logon , na seção Usar outro serviço para fazer logon , escolha o ícone do Facebook .

    A página da Web redireciona a solicitação para a página de logon do Facebook.

    oauth-2

  3. Faça logon em uma conta do Facebook.

    O código usa o token do Facebook para autenticar você e retorna a uma página em que você pode associar seu logon do Facebook ao logon do seu site. Seu nome de usuário ou endereço de email é preenchido no campo Email no formulário.

    Captura de tela que mostra a página Registrar uma Conta.

  4. Escolha o botão Associar .

    O navegador retorna à home page e você está conectado.

Habilitando logons do Twitter

  1. Navegue até o site de desenvolvedores do Twitter.

  2. Escolha o link Criar um Aplicativo e faça logon no site.

  3. No formulário Criar um Aplicativo , preencha os campos Nome e Descrição .

  4. No campo WebSite, insira a URL do seu site (por exemplo, http://www.example.com).

    Observação

    Se você estiver testando seu site localmente (usando uma URL como http://localhost:12345), o Twitter poderá não aceitar a URL. No entanto, talvez você possa usar o endereço IP de loopback local (por exemplo http://127.0.0.1:12345). Isso simplifica o processo de testar seu aplicativo localmente. No entanto, sempre que o número da porta do site local for alterado, você precisará atualizar o campo WebSite do aplicativo.

  5. No campo URL de Retorno de Chamada , insira uma URL para a página em seu site para a qual você deseja que os usuários retornem depois de fazer logon no Twitter. Por exemplo, para enviar usuários para a home page do Site Inicial (que reconhecerá seus status conectados), insira a mesma URL que você inseriu no campo WebSite.

  6. Aceite os termos e escolha o botão Criar seu aplicativo do Twitter .

  7. Na página de aterrissagem Meus Aplicativos , escolha o aplicativo que você criou.

  8. Na guia Detalhes , role até a parte inferior e escolha o botão Criar Meu Token de Acesso .

  9. Na guia Detalhes , copie os valores Chave do Consumidor e Segredo do Consumidor para seu aplicativo e cole-os em um arquivo de texto temporário. Você passará esses valores para o provedor do Twitter no código do site.

  10. Saia do site do Twitter.

Agora você faz alterações em duas páginas em seu site para que os usuários possam fazer logon no site usando suas contas do Twitter.

  1. Crie ou abra um site de Páginas da Web do ASP.NET baseado no modelo site do WebMatrix Starter.

  2. Abra a página _AppStart.cshtml e remova o comentário do código para o provedor OAuth do Twitter. O bloco de código não compactado tem esta aparência:

    OAuthWebSecurity.RegisterTwitterClient(
        consumerKey: "",
        consumerSecret: "");

  3. Copie o valor da Chave do Consumidor do aplicativo Twitter como o valor do consumerKey parâmetro (dentro das aspas).

  4. Copie o valor segredo do consumidor do aplicativo Twitter como o valor do consumerSecret parâmetro .

  5. Salve e feche o arquivo.

Testando o logon do Twitter

  1. Execute a página default.cshtml do seu site e escolha o botão Logon .

  2. Na página Logon , na seção Usar outro serviço para fazer logon , escolha o ícone do Twitter .

    A página da Web redireciona a solicitação para uma página de logon do Twitter para o aplicativo que você criou.

    oauth-4

  3. Faça logon em uma conta do Twitter.

  4. O código usa o token do Twitter para autenticar o usuário e, em seguida, retorna você para uma página em que você pode associar seu logon à sua conta do site. Seu nome ou endereço de email é preenchido no campo Email no formulário.

    Captura de tela que mostra uma página de registro de conta.

  5. Escolha o botão Associar .

    O navegador retorna à home page e você está conectado.

Recursos adicionais