Question 74728 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter webview How to login to the website when app opens?

I have a Flutter app that needs to show a web-view of a website (https://englishin7boxes.com).
First the user can login using a username and a password. When successfully logged in the API returns an auth token. Which I have saved in memory as "authToken".

Now after login the app navigates to the home screen where I have to show the website(https://englishin7boxes.com). But I need to log into this website automatically when the webview opens. App and the website use the same login and can use the same authToken to log in.

The website login URL is "https://englishin7boxes.com/api/frame-login" .
To log in we can use the authToken we got from the app login and send it in a POST request as the bearer token.

How Can I achieve this in Flutter?

Tags:

2

Answers


  1. 0

    When you do authenticate on your website, the common thing which happens in all websites including yours is that that authentication token will be saved in the local storage or cookies of your website, this is how websites don’t require you to authenticate every single time a webpage is opened in that website.

    after authenticating for the first time and getting that authToken in your hands (I mean in your app), you will need to figure out how exactly the token is saved and used in other requests in your website and then use the runJavascript method to running a js code that do the simulate the same thing with javascript code.

    I can’t produce the exact code, since I don’t know how the token is saved inside your website, but I just will assume and let you have an idea about what I’am trying to say:

    as example if after the authenticattion, the website saves the authToken in the localStorage, then after getting that token for the first time, you will make some js code similar to this:

    localStorage.set("authToken", yourTokenHere);

    and after that, when you acces the WebViewWidget in next times, you will need to set it’s controller like this:

    _webviewController.runJavascript("localStorage.set("authToken", yourTokenHere)");

    and now when the WebViewWidget will render, that token will be set and so tha webpage will use it like the user authenticates manually.

    Login or Signup to reply.
  2. 0

    To Save the AuthToken I would use the Flutter Secure Storage Package (link to pub.dev).

    Add in pupspec.yaml file : flutter_secure_storage: ^8.0.0

    Now you can save the token when you retrieving it from the first page:

    var _storage = FlutterSecureStorage();
await _storage.write(key: 'authToken', value: <yourAuthToken>);

    now when openening the other page within the webview you can retrieve this token and send it in the POST like so:

    import 'package:http/http.dart' as http;
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

class networkClass{
  final _storage = FlutterSecureStorage();

  Future<YourResponseObject> networkConnect() async {
    var token = await _storage.read(key: 'authToken');
    
    var response = await http.post(Uri.parse("https://englishin7boxes.com"), headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': 'Bearer $token',
    });
    //do something with response
    return <YourResponseObject>;
  }
}

    i am not to sure with content type and accept in the headder you may have to tweak these.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search