Flutter: Oauth2 - Problems with redirect uri

user_11406890 0
Viewed 10655

I want to set up the oAuth authentication of the Spotify API in my Flutter app. I chose the flutter_web_auth 0.1.1 package. So far, I have managed that the user can log in to Spotify. After logging in, the user should be redirected back to my app. That does not work. Spotify always redirects the user to another website and not back to the app. How do I close the WebView after the user logging in and redirect the user to my app?

import 'package:flutter/material.dart';
import 'package:flutter_web_auth/flutter_web_auth.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    authenticate();
  }

  void authenticate() async {
    // Present the dialog to the user
    final result = await FlutterWebAuth.authenticate(
      url:
          "https://accounts.spotify.com/de/authorize?client_id=78ca499b2577406ba7c364d1682b4a6c&response_type=code&redirect_uri=https://partyai/callback&scope=user-read-private%20user-read-email&state=34fFs29kd09",
      callbackUrlScheme: "https://partyai/callback",
    );

// Extract token from resulting url
    final token = Uri.parse(result).queryParameters['token'];
    print('token');
    print(token);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Web Auth example'),
        ),
        body: Center(
          child: Text(
            'test',
          ),
        ),
      ),
    );
  }
}

android/app/src/main/AndroidManifest.xml

<activity android:name="com.linusu.flutter_web_auth.CallbackActivity" >
            <intent-filter android:label="flutter_web_auth">
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="https://partyai/callback" />
            </intent-filter>
        </activity>

enter image description here

flutter oauth-2.0 spotify oauth
3 Answers

The callbackUrlScheme should be partyai, the redirect_uri should be partyai:/ and the AndroidManifest.xml android:scheme value should be partyai.

user_35001180

Use this code

void authenticate() async {
  // Present the dialog to the user
  final result = await FlutterWebAuth.authenticate(
    url:
        "https://accounts.spotify.com/authorize?client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx&redirect_uri=yourname:/&scope=user-read-currently-playing&response_type=token&state=123",
    callbackUrlScheme: "yourname",
  );

// Extract token from resulting url
  final token = Uri.parse(result);
  String at = token.fragment;
  at = "http://website/index.html?$at"; // Just for easy persing
  var accesstoken = Uri.parse(at).queryParameters['access_token'];
  print('token');
  print(accesstoken);
}

Add to AndroidManifest.xml android\app\src\main 

                 ...
        </activity>
        <activity android:name="com.linusu.flutter_web_auth.CallbackActivity" >
            <intent-filter android:label="flutter_web_auth">
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="yourname" />
            </intent-filter>
            </activity>
    </application>
</manifest>
user_99603770

I am also facing issue with navigating back to app from authentication page in flutter am using flutter_web_auth plugin.

As per my understanding every thing working fine but it is not navigating back to flutter application.

Question: what is the .CallbackActivity in the below code

 <activity android:name="com.linusu.flutter_web_auth.CallbackActivity" >
        <intent-filter android:label="flutter_web_auth">
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="yourname" />
        </intent-filter>
        </activity>
user_145202930
Related