Seeking assistance for implementing auto OTP verification in a project I am working on. After the user enters their phone number, I have come across some examples for Ionic 1 with Angular 1 online. However, I am specifically looking for examples using Ionic 3 with TypeScript. Any help or examples would be greatly appreciated. Thank you!
Allow me to present an idea involving automated OTP verifications for various purposes, including password recovery.
Requirements:
1. Backend Server
2. SMS Server
3. Ionic app
4. Understanding of REST API
You have the option to set up two REST API URLs that will prompt the backend to send the SMS OTP. Here is an example:
1. /sendOtp - a backend API that Ionic calls to send the OTP
Ionic app -> sendOTP API -> SMS server -> Ionic app
a. Ionic app: Sends information like phone number and type (e.g., reset-password) along with a generated reference code.
b. sendOTP API: Generates a 6-digit OTP, saves it in the database, and sends it to the SMS server.
c. SMS server: Sends the OTP to the provided phone number.
d. Ionic app: Displays the OTP page while waiting for the OTP.
2. /verifyOtp - a backend API that verifies the OTP generated from the backend and matches it to the database.
Ionic app -> verifyOtp API -> SMS server -> Ionic app
a. Ionic app: Upon receiving the OTP digits, it sends the OTP along with the reference code to the verifyOtp API.
b. verifyOtp API: Accepts and checks if the OTP matches the database, then generates a temporary password.
c. SMS Server: Sends the temporary password to the Ionic app.
d. Ionic app: Can display a thank you page or redirect to a password change screen.
You can design the APIs based on your specific requirements.
Currently, I am diving into the world of Angular and exploring how to develop Angular applications with TypeScript while working on a C# ASP.Net Core Web Api project as the server side component. My question is this - if I create a NativeScript app in add ...
In an effort to streamline our development process and avoid having to build the Angular-App multiple times for different environments, we decided to skip injecting environment-specific variables (such as service endpoints) into our app using regular file ...
In this section, I am displaying the restaurants that are filtered based on their name and address. If no name or address is provided, all restaurants are shown. However, I am facing an issue as I need to incorporate a counter to keep track of the remainin ...
I am seeking to convert the data type of each member in an object based on the specific member variable. Here is an example: class A { fct = (): string => 'blabla'; } class B { fct = (): number => 1; } class C { fct = (): { o ...
Within my Angular2 app, I have created an Observable in a Service called ContentService. Here is a simplified version of the code: @Injectable() export class ContentService { constructor(private http:Http, private apiService:ApiService) { th ...
I am currently working on developing a function that can dynamically create and return an object with properties based on an array of strings provided as parameters. type Foods = 'apple' | 'banana' | 'pear'; function foodObje ...
Currently, I am developing a weather application using Astro.js in conjunction with React. One of the features includes an SVG component that serves as the project logo and is implemented in the initial page loader. Upon the page loading, the SVG functions ...
I am trying to retrieve notes data from an API using user_id, but I am encountering difficulties in making the API call. Despite my attempts to log the error, I am unable to fetch the required data. Can someone assist me in identifying what might be miss ...
For incorporating bootstrap with angular2, I executed the following command: $ npm install --save @ng-bootstrap/ng-bootstrap The output displayed: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40212e27352c2132726d313529232 ...
I keep encountering the following error. Can somebody please assist? npm ERR! code 1 npm ERR! path C:\WebApp\NPulseWeb\node_modules\keytar npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c pre ...
Exploring the custom selectors from ngrx has left me in awe of their capabilities. Considering the example of using books for selectedUser, I find myself questioning the need for a custom selector like: export const selectVisibleBooks = createSelector(se ...
As a newcomer to TypeScript, I find myself struggling to grasp the concepts and know where to start or stop. While there are abundant resources available online, I have not been able to effectively utilize them in my project. I am hopeful for some guidance ...
I recently completed an upgrade to the final release of angular 2 from rc-6. Transitioning through different beta/rc versions was smooth and without any complications. My package.json dependencies include: "dependencies": { "@angular/common": "2.0.0" ...
If you want to view the complete code, just click on this link. I have identified the main issue here. Check out the code here: https://stackblitz.com/edit/test-trainin-2?file=src/app/app.component.html The problem is when you interact with the green bal ...
Hey there, I’m currently working on my application which includes a login page. I've implemented a “Forgotten password ?” link, but no matter what I try, like using .class and :focus {outline: none}, I still see a yellow square around the item. ...
Hey there! I've come across a bit of an issue where I can't seem to figure out how to close an Angular Material menu from my controller. The button that opens the menu looks like this: <md-icon class="add-note__icon" [mdMenuTriggerFor]="pale ...
I recently stumbled upon a perplexing piece of TypeScript code that revolves around the function componentControl. Despite my efforts, I find myself struggling to fully comprehend its purpose and functionality. componentControl: const componentControl: &l ...
Imagine you come across the following lines of code: https://i.stack.imgur.com/7IFx1.png And then, in a different section, you stumble upon this code block: https://i.stack.imgur.com/qac0F.png Under what circumstances would () => {} be executed? Wha ...
One of the components in my project is called flow.component.ts and here is a snippet of the code: var rsi_result: number[]; @Component({ selector: 'flow-home', templateUrl: './flow.component.html', styleUrls: ['./flow.comp ...
Currently, I am working with angular9 and rxjs6 while implementing canActivate: Observable feature. However, I encountered an error when attempting to use catchError, as shown in the image below: Is there a solution to fix this issue? I have already tried ...