branch io web sdk generate link as banner - branch

I have created a smart banner using the Branch.io web SDK, but I also need to generate a Branch deep linking url (e.g https://bnc.lt/l/3HZMytU-BW) to use as the href value in a normal link.
Here is the behavior I want this link to have:
If user is on a mobile device
Send user to app store if app is not installed
Deep link into app if app installed
If user on desktop
Send the user to a web url (e.g www.mysite.com/welcome) with appended custom params (e.g www.mysite.com/welcome?deeplink=true&getme=20)
I have seen that I can generate a Branch link by using the javascript banner.link() method, or via an HTTP API call. Then I can add a query string to the generated link, which works fine on desktop. Will those query string values also be available inside the app if it is installed when the user clicks the link?
I have seen that I can pass different fallback URLs for each device (iOS, Android, desktop, etc.) to use if the app is not installed. How does this work on the mobile devices? If the app is installed, does it still open when these fallback URLs are specified? Do these fallback URLs override the App/Play Store redirects?
I would really appreciate your help. Thanks in advance.

Link Behavior
What you've described is the standard behavior for Branch.io links (full disclosure: I'm on the Branch team).
Desktop users will be sent to a fallback website URL
Mobile users with the app installed will be sent to the app
Mobile users without the app installed will be sent to the App Store (though you can override this and send them somewhere else).
Appending Query Params
Query parameters appended to a generated Branch link (e.g., https://branchmaps.app.link/LC3Cj399jz?foo=bar) will be passed through to both the website fallback destination and the app.
Desktop Website
Let's say the desktop destination of https://branchmaps.app.link/LC3Cj399jz is https://branch.io/maps. Appending to foo=bar to that (https://branchmaps.app.link/LC3Cj399jz?foo=bar) will automatically append foo=bar to the destination URL: https://branch.io/maps?foo=bar
Mobile App
Appended params (e.g., https://branchmaps.app.link/LC3Cj399jz?foo=bar) will be captured and returned inside the link data dictionary when the app launches. This would look something like the following:
{
tags: [ 'tag1', 'tag2' ],
channel: 'facebook',
feature: 'dashboard',
stage: 'new user',
alias: 'myalias',
data: {
foo: 'bar',
// other data
}
}
HOWEVER, if you append the query params to the desktop fallback URL (e.g., https://branch.io/maps?foo=bar) inside the Branch link, then that will not be passed through to the app. Instead, you should specify those inside the branch.link() call like so:
branch.link({
tags: [ 'tag1', 'tag2' ],
channel: 'facebook',
feature: 'dashboard',
stage: 'new user',
data: {
foo: 'bar',
'$desktop_url': 'https://branch.io/maps?foo=bar',
}
}, function(err, link) {
console.log(err, link);
});
Fallback URLs
If you specify fallback URLs ($android_url, $ios_url), these will only take effect if the app isn't installed. These will override the default App/Play Store fallbacks.

Related

Firebase Magic Link not complete in Android App

I have a React Native Project using Expo Managed Workflow.
The App is built as a expo-dev-client.
I use Firebase Native SDK to authenticate via sendSignInLinkToEmail()
I managed to request the magic link for login. It arrives and when I click it on my android device, the App comes to focus and I am even able to listen to the dynamic link when it comes in.
Problem is it does not validate with isSignInWithEmailLink() because the link I get is only the continueURL parameter of the original link in the Email.
I really don't know where the link is being cut off but I need the complete link from the Email to use signInWithEmailLink() which obviously doesn't work.
When I manually insert the link from the email into signInWithEmailLink() everything works as expected.
I really hope someone has experienced this issue and can help me out!
My Bad. Apparently I was using a Dynamic Link from firebase as I did not have action codes set correct as in:
const actionCodeSettings = {
// URL you want to redirect back to. The domain (www.example.com) for this
// URL must be in the authorized domains list in the Firebase Console.
url: 'https://www.example.com/finishSignUp?cartId=1234',
// This must be true.
handleCodeInApp: true,
iOS: {
bundleId: 'com.example.ios'
},
android: {
packageName: 'com.example.android',
installApp: true,
minimumVersion: '12'
},
dynamicLinkDomain: 'example.page.link'
};

Nuxt.js auth: Redirect after login doesn't occur for nested routes, only basic routes

I'm trying to use the #nuxtjs/auth module for OAuth2 authentication from Okta in a web app.
My app has a URL structure like: /browse/{folder} to view images from a particular folder, where {folder} can be any string of text. This is accomplished by creating a top-level view called browse.vue, a folder called browse, and a child component within that folder called _folder.vue. See more on nested routes in the Nuxt.js documentation in more detail here.
I've added the auth guard to the _folder.vue file. When I navigate to /browse, I'm redirected to /login and everything works perfectly from here with OAuth2 and Okta. When I'm returned to the app after logging in, I'm taken back to the /browse page.
However, when I navigate to a folder, like /browse/Test, I'm not redirected back to that folder after logging in. Instead, I'm returned to the / view of the app. From here, if I type the path in the address bar again, I am able to successfully view it as a logged in user. This indicates that the login was successful, but something about the redirect wasn't.
I noticed by looking at the cookies in the Firefox developer tools that an auth.redirect cookie is not created when I navigate to /browse/Test, so I think the auth module is not aware of where to redirect the user after logging in. When I navigate to /browse, the auth.redirect cookie is created, and the redirect occurs successfully.
Is there something I can do to make the auth module work for redirecting to these dynamic routes, or is this a bug with the module? Everything else about the module has worked perfectly in my app.
My auth configuration in nuxt.config.js, using #nuxtjs/auth version 4.9.1:
auth: {
fullPathRedirect:true,
redirect:{
callback:"/login",
logout:"/"
},
strategies: {
social:{
_scheme: 'oauth2',
authorization_endpoint: "https://{my-subdomain}.okta.com/oauth2/v1/authorize",
scope: ['openid', 'profile', 'email'],
access_token_endpoint: "https://{my-subdomain}.okta.com/oauth2/v1/token",
response_type: 'id_token',
token_type: 'Bearer',
client_id: process.env.CLIENT_ID,
client_secret:process.env.CLIENT_SECRET,
token_key: 'id_token'
}
}
}

How do I get react-native-inappbrowser-reborn to trigger success upon successful Facebook login

I'm trying to setup a manual flow for Facebook login, as per the docs at: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/
I've got my test Facebook app working as expected, i.e., I can login using a private web browser window fine. The URL I'm using is:
https://facebook.com/v3.3/dialog/oauth?client_id=<app_id>&display=popup&response_type=token&redirect_uri=https://www.facebook.com/connect/login_success.html
Now within my React-Native app, I'm using react-native-inappbrowser-reborn to present a SFAuthenticationSession on iOS. As per their docs (at https://www.npmjs.com/package/react-native-inappbrowser-reborn), I'm doing the following:
const redirectUri = "https://www.facebook.com/connect/login_success.html"
const url = "https://facebook.com/v3.3/dialog/oauth?client_id="+appId+"&display=popup&response_type=token&redirect_uri=https://www.facebook.com/connect/login_success.html"
InAppBrowser.isAvailable()
.then(() => {
InAppBrowser.openAuth(url, redirectUri, {
// iOS Properties
dismissButtonStyle: 'cancel',
// Android Properties
showTitle: false,
enableUrlBarHiding: true,
enableDefaultShare: true,
})
.then((response) => {
// Only gets to this point if user explicitly cancels.
// So this does not trigger upon successful login.
})
// catch handlers follow
Using the above, my app correctly open up an in-app browser and I can login fine using a test user for my test app. Upon successful login though, I don't get redirected back to the .then completion handler. It just stays in the in-app browser view and I see the same message from Facebook that I see when logging in using a web browser. It says something like "Success. Please treat the url the same as you would a password", or something like that.
I may be missing something here, but I thought the purpose of passing redirectUri as an argument to openAuth was so that upon redirection to that URI, the completion handler would be triggered.
Question: How do I redirect back to the completion handler upon login success?
I think that you already have a solution but thought it might be useful for someone else facing this issue. If you don't have a solution so far follow my instructions:
You can't directly redirect back to your application using deep link, since Facebook will not call a link `like myapplicationname://mycustompath´. It's only possible to call links using the https-protocol (https://...).
The solution I'd suggest you to use is to redirect using your own API (Facebook -> Your API -> Deep Link Redirection). You will understand why this is required in the most of the real world applications at the end of the instructions.
Starting from your react-native app call the authorize endpoint of Facebook with a redirection to your application and set the global deeplink of your app as redirect uri.
InAppBrowser.close();
InAppBrowser.openAuth("https://graph.facebook.com/oauth/authorize?client_id=YOURCLIENTID&redirect_uri=https://YOURDOMAIN:PORT/auth/facebook", "{YOURAPPSDEEPLINKNAME}://{SOMEPATHYOUWANTTOEND}")
.then((response) => {
handleAuthorized(response, LOGINTYPE.FACEBOOK);
});
Now after login you'll be redirected to your API with the authorization code token as query parameter (e.g. https://YOURDOMAIN:PORT/auth/facebook?code=AVERYLONGCODESENTBYFACEBOOK)
Using this code token from the query parameter, you make another API Call to get the access_token for the user
{GET}: https://graph.facebook.com/v15.0/oauth/access_token?client_id=YOUR_CLIENT_ID&redirect_uri=https://YOURDOMAIN:PORT/auth/facebook&client_secret=YOUR_CLIENT_SECRET&code=AVERYLONGCODESENTBYFACEBOOK
Facebook's API will send you an answer as JSON with the access_token inside.
You can make another call using the access token of the user, to get the userId and the username
{GET}: https://graph.facebook.com/me?access_token=ACCESS_TOKEN_SENT_BY_FACEBOOK_IN_PREVIOUS_GET_REQUEST.
If you need the e-mail address for the user you have to make another call. Make sure you'd set the permission to read the e-mail address for your app on the developer portal of facebook.
The following request will return you the id, name and the email of the user
{GET}: https://graph.facebook.com/USERIDFROMPREVIOUSREQUEST?fields=id,name,email&access_token=ACCESSTOKEN
I think you want to save all these information to a database and create a session in order to keep the user logged in and therefore all the requests described will be useful for you in a real application.
After doing all the backend stuff, you're ready for the redirection using deep link. To do that, set a meta-tag to redirect the inappbrowser to your application:
<meta http-equiv="refresh" content="0; URL={YOURAPPSDEEPLINKNAME}://{SOMEPATHYOUWANTTOEND}" />

Deep linking with Brnach.IO with sendGrid integration issue as passing params is undefined while opening link from mail using React native

Goal
I am sending email with deep linking implementation with Branch.IO with sendGrid integration. While user click on link my react native app open in phone and redirect me to screen based on query params in url which i have provided during create link in API.
Problem
I am able to open app from link but query params i have provide in link is display as blank. so i am not able to open screen where i want to redirect to user in app.
branch.subscribe(({ params, error, uri }) => {
if (error) {
console.log('Error from Branch: ' + error)
return
}
console.log("params :: ", params);
if(params.reset) {
// Redirect user to reset password screen
console.log("params.reset :: " + params.reset);
Actions.resetpassword({resetToken: params.reset});
} else if(params.verify) {
// Verify signup user
axios.post('http://localhost:3030/authmanagement', {
"action":"verifySignupLong",
"value": params.verify
}).then(response => {
Actions.login({isVerifySuccess: true});
}, error => {
Actions.login();
});
}
});
I have write this code as suggest Branch.IO documentation. In params i have send reset and verify token which i got as blank string.
Information
This code is working without integration with sendGrid in deep linking. But for mailing tracking i used sendGrid. So when i try to email with sendGrid it will create problem.
I have setup Link Branding in SendGrid account and also add CNAME in my domain as given in instruction of sendGrid integration for deep linking.
I have check mailed link in Redirect Detective portal
I have verified link and it will generate valid url with params. please look into below image for more clarification
Jackie from Branch here.
Based on your redirect link, there seems to be an issue with the SendGrid integration. Could you make sure your integration is properly set up by following the instructions here?
For some context, this is what a link should look like within your email template: http://example.com/?foo=bar
When a user clicks your link in the email, Branch processes the link and converts it to something like this:
https://vza3.app.link/3p?%243p=e_xx&%24original_url=http%3A%2F%2Fexample.com%2F%3Ffoo%3Dbar
(Where vza3.app.link is your Branch domain.)
Also, in order for SendGrid to know that the email link should deep-link and open the app, add universal="true" to the HTML, like so:
Link to your app!
If you continue to experience issues with passing deep link data via SendGrid email tracking, please reach out to us directly at integrations#branch.io with your Branch key and the link(s) you're using.

Pass OS values to extJS app

How can I access external system values from within an ExtJS application? One of the main reasons I need to do this is that instead of doing authentication from my ExtJS application, I am using Apache to provide this to protected directories on my server, so I want to be able to pass some of the information about the user to the application, once authenticated and the app opened. It is far easier to use LDAP authentication in this manner...
Pass those values through:
Apache → Backend App → Generated HTML → Frontend App (Ext JS)
Your backend application, whatever technology it is built on, will see authentication information from Apache in environment variables. The actual variable names will depend on your setup. This is easily googlable as:
apache auth user environment variable <YOUR_BACKEND_TECHNOLOGY>
Then, the information obtained from Apache will need to be inserted in the HTML as JavaScript/JSON bit like this:
<script type="text/javascript">
var AUTH_INFO = {
"username": "John Smith"
// other information
};
</script>
Note that it needs to be inserted before Ext JS code.
Finally, in your Ext JS app, just access that info as a global variable:
AUTH_INFO.username