chyiiiiiiiiiiii / flutter_web_twitch_auth Goto Github PK

View Code? Open in Web Editor NEW

Example to illustrate how to implement an OAuth2 authentication flow in Flutter Web.

Objective-C 0.57% Kotlin 2.02% Dart 62.10% Swift 6.08% HTML 29.23%

flutter_web_twitch_auth's Introduction

flutter_web_twitch_auth

Note

My version of flutter_web_twitch_auth repo with small update.

A Flutter Web project to illustrate OAuth2 authentication flow using Twitch's API.

The project on this branch is using an external popup window to manage the login with Twitch.

Getting Started

To grab the response code in the callback URL I've added a static.html page in the web/ folder. Its purpose is to send a message containing the URL with the access token to the parent window which would be the initial window of the Flutter application.

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

<head>
    <meta charset="utf-8">
    <title>Connexion Succeeded</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>
</body>
<script>
    window.opener.postMessage(window.location.href, '*');
</script>

</html>

As for the Flutter code I've added a listener for incoming message to trigger the login when received a correct response.

// Listen to message send with `postMessage`.
html.window.onMessage.listen((event) {
  // The event contains the token which means the user is connected.
  if (event.data.toString().contains('access_token=')) {
    _login(event.data);
  }
});

Also opening the login page in an external window and using our static.html page as the redirect_uri.

// Open the Twitch authentication page.
WidgetsBinding.instance.addPostFrameCallback((_) {
  final currentUri = Uri.base;
  final redirectUri = Uri(
    host: currentUri.host,
    scheme: currentUri.scheme,
    port: currentUri.port,
    path: '/static.html',
  );
  final authUrl =
    'https://id.twitch.tv/oauth2/authorize?response_type=token&client_id=$clientId&redirect_uri=$redirectUri&scope=viewing_activity_read';

  // Keeping a reference to the popup window so you can close it after login is completed
  _popupWin = html.window.open(
    authUrl, "Twitch Auth", "width=800, height=900, scrollbars=yes");
});

Recommend Projects