oauth2_client icon indicating copy to clipboard operation
oauth2_client copied to clipboard

Web version, helper doesn't launch login pages for Google and Facebook

Open kohlab opened this issue 2 years ago • 2 comments

Thanks so much for creating this package. I've got signups/logins for both Google and Facebook working now on iOS! (I haven't completed it for Android because I can't test it.)

On the web, however, the helper doesn't launch the Google/Facebook login pages. I'm not sure what I'm doing wrong.

Here's what I have for Google:

Future<String> getGoogleToken() async {

    var urlScheme = Platform.isIOS ? 'com.googleusercontent.apps.<the rest of my scheme>' : Platform.isAndroid ? 'com.ridehare.ridehare' : 'https';
    var urlRedirect = (Platform.isIOS || Platform.isAndroid) ? '$urlScheme:/oauth2redirect' : 'https://mydomain.com/flutter_google_connect';
    var clientId = Platform.isIOS ? '<the rest of my client ID>.apps.googleusercontent.com' : Platform.isAndroid ? '' : '<the rest of my client ID>.apps.googleusercontent.com';
    var clientSecret = Platform.isIOS ? '' : Platform.isAndroid ? '' : <my client secret>';

    // Instantiate an OAuth2Client
    GoogleOAuth2Client client = GoogleOAuth2Client(
      customUriScheme: urlScheme,
      // Must correspond to the AndroidManifest's "android:scheme" attribute
      redirectUri: urlRedirect, // Can be any URI, but the scheme part must correspond to the customUriScheme
    );

    // Then, instantiate the helper passing the previously instantiated client
    OAuth2Helper oauth2Helper = OAuth2Helper(client,
        grantType: OAuth2Helper.AUTHORIZATION_CODE,
        clientId: clientId,
        clientSecret: clientSecret,
        scopes: ['email', 'profile']);
    var resp = await oauth2Helper.getToken();
    var token = resp?.accessToken;
    if (token == null) {
      throw Exception("Couldn't sign in via Google");
    }
    return token;
  }

And this is what I have for Facebook:

  Future<String> getFacebookToken() async {

    var urlScheme = (Platform.isIOS || Platform.isAndroid) ? 'fbconnect' : 'https';
    var urlRedirect = (Platform.isIOS || Platform.isAndroid) ? '$urlScheme://cct.my_application_package' : 'https://mydomain.com/flutter_facebook_connect';
    var urlRedirect = '$urlScheme://cct.my_application_package';
    var clientId = '<my client ID>';
    var clientSecret = '<my client secret>';

    // Instantiate an OAuth2Client
    FacebookOAuth2Client client = FacebookOAuth2Client(
      customUriScheme: urlScheme,
      // Must correspond to the AndroidManifest's "android:scheme" attribute
      redirectUri: urlRedirect, // Can be any URI, but the scheme part must correspond to the customeUriScheme
    );

    // Then, instantiate the helper passing the previously instantiated client
    OAuth2Helper oauth2Helper = OAuth2Helper(client,
        grantType: OAuth2Helper.AUTHORIZATION_CODE,
        clientId: clientId,
        clientSecret: clientSecret,
        scopes: ['email', 'public_profile']);
    var resp = await oauth2Helper.getToken();
    var token = resp?.accessToken;
    if (token == null) {
      throw Exception("Couldn't sign in via Facebook");
    }
    return token;
  }

As you can maybe see, I'm quite lost. From the docs I see I need to use "https" as the URL scheme and to field the code via Javascript in a redirect page. That's what the https://mydomain.com/flutter_google_connect and https://mydomain.com/flutter_facebook_connect pages are for. I hope to get that far, but the login pages aren't even launching.

Interestingly, in the Facebook case if I use the same URLscheme ("fbconnect") and URLredirect ("fbconnect://cct.my_application_package) as I do in iOS, then the login page launches. But after logging in it doesn't redirect, since "fbconnect:" isn't recognized by macOS of course.

What should I do to get it working on the web as it is on iOS?

kohlab avatar Feb 13 '22 10:02 kohlab

Update: I discovered that Platform isn't supported on the web platform, ironically, so I changed the lines in getGoogleToken() to:

    var urlScheme = kIsWeb ? 'https' : Platform.isIOS ? 'com.googleusercontent.apps.<the rest of my scheme>' : 'com.ridehare.ridehare';
    var urlRedirect = kIsWeb ? 'https://mydomain.com/flutter_google_connect' : '$urlScheme:/oauth2redirect';
    var clientId = kIsWeb ? '<the rest of my client ID>.apps.googleusercontent.com' : Platform.isIOS ? '<the rest of my client ID>.apps.googleusercontent.com' : '';
    var clientSecret = kIsWeb ? '<my client secret>' : '';

And likewise. with getFacebookToken().

At least now the login windows pop up. Neither does what it should, but it's progress...

kohlab avatar Feb 13 '22 15:02 kohlab

Hi @kohlab, so now the login window opens up but it doesn't redirect after you submit the form?

okrad avatar Feb 21 '22 20:02 okrad