ASP .NET - Gerando QRCode com a API do Google

Hoje eu vou mostrar como podemos gerar QRCode usando a API do Google de forma bem simples.

A API do Google Chart Tools, também conhecida como Chart API, faz parte do projeto Google Visualization que engloba a ferramenta Interactive Charts. Sua principal vantagem é a simplicidade, já que tudo o que você precisa fazer para usá-la é uma chamada para sua URL enviando os dados do gráfico via query string. A chamada retornará a imagem do gráfico.

Neste artigo eu vou mostrar como podemos gerar QRCode usando os recursos da Chart API do Google.

A API é possui três especificações principais:

cht=qr
chl=<texto do código>
choe=<tipo de output encoding>

cht é o tipo de gráfico a utilizar, que neste caso será o QRCode;
O texto do código é o texto que vamos incluir no código gerado;
O tipo de encoding será o UTF pretendido, Shift_JIS, UTF-8, ou ISO-8859-1 (valor opcional);

Também podemos colocar as dimensões da imagem gerada no código com a especificação chs.

O url deverá ficar da seguinte forma: http://chart.apis.google.com/chart?cht=qr&chl=http://www.macortti.net&chs=120x120

Se digitar este endereço no seu navegador deverá visualizar o QRCode gerado:

Recursos usados:

Criando o projeto no Visual Studio 2013 Express for web

Abra o VS Express 2013 for web e clique em New Web Site;

A seguir selecione a linguagem Visual C# e o template ASP .NET Web Application;

Informe o nome QRCode_GoogleAPI e clique no botão OK;

No menu WEBSITE clique em Add New Item;

Selecione o template Web Form e informe o nome Default.aspx e clique no botão Add;

A seguir, a partir da ToolBox, inclua um controle Button com ID=btnGerarQRCode e um TextBox com ID=txtTexto a partir da Toolbox na página Default.aspx;

Informe um texto acima da caixa de texto e disponha os controles conforme o leiaute da figura abaixo:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2>Macoratti.net</h2>
    <hr />
        Informe um link ou texto<br />
    <asp:TextBox ID="txtTexto" runat="server" name="site" value="www." Width="200px"></asp:TextBox>
    <p/>
    <asp:Button ID="btnGerarQRcode" runat="server" Text="Gerar QRCode" Width="145px" />
    </div>
    </form>
</body>
</html>

Agora no arquivo code-behind Default.aspx.vb inclua o código abaixo no evento Click do botão de comando Gerar QRCode:

    Protected Sub btnGerarQRcode_Click(sender As Object, e As EventArgs) Handles btnGerarQRcode.Click
        Dim url As String
        url = "QrCode.aspx?texto=" + txtTexto.Text
        Response.Redirect(url)
    End Sub

Este código redireciona o usuário para a página QrCode.aspx passando uma querystring com o nome texto com o conteúdo do texto informando na caixa de texto txtTexto do formulário Default.aspx;

Vamos então incluir a página QrCode.aspx no projeto.

No menu WEBSITE clique em Add New Item;

Selecione o template Web Form e informe o nome QrCode.aspx e clique no botão Add;

A seguir abra esta página no modo Source e defina o código abaixo:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="QrCode.aspx.vb" Inherits="QrCode" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="refresh" content="5; url=http://chart.apis.google.com/chart?cht=qr&chl=http://<%= Request.QueryString("texto") %>&chs=120x120"/>
    <title>QR Code em ASP .NET Utilizando Google API</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         Aguarde ................
    </div>
    </form>
</body>
</html>

Agora executando o projeto teremos a página Default.aspx apresentada.

Digitando um texto na caixa de texto e clicando no botão de comando - Gerar QRCode , após alguns segundos teremos a geração do QRCode conforme a figura a seguir: