Navigating Redirect Uri in Ionic for third-party API integration

After creating a webapp, I decided to venture into developing a mobile app using Ionic. The idea of making a progressive web app crossed my mind, but unfortunately Apple doesn't support it yet.

(By the way, I'm still quite new to all of this)

For military service verification, I am utilizing the id.me api which returns an access token in the redirect uri for making api requests.

I have two options in terms of implementation, either through my server or directly on the client side.

You can check out their process flow here

This is where things get a bit confusing with Ionic....

To initiate the process, I need to direct the user to id.me's authorization endpoint, typically done via the inappbrowser

https://api.id.me/oauth/authorize?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token&scope=SCOPE

The redirect from id.me will contain the access token...

Next step involves extracting and storing the token locally before closing out the InAppBrowser. However, I'm unsure about setting the uri. Should it be localhost? Does Ionic run on a local server when deployed on a platform?

Would something like this work?

angular.module('myApp', ['ionic', 'ngCordova']).controller('AppCtrl', 

function($rootScope, $ionicPlatform, $cordovaInAppBrowser) {
    var callback = 'http://localhost:8100/callback';
    $scope.idAuth = function() {
      $ionicPlatform.ready(function() {
        var options = {
          location: 'yes',
          clearcache: 'no',
          toolbar: 'yes'
        };
        $cordovaInAppBrowser.open('https://api.id.me/oauth/authorize?client_id=CLIENT-ID&redirect_uri=callback&response_type=token&scope=SCOPE', '_blank', options)
      });
    };


    $rootScope.$on('$cordovaInAppBrowser:loadstart', function(e, event) {
      //and this function is called, so you do something like
      if(event.url === callback){;
        let token = event.url.match(/\#(?:access_token)\=([\S\s]*?)\&/)[1];
        $window.localStorage.setItem('token', token);
        $cordovaInAppBrowser.close();
      }
    });

If the callback uri is triggered, will that function execute?

My confusion deepens at this stage. While I understand how this would function in a local environment, does the callback uri persist once the app is built and deployed on a device? Does Ionic operate on a local server within the device itself?

Answer №1

When using Ionic, the application listens for incoming requests on http://localhost/[YourCallBackURI]. Typically, it operates on port 80 by default unless specifically configured otherwise. Different ports may be utilized when running in emulator mode.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in scrolling previews detected in Jssor horizontal template maker

I've been working with Jssor Slider Maker and I'm using the vertical preview template that features two columns on the left side and a maximized image on the right side. After pulling the code from the developers pack, it includes scripts, CSS an ...

Enhance the appearance of React.Fragment with custom styling

When working with React, my components adhere to a specific file structure schema: - componentName |- componentName.tsx |- componentName.scss Some of these components are wrapped with a <React.Fragment>, like this: render() { return ( &l ...

Understanding 'this' in ChartJS within an Angular application

Here is my event handler for chartJS in Angular that I created: legend: { onClick: this.toggleLegendClickHandler After changing the text of the y scale title, I need to update the chart. I am looking to accomplish this by calling this._chart.cha ...

Making a Zoom effect using p5.js

I have searched for a solution to this question multiple times, but none of the answers I came across seem to work for me. Currently, I am able to allow the user to scale an image with a simple scale(factor) call. However, now I am attempting to implement ...

Using a function from one class within another class by passing it as a prop

Below are the methods found in my Search.tsx class. renderSuggestion(suggestion) { <div className="buttons"> <button className="button">View Location</button> <button className="button whitebutton" onClick={this.h ...

Is there a way to create a clickable component for triggering an AJAX call without using a Submit button?

Just starting out with JS/JQuery programming, so please excuse any mistakes or unclear explanations. Any feedback is welcome, even if not requested specifically. I am working with multiple drop down lists that are populated dynamically by data from SQL Ta ...

Using Gulp Filter in Conjunction with Source Maps

My initial query was similar to this one here, but it led me to delve deeper into research and explore a new approach. Essentially, I am attempting to consolidate all my .js and .coffee files within a single gulp.src() object and execute relevant tasks ba ...

How to effectively handle asynchronous calls in Node.js using readdir and stat functions

My current project involves implementing a post method on the server side to fetch all files within a specified directory (non-recursively). Below is my code snippet. I am encountering challenges in sending back the response (res.json(pathContent);) with ...

Troubleshooting problem with Material-UI and Next.JS in Webpack

I have encountered an error while trying to add the code from this file: https://github.com/mui-org/material-ui/blob/master/examples/nextjs-with-styled-components-typescript/next.config.js When I include the next.config.js code provided below, I receive ...

Exploring a nested JSON structure using AngularJS's Ng-Repeat directive

I am facing an issue with displaying all elements of subcategory using Ng-Repeat. I have managed to show all events from the selected category with this code, but I am unsure how to display all activities from a specific event. I currently have this code.. ...

Struggling to maintain data consistency among controllers in Angular by utilizing the rootScope, only to encounter persistent issues with

I am facing an issue with displaying the admin status at the top of all pages for a user who successfully logs in as an admin. Here is my code snippet: <!-- nav bar --> <div> <span ng-show="$root.isAdmin">(ADMIN)</span> </di ...

Animate elements in Vue.js when navigating between pages is a great way to enhance user

I'm looking to add animation to a specific element once the route page finishes loading. This is not related to route page transitions. I've experimented with various methods, trying to animate a progress bar based on dynamic data values. I attem ...

Conceal the scroll bar while still allowing for scrolling functionality

In this code snippet, I am trying to maintain the scroll position of two blocks by syncing them together. Specifically, I want to hide the scrollbar of the left block while scrolling the right one. If anyone has any suggestions or solutions for achieving ...

Firestore/Javascript error: FirebaseError - The data provided is invalid for the DocumentReference.set() function. An unsupported field value of 'undefined'

I keep encountering this error Error creating user: FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field diabetesComplication) After some investigation, I realized that the iss ...

What is the method for calculating the total number of keys in an object to assess an equation

I am attempting to conceal the parent element of a table (which has rows generated using ng-repeat) if the table does not contain any data. A solution I came across specifies this scenario for arrays, as shown in the example below: However, my situation i ...

Ways to eliminate all characters preceding a certain character within an array dataset

I am currently working on parsing a comma-separated string retrieved from a web service in my application, which contains a list of user roles. My goal is to convert this string into an array using jQuery, and I have successfully achieved that. However, I ...

What is the best way to refresh a PHP function based on a JavaScript event?

I have a website where a div tag shows all the values from a SQL database using PHP. I want to reload this div tag with a JavaScript event, such as clicking on an HTML button. Is it possible to bring back all the values from the SQL database and display th ...

Angular.js fails to load successfully every other time

My angular application is running into some issues with bower. At times, when I start up the server, I encounter the following error: Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr] Failed to in ...

AngularJS: Unable to preserve the data

I'm currently working on an issue with saving updated functions using angularJS. I've managed to edit the data and update it on the database side, but the changes aren't reflecting on the frontend side unless I logout and login again. I need ...

Attempting to execute a function within a MAP operation

My attempt to integrate a function into my map is resulting in only the function running and not the rest of the code. Edit: After reflecting on the situation, it dawned on me that I need to elaborate further. The goal here is to execute this.math in orde ...