Ionic 5 Tutorial: OAuth2 Login Example (Vue)

welcome back today we're gonna show you a comprehensive step-by-step ionic 5 view tutorial on building secure mobile apps that log in or authenticate to the all full server this time we are using 5js view x to build and manage the logics for these mobile applications to accessing the rest api or alpha server where we use the axios module after all these mobile apps will build to the android and ios using capacitor this tutorial divided into several steps step number one create a new iot 5 application step number 2 install the required modules and components step number 3 create a few service step number 4 great fuex store step number five implementing login register and secure page step number six run and says ionic 5 view or author application the following tools frameworks and modules are required for blitz tutorial note gs with npm or yarn ionic cli fuji s and vx axios not express mongodb or alpha server terminal or nodes command line ide or text editor before start to the main steps make sure you have installed the node.js at k1 npm or er to check the installed node.js and pmover save these commands from the terminal or node screen line let's get started to the main steps step number one create a new ionic 5 application as we mentioned in the previous paragraph where we use ionic cli to create ionic 5 with 5.js projects or applications take this command to install the latest ionic 5 application to create a new ionic 5 with few js and tabs mode type this command level questions as default by press enter to working with this ionic 5 view js app open these projects with your id or text editor to run these applications for the first time check this command install the ioniq lab module if it's required by press y to run it's the lab in the browser and here it is the ionic 5 and 4gs applications look like stop the running ioniq 5 applications by press ctrl c step number 2 install and configure all required modules to access the oil tools server via race api we use the excuse module for state measurement pattern where we use few eggs few eggs we use to simplify the api called to the all through server so there is no direct code to the oauth server from the components also we need stringify json objects by using qs to install all of them save this command make sure the 4x first sentence is using 4 0 0 0 and above to make this tutorial working next configure view x to working with ionic view and type script codes by opening edits hrc sims view point d point ts then add this line at the end next for all configurations that used by api at all full access create a new file at the root of the projects folder fill that file with this configuration variable step number three quite a few service to spirit and reuse api calls logics requests or required services for that create a new folder and files we will put axios and its functionality in the api surfaces ts so the other surfaces we use the same functions to do requests to raise api except token surface ts is used to manage or auth access token and rephrase token next open and edit src surfaces api surface ts then add these imports we will add the required imported class ladder next add a constant variable of api service a certification for everybody has this local variables that use for a statement acceptor operation as the method or functions to initialize the axios based rise api url add a method or functions to intercept the http request header parameter for authorizations token that received after the successful loading add a method of functions to clear the http request headers add a method or functions to implement the axis get pause put delete and custom request add the methods or functions to intercept the http requests that show the ioniq or fuel loading controller add methods or functions to intercept the http response with four zero one status so the captured four 401 status will redirect to the login page by calling the sign out function otherwise the 401 status will fit as the expired token that we trigger the refresh token function add the methods or functions to egx the http 401 response status interceptor export both constant functions as type scripts module next open an edit is roc services token surface ts then add this constant variables to hold the access token and refresh token names add a main constraint variable that holds all the required functions or methods it set that variable or main function's body as the crud creates read updates deletes functions to populate the access token and refresh token for this tutorial the token will save to the local storage but for productions you can use the ioniq secure storage native library export that mine constant as a typescript module next opponent edit src services auth surface ts then it is required imports create a class after the imports that handle the autonomous error create a class after the imports that handle the authentications error quite the main constant variable that contains all required functions for authentication to the oauth server it says that main constant add an asynchronous functions to request the authentication token to the lr server the request contains authorization headers with encrypted or author clients id and secret values the request body using url encoded form and the content of the body form in a string field json object the response from the server are user id access token refresh token and their expiration date the access token refresh second will save to the local storage also the ctp interceptor activated to catch the 401 error status add the functions to request a new token by refresh token these functions similar to the previous functions except for the request body that just use grid type and refreshes token value add functions to sign out or log out the logging in user by cleaning up the tokens and request headers only add the functions to request post data to create a new user to the oauth server this time the request body just using a plain or raw body with json format are the functions to cause form the previous functions when a request api filed export that mine constant as a type scripts module next open and edit is rc services home surface ts then add these few type scripts codes that contain the request to the secure api endpoints next add already store the above surfaces to the main ts after app constant the api service uses the fireball from the dot envy file that previously created step number four create ferg store to manage the state or calls to the services create a folder and files like this next open and edit is rc store all 40s then add these imports add a constant variables that contains the key failure pair of the stat objects add a custom variable to get the required states this time we just return authentication error code and error message adaxian's constant variable that contains the operations to handle the states of login register refresh token and logout also call the commits of the state musicians other constant variables that defines all commits that previously called from the action export the main constant as the alpha module that performs states getters actions and mutations next opening edits this rc store home salty as the next lines of ux codes to handle the state of the secure api only next opening edit is rc store in xts the net is imports and registered previously created store modules finally register the store to the main ts by adding it to the app constant step number five implementing login register and secure page now we will implement the login register using the existing page as the secure page to the fuse for that create a new full files inside src fuse next opening edit is rc fuse sign in dot view then add the ionic few templates that contains a login form with username and password input x sign in button to submit the form and sign up button to go to the sign up page edit for scripts tags with typescript language insert the script tags as these imports of the required components in the template and in the scripts and the main exported full module that contains the name components that used by templates set up the fuel router the form data instantiates the getters from the health store modules and a method to submit the form next open an edit is rc fused sign a few then add these lines of view templates and few typescript scripts to handle the signup form finally modify the existing src fuse tab 1 fuel then replace all few templates and scripts for this next we will add a security or securing the page in the router and also add the previously added sign in and sign up page for that open ended src router exts then replace all in xts typescript called with this as a default this words is secured except for the meta public value to true and only when logos to true will get exception from the secure page and here's how we make it the all pages is secure and it requires a token or successful login before accessing the routes step number six running tests iot 5 fuel oil tool application before running the ionic fuel ape write the phosphate sql software and express all super inspired terminal themes after everything running children terminal tapes then run this command to run a unique view app to the ios simulator it seems like we have an error occurred while running subprocess capacitor this because we don't have any index html file and this folder so we will run build first before running to ios or android and now we have the error caused by definitely not phone in rotary next xts we can fix it because the file name not same as the previously created sign-in filename let's try to build again this view or ionic view application now the build is complete and we have the disk directory so we can run again the ios simulator the x-ray will start after building the ios or you can manually open the xc workspace file from rex code then run the ios applications to simulator from the xcode and here's the vegas and looks like next to run the next few apps to the android devices type these commands the android studio will open fair connects to android devices to your computer that will run the android app from android studio if there's a network error when accessing the api from the device then open the android app is rc mine android modifiers xml the netis parameter to the application stake and run again the android apps to the android device that is the ionic 5 view tutorial or auto login example you can get the article and the full source code link in the description below thank you

Channel: Djamware Tutorial

Views: 2,305

Rating: 4.6129031 out of 5

Keywords: ionic, vue, oauth2, login

Id: NKL21APReu0

Length: 29min 47sec (1787 seconds)

Published: Fri Dec 11 2020