Flutter web event listener on other windows

user_9007867 0
Viewed 174

I have a flutter web application, Im trying to implement Okta oauth2 but whenever I call the url that I manage to create with some params using DIO package I end up with having html response instead of the actual response.

The endpoint I'm calling looks like this:

https://dev-xxxxxxxx.okta.com/oauth2/default/v1/authorize?response_type=code&scope=openid+profile+offline_access&client_id=xxxxxxxxxxxxxxxxxxxx&redirect_uri=http://localhost:8080/authorization-code/callback&code_challenge_method=S256&code_challenge=Wag0u2fyeYWJHy_baK-XbMWO9H2xwUBii7R4Nvj761Y&sessionToken=20111jWBb2P2BoPIL-Atd0pk5QDImstT7EmYULPFMg2GoCGPgOrxKFl&state=X7hih1mUow&nonce=lSfF1CxmmR

Whenever I call this url it shall be redirected to another url such as:

http://localhost:8080/authorization-code/callback?code=TCifQEab0a6HwEGeWQXlDQhPm22RlyemvO5GbipASEU&state=YLi4I2P4qd

So the main point using DIO is that its returning the response of the second url which is an html flutter content. It can be solved if DIO don't follow the redirection and give status code 302 but its not doing that.

Currently I'm trying different approach, I'm trying to open the url in a new window which immediately change to the second url.

My problem is how should I get the code from the second url and the cookies that the second url provide from the new opened window.

final html.WindowBase newWindow = html.window.open(url, "callback");

so at least how can I get the href from the newly opened window knowing that it changes after a while into the the flutter correct rout that I sat up.

Knowing that newWidnow.location.href is write only.

flutter-web dart flutter
2 Answers

Okay I managed to solve that, leaving the solution if anyone faced the same issue.

under your /web directory create an html file and call it for example callback.html.

then paste this code inside it.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Auth</title>
    <meta name="description"
        content="Simple, quick, standalone responsive placeholder without any additional resources">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <h2>Authentication Succeeded</h2>
    <h3>Close this window if it didn't close by itself.</h3>
</body>
<script>
    window.opener.postMessage(window.location.href, '*');
</script>

</html>

then set your Redirect URI as follows http://localhost:8080/callback.html

So in that case whenever you get the Redirect URI from oauth2 you get it as follows

http://localhost:8080/callback.html?code=TCifQEab0a6HwEGeWQXlDQhPm22RlyemvO5GbipASEU&state=YLi4I2P4qd

which will basically call the newly created html file callback.html.

In flutter side you'll need to do the following:

html.WindowBase popupWindow;

popupWindow = html.window.open(
  url,
  "Auth",
   "width=400, height=500, scrollbars=yes",
);

String? code;
html.window.onMessage.listen((event) {
  if (event.data.toString().contains('code=')) {
    code = event.data.toString().split('code=')[1].split('&')[0];
  }
});

await Future.delayed(const Duration(seconds: 2), () {
  popupWindow.close();
});

Which will basically open the window, then capture the url and extract it, then close the window.

I hope this helps.

user_90078670

Use assign on Location to redirect to the Authorize endpoint of the Authorization Server.

window.location.assign('https://${yourOktaDomain}/oauth2/default/v1/authorize?...');
user_183092900
Related