If using webview for user login, we want to close the webview automatically after user submit their info. How to achieve that?
I have seen this being done when using Facebook sign in library, when user login with Facebook, it closes the website and calls the callback.
I am using 'react-native-inappbrowser-reborn'
you can do it use webView interact with js. firstly, when the user clicks the login button to submit their info, the html can post a message use window.postMessage("content") ., then in the react-native webview add onMessage handle.
<WebView
onMessage={this.onMessage}
...
/>
onMessage = (message) => {
// the message is you posted by window.postMessage
}
for react-native > 0.6; you should change to use window.ReactNativeWebView.postMessage.
Besides that, you can also use the injectJavaScripts. for more details about webview interact with js, you can read this artticle
Related
I'm trying to pass login details to a WebView, basically, my use case is, I have a login page built with React Native, after a successful login I wanted to redirect the user to a WebView login with the login details so the WebView doesn't render the login page in itself. So, to achieve this I attach the ref to webView like so
<WebView ref={webViewRef} ... />
With the login page built with ReactNative, the user will enter their credentials, once the login is successful I'll get the user details from the backend as a response to the LOGIN Post API Call, so I passed the response to the postMessage function
const response = await LOGIN({...credentials});
webviewRef.current.postMessage(response.data);
And to the React Web app, I used the below code to add the listener
window.addEventListener("message", (message) => {
alert(JSON.stringify(message.data));
});
But, I'm not getting the data with message.data.
Any workaround would highly be appreciated
You have to use injectJavaScript method on the webviewRef to send data from the app to the web(i.e., to react side). The post message will be used vice-versa i.e., to send data from react side to the app side. The solution below would solve your issue.
First on react side, set the custom function on the window object.
window.onUserLogin = function(userDetails) {
alert(`userDetails are ${JSON.stringify(userDetails)}`)
}
Now on the react-native side, you have the webViewRef. Using that please make the below call.
const USER_DETAILS = {
userName: "Haider"
};
webViewRef.current.injectJavaScript(`window.onUserLogin(${JSON.stringfy(USER_DETAILS)});true;`)
I have a react native compnent that shows a popup message at the bottom of my mobile screen with data from my API http request. Trying to hide the numeric keyboard to be able to see the popup that is behind the keyboard. Calling keyboard.dismiss() when the API response comes does nothing.
Expecting keyboard to be dismissed while using import { Keyboard } from 'react-native' and calling the keyboard.dismiss() from the API response.
You are calling keyboard.dismiss() from an async () method, that's why the keyboard is not hiding.
You will have to call keyboard.dismiss() from the main thread.
I want to reach the response returned after login in webview. But after a lot of research, I couldn't come to a conclusion.
Welcome screen. Here I am redirecting to the webview by clicking the button.
Login screen(Webview). I need to reach the response returned after logging in here.
How can I access requests and responses in webview? Or what is the correct way?
you can use injected script to send data to webview ,and postMessage to send data back to react native app
//This sends data from WebView to React Native
...
<script>
window.postMessage("Sending data from WebView");
</script>
...
//In order to get data the was sent from WebView use onMessage prop on <WebView>
...
<WebView
ref="webview"
injectedJavaScript={`
document.body.style.backgroundColor = '#f4f4f4';
true; `}
onMessage={this.onMessage}
/>
onMessage(data) {
//Prints out data that was passed.
console.log(data);
}
I use linking API of react native to open facebook page and it works good but it opens on browser
_visitFB = (url) => {
Linking.openURL(url);
}
onPress= {()=> this._visitFB('https://www.facebook.com/Arcolpeintures/')}
how can I open it on Facebook App ?
try this:
Linking.openURL("fb://facewebmodal/f?href=https://www.facebook.com/Arcolpeintures/");
or something like this:
Linking.openURL("fb://profile/426253597411506");
basically you need to find facebook url for the profile you are going to show
I'm using Instagram API for authentication in my app. the API works fine but when a user is using two-factor authentication the redirect_uri doesn't work and user redirected to the Instagram main page instead of the correct URL (my app login URL). I don't know how should I handle this and couldn't find any good answer. please help me
Note: this scenario happens for the first time and when Instagram's login session is available in browser user logged in correctly.
Not sure if this is still helpful. But I implemented the following on React Native WebView component and resolved Instagram's clear misstep.
Note - A more robust solution would be for Instagram to actually solve the bug.
As props on WebView:
source={{ uri: this.state.uri }}
onNavigationStateChange={this._onNavigationStateChange}
The handling method:
_onNavigationStateChange(webViewState){
const url = webViewState.url || ''
if(url.includes('challenge')){
this.setState({challenged: true})
}
if(url === 'https://www.instagram.com/' && this.state.challenged){
this.setState({
uri: `${URI}&indifferent_query_param=${(new Date).getTime()}`
})
}
}
The handling method forces rerender of WebView and sends the user to the "authorize" page. Depending on your platform of implementation, you could apply something similar to the above.