Deeplink or Redirect to App from URL

Ionic Framework
1

Hello World,

i got a question regarding deep link,

if an User signup for an account, the system will send email to their mailbox and requires User to click a link for activation,

after clicking the activation link, it redirects to a Welcome page, saying, please proceed to open your App for login.

what can i add to the welcome page so that besides it says Welcome, it can redirect and open the App automatically? or when clicked a link?

what can i do to make this work? i tried reading a few tutorials but itā€™s not helping much.

regards

2

Using deeplinks, when user clicks on activation link, you can provide a link like: https://abc.com/login which can open the login page in the app.
I hope I have understood your question correctly. If this is what you want, I can provide further details.

3

Dear Srividya,

yes, thatā€™s what i need to achieve, need to provide a link which can open the login page in the app.

tried a few tutorials online but not successful, hope can provide me some details of what i need to follow the steps

thank you and best regards

4

Install the deeplinks native plugin. I used these commands to install.

npm install @ionic-native/deeplinks

cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=custom --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=abc.com

After installing, as usual, add DeepLinks as a provider in app.module.ts. Inject it in app.component.ts in the constructor where we will be using it. (code at the end)

Then you have to link your website and your app. For Android,

  1. you can either do it by uploading assetlinks.json to your website OR
  2. linking your website and app in Google search console.

For Approach #1
First step is to create a keystore file and get the fingerprint data. This file is used to sign your app, so you may already have it. Use the fingerprint data in this keystore to generate the assetlinks.json file using the following tool:

Here is a reference for Approach #2 :

At the same time, in the code, in app.component.ts you have to handle the incoming links in the following way:

this.deepLinks.route({ 
          '/login': '/login'
}).subscribe(
          match => {
            console.log('Successfully routed', match);
// use this.route.navigateByUrl here
},
  nomatch => {
  console.log("Deeplink that didn't match", nomatch);
  });

The overall tutorial for this can be found here: How to Setup Universal Links in Ionic (iOS & Android) | Devdactic - Ionic Tutorials

Hope this helps.

1 Like
5

hello Srividya,
thanks for your tutorial, i will give it another try by using approach 1,

update you soon if thereā€™s something successful or otherwiseā€¦

:bowing_woman: :bowing_man:

6

iā€™ve done the following,
cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=custom --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=abc.com

i have successful uploading assetlinks.json to website, and tested list generator but iā€™m confused with the following

www.abc.com is a website
www.abc.com/login is a website and contain a page for login

example this App is call XYZ, the login page inside the App is this XYZ/login

example : when clicked this url www.abc.com/login it will redirect to open the XYZ App which has a route of login?

can you help enlighten how it works?

the tutorial iā€™ve followed too. but something is different from the tutorial especially on their html page

7

yes, once your website and app are linked in the methods mentioned above, when a website link is clicked, the phone will ask the user whether to open it with your app or browser. When the user selects ā€œyour appā€ from the choices presented, your app will open and he will go to the login page of your app. (which you have to handle in the code)

8

Hello Srividya,

noted, it means i need to generate it to become APK and test it using phone, ok, i give it another try, as i yet figure the logic out how it actually works yet. LOL :bowing_man: :bowing_man:

9

Hello Srividya

during weekend i did a few trials and not successful, then i found a more simple tutorial under this link How to Implement Deeplinks in Ionic v5 | by ashok naik | Medium

i have set up everything as required,

at the app.component.ts

   initDeeplinks() {
this.deeplinks.route({ '/:slug': 'login' }).subscribe(
match => {
const path = `/${match.$route}/${match.$args['slug']}`;
// Run the navigation in the Angular zone
this.zone.run(() => {
this.router.navigateByUrl(path);
});
},
nomatch => {
console.log("Deeplink that didn't match", nomatch);
});
}

this is the app-routing.module

   {
path: 'logins/:slug',
loadChildren: () => import('./logins/logins.module').then( m => m.LoginsPageModule)

},

this is from my logins.page.ts, i purposely generate another page to create a login as it contains a slug and it clashes with the original login page

   ngOnInit() {

let slug = this.route.snapshot.paramMap.get('slug');
let url = `https://abc.com/getBlogs?slug=${slug}`;
this.http.get<any[]>(url).pipe(map(res => {
  let blog = res[0];
  return blog;
})).subscribe(blog => {
  this.blog = blog;
});

}

this html.page i cannot understand atā€¦ why display contents from another page instead of linking up, i just want a simple login page.

     <ion-header>
    <ion-toolbar color="primary">
    <ion-buttons slot="start">
  
    </ion-buttons>
  
    </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
    <div *ngIf="blog">
    <img [src]="blog.media_url" [style.width]="'100%'">
    <div [innerHTML]="blog.content" padding></div>
    </div>
    </ion-content>

there is something i cannot figure out from that tutorial is one of the sentence

  "Through this setup, we can enter the app with a link like https://myblogs.com/my-first-blog which now becomes /blogs/my-first-blog inside our app."

i cannot find anything related to my-first-blog

i just like to link abc.com/login to my app. why so vast difference with their tutorials?

can you able to see anything different?

based on the tutorial login.page.ts

ngOnInit() {

let slug = this.route.snapshot.paramMap.get('slug');
let url = `https://abc.com/getBlogs?slug=${slug}`;
this.http.get<any[]>(url).pipe(map(res => {
  let blog = res[0];
  return blog;
})).subscribe(blog => {
  this.blog = blog;
});

}

the url link to link the app is it need to write abc.com/getBlogs?slug=login only then the app will be open by the link?

regards

10

I did a few test based on tutorials but seemed like tutorials are not successful, is there any more tutorial which i can refer to ? to make app/login works???

11

You may not need to use slug etc. Try simple stuff:

this.deepLinks.route({ 
          '/login': '/login'
}).subscribe(
          match => {
            console.log('Successfully routed', match);
            // Navigate to the url
            let route = `${match.$route}`;
             this.ngZone.run(() => {
                            this.router.navigateByUrl(route);
                       });
  },
  nomatch => {
  console.log("Deeplink that didn't match", nomatch);
  });

Try out simple code. Check in console what comes for ā€˜matchā€™ and proceed accordingly.
Hope this helps.

12

thanks Srividya, i will give it another try. will update you about latest progress :bowing_man: :bowing_man: :bowing_man:

13

Hello. Were you able to integrate this successfully?

14

Yes, I was able to integrate it successfully in Android as well as iOS.