Search code examples
vue.jsdeep-linkingcapacitor

Deep link doesn't work if it's a redirect url


I'm using Capacitor (with VueJS), my deep link is working correctly, but it doesn't work if it's a redirect URL.

I want to use oauth2 to connect to Facebook. When I enter my Facebook login/password, Facebook redirects me to my server API "https://myapi.com/mydeeplink", but my app doesn't trigger the deep link (it doesn't ask me if I want to open this URL with my app).

I know this is because of the redirect URL, because it's working if I go manually to "https://myapi.com/mydeeplink" in Google Chrome.

The question is: Is it possible to trigger the deep link if it's a redirected URL?


Solution

  • OKAY It seems I've found the answer!

    With Capacitor we have to use Browser Plugin.

    When i will click on my Facebook button to login i will call the Browser.open to open the link in a way that AppUrlOpen will be triggered everytime (even if it's redirect url)

        async LoginWithFacebook() {
          await this.$browser.open({ url: this.$api_addr + 'auth/facebook' });
        },
    

    ..i login with facebook..
    ..my server redirect me to app://mydomain/myroute?myquery=param..

    then i can catch the deeplink with: App.addListener('appUrlOpen' ..)

      App.addListener('appUrlOpen', function (data) {
        const url = "area://mydomain/myroute"
        let slug = data.url.split(url).pop();
    
        if (data.url.startsWith(url)) { // if it's the good url I redirect to my app
          this.$router.router(`/${slug ? slug : ""}`);
        }
      });
    

    Care! To make it works you need association file explained here:
    "https://capacitorjs.com/docs/guides/deep-links", ITS IS MANDATORY!!

    Then you have to add this to your Mani

                <intent-filter android:autoVerify="true">
                    <action android:name="android.intent.action.VIEW" />
                    <category android:name="android.intent.category.DEFAULT" />
                    <category android:name="android.intent.category.BROWSABLE" />
                    <data android:scheme="app" android:host="mydomain" />
                </intent-filter>
    

    DONE