Change the display of Safari with ReactNativeKeycloak in-app browser options - ios

I am trying to change the display of the following login with keycloak page.
https://imgur.com/a/X18bmgC
This shows up with Safari when starting the app.
The problem I have is that the user has to scroll to see the " New user " part of my WebView. And this is a problem.
I'd like to change the display of my WebView to make it look like this if possible :
https://imgur.com/a/DYfpkRS
Here I had to manually unzoom the page.
<ReactNativeKeycloakProvider
authClient={keycloak}
onEvent={onEvent}
initOptions={{
redirectUri: 'mobile://presentation',
inAppBrowserOptions: {
ephemeralWebSession: true,
modalEnabled: true,
},
}}>
This is the code displaying the Keycloak Login page in Safari ( https://github.com/react-keycloak/react-native-keycloak ).
I've checked the different InAppBrowser options here : https://github.com/proyecto26/react-native-inappbrowser#ios-options
When changing the values of each of these options, I can see no differences on the iPhone I'm using. When I change 'ephemeralWebSession' from true to false, I can see the difference. But every other option makes no difference for me. I tried to change 'modalTransitionStyle', 'modalPresentationStyle', 'readerMode' and 'preferredBarTintColor' values, but nothing shows different on the WebView.
I don't understand what I should change to get my WebView to change aswell.

I realize this is about 6 months old as I'm writing this answer, but I had this same issue and came across this in a search.
There is an open issue with InAppBrowser that addresses this: https://github.com/proyecto26/react-native-inappbrowser/issues/292
In short, RN Keycloak calls the InAppBrowser openAuth method to start an ASWebAuthenticationSession instead of a typical web session with the open method. ASWebAuthenticationSession is not customizable, per Apple.
So, the choice is to modify the RN Keycloak package to use the open method, or to do some overriding trickery with Objective-C as found here: https://msolarana.netlify.app/2021/01/06/fixing-aswebauthenticationsession-presentation/

Related

(React-Native) Set Cookie doesn't work in IOS, but perfectly on Android

Problems
I'm using react-native for our current services, and we are sending cookies to our webpage to send information which is needed to seen in our webview. These process is working PERFECTLY in android devices, but not in IOS. (The most annoying thing is set-cookie works sometimes in IOS in same condition. It just randomly succeeded, and I cannot find the reason why.)
How To Reprouce
First of all, these are the stacks we are currently using.
Application: React-Native
Webview: react-native-webview (https://github.com/react-native-webview/react-native-webview)
Cookie: #react-native-cookies/cookies (https://github.com/react-native-cookies/cookies)
Webpage: React (Already deployed in AWS)
Cookie: react-cookie (useCookie)
And the following is our process we are currently doing.
If the user clicks a button (I will call this button as 'Apply' button), it navigates to screen that includes <WebView />
This is a abstract of our webview screen code (For our security issue, I just abstracted and changed some code for it, so if you think more information for our code, please let me know.)
Rendering Page
enter image description here
WebView Component
enter image description here
Send Cookie
enter image description here
Send Cookie Function
enter image description here
(This function is kinda messy bc this is a collective code from 3 files, and I tried my best to set cookie differently with android. (The same logic with android doesn't work in IOS))
Webpage (Launched in AWS)
enter image description here
I Want My Code To Do This
I want my code to send cookie in loading state, and after loading, when the webview rendered, the webpage get some cookie and based on that cookie, it shows some data.
It PERFECTLY works on Android, but not in IOS. It works randomly in IOS so I have no idea what the heck is wrong with this code and hard to define a problem.
I tried...
Someone said to me to add '.' infront of domain. It worked for the very first time, but after the second trial, it starts to not working again
I also tried clear all cookie data before set cookie using
await CookieManager.clearAll();
, but it works same as the first measure I tried.
I also tried to use webkit. I send all true arguments to use webkit while using cookiemanager, but it has no effect.
I expected to do...
As I write in the above, I hope the cookie is rightly set in both android and ios environment, perfectly works in both platform.

how to open webview inside facebook messenger on desktop web browser

I'm trying to implement some features inside a web view in facebook messenger. on the phone the webview is opening fine, but in desctop web browser the webview is opening inside a new tab.
im using the following feature:
buttons:[{
type: "web_url",
url: "https://www.oculus.com/en-us/rift/",
title: "Open Web URL",
webview_height_ratio: "compact",
messenger_extensions: true,
}
I know that maybe it is supposed to open like this but you all can agree that if I'm implementing a custom feature inside the conversation it would be mach better to open it inside a small webview in the conversation.
does anyone knows if this even possible?
You have to follow the steps in these docs.
Make sure to read the docs for desktop and add the X-Frame-Options header. The troubleshooting section in the same docs is your friend.
Two caveats:
X-Frame-Options header does not seem to be enough for firefox. I'm in the process of building a bot using webview, and when I figure out which headers to send to make firefox work, I will post them here. EDIT due to some bugs within the platform on the web, I've postponed this project.
There seem to be a problem with getting page-scoped user ids on desktop. Read my question.

FBSDK Login - SFSafariViewController is disabled?

I've had an issue on my app overnight that I thought was a coding bug. The issue is that the SFSafariViewController login window (Safari based) - is no longer being presented. Instead, it is launching a new Safari app, and once I log in, I now get the native iOS dialog "Open his page in "XXXXXApp"? I didn't change any settings, didn't play with anything at all. After downloading the source for the FSBDK iOS and debugging, it turns out that "SFSafariViewController" is being disabled by facebook explicitly.
I made a graph call, the same one that the app uses to start up to this endpoint:
https://graph.facebook.com/v2.7/<app-id>?fields=app_events_feature_bitmask%2Cname%2Cdefault_share_mode%2Cios_dialog_configs%2Cios_sdk_dialog_flows.os_version%289.3.0%29%2Cios_sdk_error_categories%2Csupports_implicit_sdk_logging%2Cgdpv4_nux_enabled%2Cgdpv4_nux_content%2Cios_supports_native_proxy_auth_flow%2Cios_supports_system_auth%2Capp_events_session_timeout&format=json&include_headers=false&sdk=ios
And the response appears to disable the controller SFSafariViewController. The evidence in this portion of the payload:
"ios_sdk_dialog_flows": {
"default": {
"use_native_flow": true,
"use_safari_vc": false
}
}
Previously, the use_safari_vc value was set to true. In anyone answers, please keep in mind I want to use the Safari View Controller - but not launching safari as it falls back to now. The latest behaviour asks to open my app, which I thought the Safari View Controller was meant to solve! Also keep in mind that everything was functioning well until this morning. I've tried recreating my app multiple times, but the same behaviour still persists.
Help, my user experience with Facebook is now terrible (and note, I don't care about using native behaviour - I just want Safari View Controller again!)
I'm using v4.15.0 of the Facebook SDK
Cheers
I got word from Facebook developers group that it was an issue on the server side, and that change has been reverted.

angular link selection doesn't work on IOS safari

I'm doing a responsive app using meteor and angular, and i have a share link functionality. On desktop it is an input field on read only and the user can copy the link. On mobile I want to do display an link with tag. But on iOS safari doesn't react correctly when I long touch the link. Usually there is a menu of option that are displayed, but here just nothing happen.
my simple code : {{url}}
Thanks in advance to anybody that has an idea about this issue.
Update: I just tried wiht <a ng-href="{{url}}">{{url}}</a> on Firefox android and it work perfectly. The issue is really an iOs case
You should use ng-href={{url}} instead.
My guess is that iOS reads first the {{url}} as it is, and when angular updates it to whatever value is stored in the url variable, it does not pick up the new value.
And because the string {{url}} is not valid url, it does not know how to work with that, so it does nothing.
(I am not iOS developer, but still, you should use ng-href for this)
For long touch/press especially for mobile: Check this angular directive link

iPhone http:// URL redirection

The main task I'm trying to achieve is to open my app with a URL.
Adding the custom URL scheme to the appName-Info.plist everything works fine using the corresponding handleOpenUrl: etc etc.
My point is that my app has got a webSite as well. So what I'm trying to do is, given an url to my users (tiny, short url doesn't matter) combine together these 3 different cases:
If the user opens the URL from his iPhone and he's got the app installed: open the iPhone app;
If the user opens the URL from his iPhone and he hasn't got the app installed: open the iTunes store URL of the app;
If the user open the the URL from his phone (android, tablet, etc) , or from the web, show the web page instead.
My problem is that I can achieve all these tasks separately but I cannot combine all together.
Note: tried to add the http://myApp.com to the UrlScheme but of course didn't work coz the http:// is managed by Safari in the iPhone.
Any idea? Help and suggestions would be really appreciated. Tks a lot chaps.
This SO question seems to have the answer you're looking for:
Check if the user-agent is that of an iPhone/iPod Touch
Check for an appInstalled cookie
If the cookie exists and is set to true, set window.location to your-uri:// (or do the redirect server side)
If the cookie doesn't exist, open a "Did you know Your Site Name has an iPhone application?" modal with a "Yep, I've already got it", "Nope, but I'd love to try it", and "Leave me alone" button.
The "Yep" button sets the cookie to true and redirects to your-uri://
The "Nope" button redirects to "http://itunes.com/apps/yourappname" which will open the App Store on the device
The "Leave me alone" button sets the cookie to false and closes the modal
The other option I've played with but found a little clunky was to do the following in Javascript:
This would solve one of your problems, it will link the user to the app page:
itms-apps://itunes.com/apps/APPNAME

Resources