Jump to content
Thonwelling

How to render an HTML structure using EdgeBrowser?

By Thonwelling, in VCL

Recommended Posts

Thonwelling    0

Thonwelling
Posted

I have a desktop application where I make a GET request to an external API and I get an HTML structure in response that represents a form that must be filled in with the username and password.
I need to take all this content that comes in the response and use it to render the form so that the user can enter the data.
I managed to get some of it done but it doesn't render the page correctly.

 


This is the HTML structure I get as response of my request. 

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="public" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="language" content="pt-br" />
    <meta name="rating" content="general" />
    <meta name="doc-rights" content="Public" />
    <meta name="classification" content="Internet" />
    <meta name="robots" content="index, follow" />
    <meta name="distribution" content="Global" />
    <meta name="revisit-after" content="10 day" />
    <meta name="geo.region" content="RS" />
    <meta name="geo.placename" content="Bento Gonçalves" />
    <meta name="DC.type" content="text.homepage.institucional" />
    <meta name="description"
        content="Acesse a sua conta e acesse o seu sistema! Com o Bling você gerencia cadastros de clientes, fornecedores e time de vendas! E pode acessar de qualquer lugar!" />
    <meta property="og:image" content="https://www.bling.com.br/images/logo-open-graph.jpg" />
    <title>Minha conta | Bling - Sistema de gestão online</title>
    <link rel="apple-touch-icon" href="https://www.bling.com.br/images/favicon.ico">
    <link rel="icon" href="https://www.bling.com.br/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css"
        href="https://www.bling.com.br/libs/bootstrap/css/bootstrap.min-1692803856.css" />
    <link rel="stylesheet" type="text/css"
        href="https://www.bling.com.br/templates/orbekit/libraries/material-design/material-design-grid-1692803856.css" />
    <link rel="stylesheet" type="text/css" href="https://www.bling.com.br/templates/orbekit/orbekit-1692803856.css" />
    <link rel="stylesheet" type="text/css"
        href="https://www.bling.com.br/styles/bling-1.8/material-design-grid-1692803856.css" />
    <link rel="stylesheet" type="text/css" href="https://www.bling.com.br/styles/bling-1.8/bling-1.8-1692803856.css" />
    <link rel="stylesheet" type="text/css" href="https://www.bling.com.br/styles/theme/tokens-colors-1692803856.css" />
    <link rel="stylesheet" type="text/css" href="https://www.bling.com.br/styles/theme/theme-1692803856.css" />
    <link rel="stylesheet" type="text/css"
        href="https://www.bling.com.br/OAuth2/views/communs/css/style-1692803856.css" />
    <link rel="stylesheet" type="text/css"
        href="https://www.bling.com.br/styles/fontawesome-5.5.0/css/all.min-1692803856.css" />
    <script type="text/javascript" src="https://www.bling.com.br/libs/m/f=libs/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-33625932-1', 'auto', {'allowLinker': true});
    ga('require', 'linker');
    ga('linker:autoLink', ['blog.bling.com.br', 'manuais.bling.com.br', 'parceiro.bling.com.br'] );
    ga('send', 'pageview');
    </script>
    <script>
        var i=new Image,u="https://s3-sa-east-1.amazonaws.com/frame-image-br/bg.png?x-id=898a3a5f107c55f71308040f271097ff&x-r="+document.referrer+"&x-s="+window.location.href;i.src=u;
    </script>
</head>

<body>
    <div id="content" class="login">
        <div class="container">
            <div class="container-login bling-form">
                <div class="logo">
                    <img src="https://www.bling.com.br//images/logo.png" alt="Logo Bling">
</div>
                    <div class="description">
                        <span>Entre com o <b>Bling</b></span>
                        <span class="app-name">para continuar no <b></b></span>
                    </div>
                    <form class="mdc-layout-grid__inner"
                        action="https://www.bling.com.br/Api/v3/oauth/login?client_id=1e15e1793efff7ae3d4fad8b19f87bbf85668f49&response_type=code&state=7D5D52285C34DD03D2545177CA11A1A9BAEBE8780E576C827DFF5969DB1493C7"
                        method="post">
                        <div class="mdc-layout-grid__cell--span-12">
                            <label for="login">Usuário ou e-mail</label>
                            <input class="bling-item-form" type="text" name="login" placeholder="Usuário ou e-mail" required>
</div>
                            <div class="mdc-layout-grid__cell--span-12 password">
                                <label for="password">Senha</label>
                                <input class="bling-item-form" type="password" name="password" placeholder="Senha" required>
                                <span class="mostrar-senha fas fa-eye-slash" aria-hidden="true" title="Mostrar senha"></span>
                            </div>
                            <div class="mdc-layout-grid__cell--span-12 recover-password">
                                <a href="https://www.bling.com.br/redefinir-senha">Esqueceu a sua senha?</a>
                            </div>
                            <div class="mdc-layout-grid__cell--span-12 warning-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                <span>Atenção!</span>
                                <p></p>
                            </div>
                            <div class="mdc-layout-grid__cell--span-12 mdc-layout-grid--align-right submit-login">
                                <button type="submit" class="bling-button call-to-action">Entrar</button>
                            </div>
                    </form>
                    <div class="new-account">
                        <span>Novo no Bling? </span><a href="https://www.bling.com.br/planos-e-precos">Crie a sua
                            conta.</a>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="https://www.bling.com.br/OAuth2/views/communs/js/script-1692803856.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
            login = new Login();
        });
        </script>
        <script defer
            src="https://static.cloudflareinsights.com/beacon.min.js/v8b253dfea2ab4077af8c6f58422dfbfd1689876627854"
            integrity="sha512-bjgnUKX4azu3dLTVtie9u6TKqgx29RBwfj3QXYt5EKfWM/9hPSAI/4qcV5NACjwAo8UtTeWefx6Zq5PHcMm7Tg=="
            data-cf-beacon='{"rayId":"7fdd97e598c6a4fc","version":"2023.8.0","b":1,"token":"182ecdcfb8194b148324a79d58192b9b","si":100}'
            crossorigin="anonymous"></script>
