Skip to main content

How OAuth 2.0 authorize mini-programs to access resources of native app

How OAuth 2.0 authorises mini-programs to access resources of native app

OAuth 2.0 is widely used in authentication and authorization that allows third-party applications to access resources that are hosted on other applications. OAuth 2.0 provides access to resources with some limitations to the client applications without sharing the actual credentials of the user. Here I will specify my own experience that how I implemented Oauth2 in our App. We implemented a few mini-programs in our app using a third-party mini-app container.

Let's understand more about mini-programs and mini-app containers.

Mini Programs:

Mini programs are mini-apps or we can say independent child apps with limited features that run inside a parent app or bigger app. Mini programs can perform a variety of functions that can enhance native app features like food ordering, ticket booking, banking, chat, E-commerce, and promo codes and can take your small business app to the next level of growth. It allows 3rd parties to implement new features and services on your native app and thus it can nurture your existing customers and access new ones to your business. 

Mini APP Container:

the mini-app container is a runtime system that can run a variety of mini-programs safely and make your native APP more efficient and flexible. The container can run on both Android and iOS platforms. App container delivers rich functionality and capabilities to the user using mini-programs without the need for republishing the native apps.

Authorization Flow:



Understand the Authorization Flow:

Now we will understand more about the working of OAuth 2.0 in real programming scenarios. The above flow diagram is showing how does a user login into a mini-program using its native app. So basically mini-program will access user account details that are hosted on the server of the native app. Initially, the user login to the native app and then launches a mini-program through the native app, then mini-program requests AuthCode from the native app. As soon as the native app gets the request from the mini-program it represents a prompt to the user asking if he wants to authorize this request. If the user approves the request, the native app makes an Auth Code request to the authorization server on behalf of the mini-program by sending its client id and client secret. The authorization server verifies the client and user info and after verification, it issues an Auth Code for a specified scope to the native app. The native app returns this auth code to the mini-program. 

Now, mini-program directly invokes the authorization server by sending the received auth code. After verifying auth code, the authorization server generates an access token with an expiration time and returns it to the mini program. This access token can be passed in the user details API of the authorization server to fetch user information like user id, username, email, and contact number. 

When the authorization server receives a request with an access token, it verifies the token and also checks if it has not been expired. If the token has been expired then the current request will be failed by saying the access token has been expired. In this case, the mini-program will need to refresh the token by sending a new request to the authorization server for getting a new access token. Then mini-program again sends this new token with user details API and after verification gets the details of the user.

Further, if you want to secure all your APIs present at the authorization server using SHA-256 Cryptographic Hash Algorithm, you can go through with my other blog: Secure Rest APIs with SHA-256 Cryptographic Hash Algorithm


Labels:

Comments

Post a Comment

Popular posts from this blog

How to Drag and drop canvas shapes with vue-konva | Interchange locations of two shapes by drag and drop

  Konva is a JavaScript library that supports animations, tweens, drawing many different shapes and designs, ready-to-use filters, node nesting, grouping, and bubbling on both desktop and mobile devices. It also supports native integration with web frameworks like React and Vue by exporting high-quality image data, image objects, and data URLs. In this blog, we will learn to draw different shapes using Konva and Nuxt.js and will make those shapes draggable and droppable. Installing VueKonva with npm: npm install vue-konva konva --save Import and use VueKonva: import Vue from 'vue'; import VueKonva from 'vue-konva' Vue.use(VueKonva) Create shapes with drag and drop: In the example below I tried to create a few shapes using Vue-Konva on konva stage. So initially we need to define the main template that will contain all HTML elements including the Konva Stage container. < template > < div > < button type = "button" class = ...
Post a Comment
Read more

Secure Rest APIs with SHA-256 Cryptographic Hash Algorithm

A cryptographic hash is an algorithm that takes required data to be encrypted and produces enciphered text called "hash". There are different algorithms available in which SHA-256 is way better because it produces a different hash every time even if the input is the same. SHA-256 is more secure and fast enough to be used to secure HTTP calls. So as an API owners, we always want to secure our API endpoints from being attacked. In this blog we will see how can a user securely call an API endpoint via adding a hash to the request header and how can an API owner verify that hash at his end. So let's start. # Steps to secure an API request: Generate your public and private key pair:  Obtain your public/private key pair  as an API user. Here we will use a private key to generate the hash value and sign the API request. A private key is shared only with the key creator and never be shared with anyone whereas the public key is sharable. Share this public key with th...
Post a Comment
Read more