reCaptcha v3 on mobile devices - flutter

Could someone help me please?
I'm implementing Google Recaptcha V3, for Android and iOS applications.
I use the following command to get a return:
bool ready = await GRecaptchaV3.ready("");
When running as a web application, it works normally because it is imported in index.html
< script src="https://www.google.com/recaptcha/api.js?render=">< /script>
But, when running on the emulator, mobile applications do not interpret this index.html file, so the javascript is not loaded and my request does not return as expected.
Any idea?
Thanks!

Unfortunately, g_recaptcha_v3 only supports the web platform. As you can see in the screenshot below, the pub.dev site only lists web as a platform for this plugin.

Related

Any cordova plugin to add WebAuthn API to Android WebView?

We've developed a cordova app that shows one of our websites (which is also accessible using a web browser).
Recently, FIDO2 authentication using WebAuthn has been added to that website. This works fine in the tested browsers (Chrome and Firefox), but not in our cordova application, as it uses Android WebView, which doesn't implement the WebAuthn API.
Does anybody know if there is any cordova plugin to add this API to Android WebView?
Is there any website with information about the Android WebView roadmap (bugs that will be fixed in next release, new features that will be added, ...)?
You're correct that Android WebView doesn't support WebAuthn in Android 13. We hope to address that in the Android 14 timeframe but, for now, you have to inject Javascript hooks and use a Javascript bridge to implement it. It's certainly possible to do but I'm not aware of any packaged solutions that do it.

Flutter Web Application Not Loading In Mobile Browser

I have created a mobile application for my business using Flutter and it is published in PlayStore which is working fine.
Later I have converted the application to web-friendly and built it using Flutter Web and hosted it using Firebase Hosting. You can see the website here: https://youmenotes.com/immadekada/bambusa/#/
Now the problem which I am trying to resolve is, the website is loading as per expectation in desktop browsers, but if I try to open this URL using mobile phone browsers, it is stuck in a white screen. No clue on how to resolve it.
Please give me some light on the issue if anyone faced the same.
Thanks!
Note: I have another Flutter Web app (a demo app) that is hosted using the same way, and it is working perfectly alright on both PC and mobile browsers. The URL is this: https://youmenotes.com/immadekada/bambusa/game1/#/
This was happened to me-
step 1: check if it is running fine on local
for that run following command
flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0
and check form your mobile which is same network as your pc by
entering url <pc's ip address:8080/>
step 2: build web with canvaskit render which is more suitable for mobile brower,
command: flutter build web --web-renderer canvaskit --release and
release it.
Thanks, for spending your time to find a solution for the issue. Here I have found the solution.
It was a simple coding issue that caused the incorrect behavior in mobile browsers!
There were some mobile-only features in my application and which I handled using the following method:
bool isMobile() {
if (defaultTargetPlatform == TargetPlatform.iOS ||
defaultTargetPlatform == TargetPlatform.android) {
return true;
} else {
return false;
}
}
So it was working as expected when running from mobile as a mobile application, and running in a computer as a web application. But when it comes to running it from a Mobile device as a web application, the method returns true since the platform is Android/iOS. And that caused my business logic to misbehave.
I updated the if condition with a proper checking for the web by adding kIsWeb, and the method started to return values properly.
Now the URL is loading correctly in both web and mobile browsers.
https://youmenotes.com/immadekada/bambusa/#/
Thanks, for your time.
Update:
How did I identify the issue?
Using Remote Debugging on mobile devices.
You can navigate to this page on chrome by using the URL chrome://inspect/#devices
Thanks,
Midhun.

Ionic workflow questions and facebook authentication issue