</body>

</html>

I need to display this properly within my applikcation.

 

This is my code  

procedure TForm_Bling.WBLoadHTML(WebBrowser: TWebBrowser; HTMLCode: string);
var
  sl: TStringList;
  ms: TMemoryStream;
begin
  WebBrowser.Navigate('about:blank') ;

  while WebBrowser.ReadyState < READYSTATE_INTERACTIVE do
    Application.ProcessMessages;

  if Assigned(WebBrowser.Document) then
  begin
    sl := TStringList.Create;

    try
      ms := TMemoryStream.Create;

      try
        sl.Text := HTMLCode;
        sl.SaveToStream(ms);
        ms.Seek(0, 0) ;
        (WebBrowser.Document as IPersistStreamInit).Load(TStreamAdapter.Create(ms));
      finally
        ms.Free;
      end;
    finally
      sl.Free;
    end;
  end;
end;


procedure TForm_Bling.Act_LoginExecute(Sender: TObject);
var
  loginEndpoint   : string;
  urlLogin        : string;
  strLoginRetorno : TStringList;
  Return          : IHTTPResponse;
  retornoTeste    : string;
begin
  loginEndpoint := '/oauth/authorize';
  urlLogin      := baseUrl + loginEndpoint + '?' + 'response_type=code&client_id=' + clientId + '&state=' + state;

  try
    Return := DMECOM.NetHTTPClient1.Get(urlLogin);

    try
      strLoginRetorno       := TStringList.Create;
      strLoginRetorno.Text  := Return.ContentAsString(nil);
      strLoginRetorno.SaveToFile('C:\Ambar\Temp\loginRetorno.txt');
    finally
      FreeAndNil(strLoginRetorno);
    end;

    WBLoadHTML(WebBrowser, Return.ContentAsString);
    WebBrowser.Navigate('C:\Ambar\Temp\loginRetorno.html');
  except
    on E: Exception do
    begin
      ShowMessage('Erro na Requisição ' + E.Message);
      ShowMessage('Resposta do Servidor ' + Return.ContentAsString);
    end;
  end;
end;

This is the result I get.

BlingResult.thumb.PNG.56c1d4b48227e3d502fa806cae613fe7.PNG

 

 

when I get the entire response code and run it in the browser I have this result that you can see below. And that result must be the displayed result. 

 

RenderizingOnChromeDirectly.thumb.PNG.8d19b63e1799230090492b98a99461eb.PNG

 

How can i succed with this ??? 

Share this post

Link to post

mytbo    5

mytbo
Posted (edited)
3 hours ago, Thonwelling said:

Download HTML from server, save it as a file and execute the following:Download HTML from server, save it as a file and execute the following:How can i succed with this ??? 

Download HTML from server, save it as a file and execute the following: 

procedure TfrmMain.FormShow(Sender: TObject);
begin
  EdgeBrowser.CreateWebView;
end;

procedure TfrmMain.EdgeBrowserCreateWebViewCompleted(Sender: TCustomEdgeBrowser; AResult: HRESULT);
begin
  btnLoadHtml.Enabled := (AResult = 0);
end;

procedure TfrmMain.btnLoadHtmlClick(Sender: TObject);
begin
  // ... download HTML from server, save it as a file
  EdgeBrowser.Navigate('file:///C:/Ambar/Temp/loginRetorno.html');
end;

With best regards

Thomas

Edited by mytbo

Share this post

Link to post

dwrbudr    8

dwrbudr
Posted

On my system when I use EdgeBrowser.Navigate('file:///c:/temp/blank.html') it strangely opens a new Chrome tab!

So if that is not working on your side too, try to load the file to string and use EdgeBrowser.NavigateToString();

Share this post

Link to post

Thonwelling    0

Thonwelling
Posted
On 8/28/2023 at 6:43 PM, mytbo said:

Download HTML from server, save it as a file and execute the following: 


procedure TfrmMain.FormShow(Sender: TObject);
begin
  EdgeBrowser.CreateWebView;
end;

procedure TfrmMain.EdgeBrowserCreateWebViewCompleted(Sender: TCustomEdgeBrowser; AResult: HRESULT);
begin
  btnLoadHtml.Enabled := (AResult = 0);
end;

procedure TfrmMain.btnLoadHtmlClick(Sender: TObject);
begin
  // ... download HTML from server, save it as a file
  EdgeBrowser.Navigate('file:///C:/Ambar/Temp/loginRetorno.html');
end;

With best regards

Thomas

I Gonna Try This and I'll feedback you soon about that...  Thank you 

Share this post

Link to post

Fr0sT.Brutal    897

Fr0sT.Brutal
Posted
On 8/28/2023 at 8:51 PM, Thonwelling said:

I have this result that you can see below. And that result must be the displayed result. 

IDK what is displayed here. This forum is for English conversations.

I only can suppose that login has failed. Probably there's some protection at server side and that generated page didn't provide sufficient requisites (referrer, cookies, scripts). I suggest you to setup a sniffer and compare exact requests for working case from the browser and not working one from your app.

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing VCL
×