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?

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

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)

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.