Article: How to login and consume backend API using Flutter

[myomyinthan]

It will be very nice to have this step by step tutorial.

Thanks

[Znow]

@myomyinthan

I can provide an example - which we made in a Flutter app

Edit: I'm working on a article at this moment, hope it can come out one of the next days.

It's a draft work in progress accessible here: https://github.com/Znow/znow.github.io/blob/master/_posts/2021-04-23-consume-abp-api-from-flutter-app.md

I will submit a ABP.io article request when I finish it one of the next days

[RobersonLuo]

@Znow Did you finished your article about login and logout using Flutter?

[Znow]

@RobersonLuo working on getting it done by today :-)

[volethanh]

Hi @Znow, do you use authorization code flow to authen ? Can you provide the way to use password flow ? And call the backend api by using the returned token.

[tvddev]

Would this also work in the same way for a Xamarin Forms or Blazor PWA app?

[Znow]

Would this also work in the same way for a Xamarin Forms or Blazor PWA app?

There is already a guide on how to do it with Xamarin here: https://community.abp.io/articles/abp-framework-api-consumed-by-xamarin.forms-application-rkdfzz66

[Znow]

Hi @Znow, do you use authorization code flow to authen ? Can you provide the way to use password flow ? And call the backend api by using the returned token.

Yes it is with authorization code flow. No sorry, that one you have look up yourself :-)

[RobersonLuo]

@RobersonLuo working on getting it done by today :-) where to see you article? could you make a link?

[Znow]

@RobersonLuo working on getting it done by today :-) where to see you article? could you make a link?

The article have been submitted to abp.io, they will review it and hopefully soon publish it.

It's a quick how-to guide, as I've have alot on my plate these days.

When the article is published, please send me a message or email if anything needs changes, and I will try to help out.

Thanks

[Znow]

@RobersonLuo working on getting it done by today :-) where to see you article? could you make a link?

https://community.abp.io/articles/Consume%20ABP%20API%20from%20Flutter%20App-adzzfnji

[vineethvijayan314]

@Znow is there a working example for flutter?

[Znow]

@vineethvijayan314 I will look at it when I can find time, perhaps today or the following days :-)

[vineethvijayan314]

Thanks @Znow I am facing this issue. Can't figure out where I messed up

[Znow]

@vineethvijayan314 Did you run your DbMigrator with the additions in IdentityServerDataSeedContributor.cs? :-)

Example repo upcoming in a moment

[vineethvijayan314]

@Znow Yes, those are deployed. Is HTTPS mandatory?

[Znow]

@vineethvijayan314 Yes due to android not accepting HTTP only.

https://github.com/Znow/ConsumeAbpFromFlutterApp is the example repo - will put it in the guide aswell. The repo has an error right now about android/java not finding the trust certificate anchor when consuming 10.0.2.2/localhost endpoint

[vineethvijayan314]

Thanks, @Znow. We will check it out.

I presume iOS also have a restriction on HTTPS. Our dev env's are not hosted in HTTPS. but It seems to work with Angular

[vineethvijayan314]

nope, I am definitely messing things up. Our API's are HTTPS. still the same error

[Znow]

@vineethvijayan314 Haven't experienced that error before to be honest. Are you able to browse swagger from the Chrome browser on the android emulator for instance?

[vineethvijayan314]

Yes, I tried from iOS simulator I am able to load swagger from the iOS simulator safari.

[vineethvijayan314]

@Znow we are able to make it work, we had to add the below AuthorizationServiceConfiguration as well along with your code.

final AuthorizationServiceConfiguration _serviceConfiguration =
    AuthorizationServiceConfiguration(
  'domain/account/login',
  'domain/connect/token',
);

final AuthorizationTokenResponse result =
          await appAuth.authorizeAndExchangeCode(
        AuthorizationTokenRequest(
          CLIENT_ID,
          REDIRECT_URI,
          clientSecret: CLIENT_SECRET,
          issuer: 'https://$DOMAIN',
          scopes: ["email", "openid", "profile", "role", "phone", "address"],
          promptValues: ['login'],
          serviceConfiguration: _serviceConfiguration,
        ),
      );

We are able to see the login screen and we can log in. But it's not redirecting back to the app. It's going to the swagger in the webview.

[Znow]

@vineethvijayan314 Then you might have some different setup that I dont know of.

Are you sure your client is setup correctly in your API? With the proper redirect_uri?

[vineethvijayan314]

@Znow yes, we gave the same com.exanple.com//callback. the same as in your example.

[Znow]

@vineethvijayan314 It's very hard to help when I don't have access or know of your source code and how it's working right now.

[vineethvijayan314]

@Znow we couldn't figure out the issue.

Now we are using connect/Token API to get the token and call the apis separately. Hope this will work Also thanks for your help.

[antosubash]

Hi I created a youtube tutorial for this with login and logout working with openid_client package in flutter.

Here is the blogpost : https://blog.antosubash.com/posts/abp-auth-with-flutter-p5

Youtube video : https://www.youtube.com/watch?v=lQEVvKzX6P8

This works with Android and Windows.

Solution from @Znow also works well. this is a alternative for flutter_appauth package. The only problem I had the with the flutter_appauth is logout look at this issue https://github.com/MaikuB/flutter_appauth/issues/48 and that is what made me look for other solution. hope this help.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gulsenkeskin]

@Znow we couldn't figure out the issue.

Now we are using connect/Token API to get the token and call the apis separately. Hope this will work Also thanks for your help.

Did you solve the problem?