![Delphi-PRAXiS [en]](https://en.delphipraxis.net/uploads/monthly_2018_12/logo.png.be76d93fcd709295cb24de51900e5888.png){kind=logo}
Thonwelling
-
Content Count
2 -
Joined
-
Last visited
-
How to render an HTML structure using EdgeBrowser?
Thonwelling replied to Thonwelling's topic in VCL
I Gonna Try This and I'll feedback you soon about that... Thank you -
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. 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. How can i succed with this ???