I'm trying to implement mobile application using Ionic. I'm following this, but unfortunately logging in doesn't work on real device. It works fine in the browser and the emulator. I did every step from the tutorial, I did the tutorial 2-3 times and still get the same error.
I am logged in successfully on my device but then I see the following screen:
I already have both urls as redirect urls in my application settings in FB.
http://localhost:5000/oauthcallback.html
https://www.facebook.com/connect/login_success.html
I tried to debug OpenFB with alerts. I can see "cordova events" alert but then I have alerts on the first lines of loginWindow_loadStartHandler and loginWindow_exitHandler but they are not executed. I guess that the problem is there but I have no idea how to fix it.
if (runningInCordova) {
alert("cordova events");
loginWindow.addEventListener('loadstart', loginWindow_loadStartHandler);
loginWindow.addEventListener('exit', loginWindow_exitHandler);
}
Also I have some questions about Ionic and Phonegap.
I use Ubuntu and I am trying to build iOS and Android applications.
My application's structure is:
app/
hooks/
platforms/
plugins/
scss/
www/
Also I have InAppBrowser plugin:
cordova plugin add org.apache.cordova.inappbrowser
but this plugin is not part of app/www folder.
I am trying to build a phonegap application in their site. I made a .rar file of the app/www folder content and upload it. Everything seems to be fine. But in Phonegap site when I click PLUGINS, I see This application has no plugins. How should I add inappbrowser to the application, maybe that is the reason why my FB authentication doesn't work. If I build the whole app folder, again I see the same message - This application has no plugins.
So when create an archive file of the content for Phonegap, which folder I should archive - the whole app folder with all subfolders or only app/www? What is the correct flow? Also how crossplatform app should now about added plugins?
I ran into this issue today, if someone is still looking for the solution for this:
loginWindow.addEventListener('loadstart',
loginWindow_loadStartHandler);
is implemented in the js file, but the loadstart event never fires on my Android (but works on WindowsPhone cordova javascript app), instead i added:
loginWindow.addEventListener('loadstop',
loginWindow_loadStartHandler);
,which works on both Android and WP (with InAppBrowser 1.2.0), IOS test is still ahead.

Call phonegap plugin function within web app

i am building my first phonegap app and when i open the app i instantly redirecting (window.location) the user to my server where my web app is hosted. Is it possible to load the phonegap plugins from there? Because the "deviceready" event is not firing and i cannot call any plugin functions.
I can confirm that loading remotely does appear to allow access to native components (when scripts are properly loaded) and that cordova.jsdoes not appear to need to be loaded by the local index.html bootstrap.
Short answer: Yes
Some 'gotcha's'
You will have to supply correct cordova.js version for the platform browsing to your site.
you can look here for more info https://github.com/apache/cordova-js. This project hosts the core js elements, and builds the platform specific cordova.js lib
Any plugin api's your app wants to interact with must be pre-installed into the Native App
any plugin with native code will have to be added to the project and deployed to device bundled inside the app. There is no way to lazyload native code. The js portions of the plugin could be hosted on your server, however.
More information, some apps that do this
The PhoneGap Developer App uses a similar technique to what is describe above and what you want. The only difference is that it is meant as a dev tool, and the server is a local dev machine.
The Cordova App Harness also uses this technique of pre-bundling an app package with plugins, to be consumed by remotely hosted resources
You cannot, deviceready only functioning if the app run on mobile phone environment only. If web based or dekstop application, it won't trigger.
No , dont do that . loading remote website will not able to intract with your plugins . and the app will get rejected on istore too

Phonegap's Facebook Connect plugin - making it work with web app as well as native apps?

I've got the FB Connect plugin working with my Phonegap project native apps, but now I'm wondering what the workflow is for making it work with the web-app version.
When I run the web-app version, I get the standard Phonegap FB Connect errors, the last one being 'FB variable does not exist. Check that you have included the Facebook JS SDK file.' - this makes sense, as my web app doesn't have those js files, as they get injected during the PG Build process.
So what is the typical way of moving forward at that point? Can I use that last error as a way of determining 'ok, this is the web-app version, not native', and then what do I do next? Should have the Facebook SDK installed on my web-app?
Cheers
The git repo has steps for including the plugin in web app
Web App
www/js/facebookConnectPlugin.js contains the JavaScript SDK and API file. The API matches as close as possible to the native APIs.
Setup Web App Example
Host the www folder on a server and configure your Facebook dashboard correctly to test the Web APIs. Most people use Parse for easy testing.
NOTE : Developers should call facebookConnectPlugin.browserInit() before login - Web App ONLY
https://github.com/phonegap/phonegap-facebook-plugin