Deeplinking in AngularJS/Ionic by Example

Question

I'm building an AngularJS (1.x) and Ionic/Cordova mobile app for iOS + Android. I'd like to add/create a "deep link" to my Sign In page so that when I send a new user a "Confirm your Email" email and they click a link to confirm their registration, then if they're on their mobile device (with my app installed) they'll be taken into the app directly to the Sign In page.

I see this plugin but I have no experience creating deep links in AngularJS/Ionic/Cordova apps. Any ideas?

Johnnajohnnie

Answer 1

If you are unsure about deep linking, it will increase the robotic impressions of your page which will increase the number of crawlers.

If you want to learn more about deep linking visit the following link: http://www.divami.com/blog/deep-linking-angular/

Now, the thing you want to implement is authentication of the existing users making and API call to the server that will check to see if the user already exists. If the user exists they will be taken to the login page else they will be taken to the registration page. This can be achieved using resolvers in angularjs.

Below is a link on how to implement this:

https://medium.com/opinionated-angularjs/advanced-routing-and-resolves-a2fcbf874a1c

Deerskin

Thanks @Santosh but no I don't want to authenticate my users when they click the registration link (from inside the email). I just want to bring them to my Sign In page! They will still have to log in! – Johnnajohnnie

I think resolvers is much enough to fulfil your requirement can you post your routing file and actual requirement you want to acheive – Deerskin

Thanks again @Santosh (+1), any chance you could provide a code exmaple? Say my Sign In screen is located at #sign-un from inside my app. What would a deep link (<a/> tag) for it look like, and what kind of config would I need to add to my app so that these "resolvers" execute correctly? Thanks again! – Johnnajohnnie

Hi @Santosh, if you're interested I just posted a 400-point bounty, any interest in giving it a try? Thanks again! – Johnnajohnnie

Answer 2

Since you are using cordova use this plugin, it will help you started for IOS and Android easily.

Install plugin with URL Scheme with below cmd

$ cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=mycoolapp

That's it, now your app can referenced with

<a href="mycoolapp://">Open my app</a>

You can send authentication code along with your URL like

<a href="mycoolapp://somepath?OauthCode=789456">Open my app</a> 

To retrieve code in your App

function handleOpenURL(url) {
  console.log("received url: " + url); ==> this will returnURL after://
}

From this you can authenticate the user in your app itself. This is simple way as you are new to deeplinking. Go through the rules in plugin to know more about the naming convention for custom URL(mycoolapp)

Spinescent

what if we user don't have the app installed on their device...in this case can I redirect the user to a website??? – Spree

Hey, if I have an angular ionic app using capacitor, can I still do something like this? I mean is there a capacitor plugin that helps me achieve the same thing without having to link domains ? – Musgrave

Answer 3

Try this plugin it works great.

document.addEventListener('eventName', didLaunchAppFromLink, false);
function didLaunchAppFromLink(event) {
  var urlData = event.detail;
  console.log('Did launch application from the link: ' + urlData.url);
  // do some work
}
var app = {
  // Application Constructor
  initialize: function() {
    this.bindEvents();
  },
  // Bind Event Listeners
  bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
  },
  // deviceready Event Handler
  onDeviceReady: function() {
    universalLinks.subscribe('eventName', app.didLaunchAppFromLink);
  },
  didLaunchAppFromLink: function(eventData) {
    alert('Did launch application from the link: ' + eventData.url);
  }
};
app.initialize();

---

As you can see, now you subscribe to an event via universalLinks module when the ready device is fired.

Actually, you can subscribe to it in any place of your application: plugin stores the event internally and dispatches it when there is a subscriber to it.

Sain

Answer 4

here is a link the tells how to deep link https://blog.ionicframework.com/deeplinking-in-ionic-apps/

Install the Cordova and Ionic Native plugins:

$ ionic cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=myapp --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=example.com --variable ANDROID_PATH_PREFIX=/
$ npm install --save @ionic-native/deeplinks

Add this plugin to your app's module the below links explains more about that

https://ionicframework.com/docs/native/deeplinks/

Rowenarowland