I want to implement the authentication with callbacks urls using React native . I can't catch to handler of addEventListener when url changed:
Linking.addEventListener('url', this.handleDeepLink);
Noting happend :s
I follow the official docs of facebook but i didn't get any callback.
https://facebook.github.io/react-native/docs/linking.html
Have you defined URL Scheme for callback Url ?
I think You are searching for this:
https://medium.com/#jtremback/oauth-2-with-react-native-c3c7c64cbb6d#.hdrovcyls
follow the steps involved to use Linking. I assume you did configurations in Xcode if you are building for on iOS or if for android check the official docs for deep linking.
PS: the custom URL Scheme you going to define in Xcode may not allow by all the social auths. for example: facebook doesn't allow you to set "yourapp://" as redirection url where twitter, google+, dropbox let you do that.
the above process will be valid if your backend will redirect to custom URL you defined in URL Scheme.
For the best practices, use Sdks for social auths.
Most of the things I assumed writing this answer if it relates to you thats better otherwise drop a comment with specific details.
Related
What I am trying to do is opening a deep link in mobile browse (Not in app). Deeplinking is all set up, all the links with specific domains are opening/navigating into app opened from any where else. Now here is a scenario that there are some particular links with same domain (I set up deeplinking for), I want to open that in browser because I don't have any view to show for that link in my app so I want them open in browser.
I have identified the links but when I opened these links via Linking.openUrl it navigates me to the app.
if (lowerUrl.includes(PostType.NO_DEEP_LINK)) {
Linking.openURL(lowerUrl);
return null;
}
Is there any method I can specify the Linking method to open url in mobile browser not in app although the url has a same domain that is setup for deep linkg.
Solution 1#
The best possible solution for that can be using android:pathPattern in android manifest. Basically you have to provide path pattern (a sort regex) to match the valid links.
Documentation for that can be found here.
https://developer.android.com/guide/topics/manifest/data-element
Solution # 2
One has to make RN Native Module and instead Linking.openURL(lowerUrl) to handle this kind of scenario.
To make browser native module one can take help from here.
This solution doesn't work with devices which lacks google play services like Kindle Fire, etc
I am running into an issue between react native and the endpoint I have setup for the redirect_uri. For the process flow, currently the user is taken from the app to the browser where the fitbit authorization page appears. So far so good. The user selects the permissions that want to allow and from here the redirect_uri points to an express endpoint that saves the information into a database. After this step I would like to redirect the user back to the react native app to continue, instead it just displays the success message that comes from the endpoint in the mobile browser. How can I redirect the user back to the application once the endpoint has finished processing?
What you're asking about is called deep linking.
To open your native app from a browser:
Your native app needs to define a URL scheme that other apps can use to target it.
Your browser-based code needs to redirect to a URL using your app's scheme.
And, most likely:
Your app needs a listener for the deep-link. If you don't write a listener, your app will open, but there would be no way for you to pass information into the app from your browser-based code.
Here is a crude example, as a starting point. I would encourage you to go read the docs thoroughly, because deep-linking is a lot more complicated than first glance. :)
React Native
First, create the my-excellent-app:// scheme for your app as explained here. If you're using Expo, this becomes even easier.
Then, add the listener as early as possible in the life-cycle. Like most of the documentation on this explains – usually in your top-most component in App.js or index.js.
import { Linking } from 'react-native';
import URL from 'url-parse';
// Make sure to only add this listener once!
// Adding it more than once will trigger the handler more than once. ;)
Linking.addEventListener('url', ({ url }) => {
const deeplink = URL(url, true);
console.log(deeplink.query);
});
Web-stuff
I'm not sure exactly what tech stack you're using, but the concept is simple enough: do whatever you need to do on the server, and then redirect the browser back to your app's custom scheme.
In Express, that would be something like:
res.redirect('my-excellent-app://myCustomLink?other=data&using=UrlParamsGoesHere');
Lastly, there are third parties like Branch that also handle quite a lot of this, and more.
I have the following requirement and based on the branch docs I cannot get myself a straight answer.
We want to enable deep links that if the user has the app installed that it uses them and if not redirects to download then redirects.
If the user is on a desktop they get redirected to a page to download app.
We want to control all the actual deep linking using react navigation config and wanted to know how we can pair the two!? The guides are very poorly written and makes understanding the flow a nightmare.
Some guidance and suggestions on how best to accomplish this would be great.
P.s. are the links generated that when app found it takes the prefix and replaces with appname:// ??
Your requirement for deep linking can be handled with Branch, you can set the URI schemes of the apps under the link settings of your Branch dashboard and also mention your app on PlayStore/Appstore for the user to download the app when clicked on the link.Similarly you can add the redirection URLs for the scenarios when your link is clicked on a desktop.
Alternatively you can use our React SDK to create links with all these link properties and even more. More details here.
The handling of the deep link data and redirecting the user to the desired page can be found here.
If you wish to know more about how Branch passes data through to the app and attributes app sessions, check this.
Linking.openURL(`whatsapp://send?phone=${phoneNumber}`)
Take one example, the above is the code to navigate user from our app directly to contact window on WhatsApp.
And now I'm wondering how to navigate user to my company page on facebook page?
Linking.canOpenURL('fb://profile/mycompanypage')
The above not working of course. And other than that, usually how do we know what is the url for us to navigate to the apps?
For example particular Youtube Channel or Vimeo Channel or Twitter profile?
For Facebook you can use these scheme
for Android fb://facewebmodal/f?href=${url} (url is the fb classical url you use in browser)
for IOS fb://page/PAGEID fb://profile/PAGEID you can find the PAGEID of your company page here https://findmyfbid.com/
The IOS solution is great when you don't have to generate the url on the fly which works for you i think. In a different case you'll have to use the FB SDK.
As for your other question: i generally go to the ressources website of the said app to find the right scheme for linking. But maybe there is a place where all those informations can be found ...
EDIT: IOS scheme was wrong
I'm using REST API provided by firebase for dynamic link generation. How do I create a link that opens up app and include app specific variables.
It's the same value. If the app is not installed, link will be opened in the browser (unless overridden by the ifl or afl params). If the app IS installed, it will launch and you'll get the contents of link delivered to you, which you must then parse out and handle as necessary to accomplish deep linking to content inside the app.
See here for an implemented example, and a comparison with the simpler 'key:value' approach we use at Branch.io (full disclosure: I'm on the Branch team).