Use Authorization_Code to get UMI_UID

SDK DEMO:

https://github.com/umiverse-io-v2/umi-oauth-demo

Step1: Get Authorization Code

Umiverse OAuth URL:

PC website:

https://umiverse.io/login?redirect=${REDIRECT_URI}&apikey=${apikey}

For Example:

https://umiverse.io/login?redirect=https://localhost:3000/wechat/callback&apikey=318a379859ed3f676b5d60f2ad76d489

Get Authorization Code

GET https://umiverse.io/login?redirect=YOUR_WEBSITE&apikey=YOUR_APIKEY

Query Parameters

Name	Type	Description
apikey*	String	Your console apikey
redirect*	String	Your website

200: OK

{
    // Response
}

If the user successfully logs in and authorizes, it will jump to the specified callback address, and the Authorization Code will be added after the redirectURL address.

Such as:

PC website:

https://www.your_website.com?authorizationCode=9A5F**************************06AF

Step2: Get UserInfo through Authorization Code

1. Receive Authorization Code via URL:

• After the user successfully logs in, the application receives an authorizationCode as part of the URL query string (e.g., https://example.com/login-success?authorizationCode=...).

• The authorizationCode is a secured, encrypted value that represents the user's session or identity.

2. Decrypt Authorization Code to Retrieve idToken:

• The authorizationCode is passed to an AES decryption function (decrypt).

• The AES decryption function takes two inputs:

  • The authorizationCode itself (which contains an initialization vector and encrypted data).

  • The secretKey, which is stored securely in the environment variables or application config.

• The decryption algorithm uses the secret key and the initialization vector (IV) to decrypt the authorizationCode, which results in an idToken.

• The idToken is essentially a token that verifies the user's identity and can be used for authorization in subsequent API requests.

3. Use idToken to Make an API Request:

• After successfully retrieving the idToken, the application sends an HTTP GET request to the user information API: https://sdk.umiverse.io/user/info.

• This request includes the idToken in the Authorization header using the Bearer token scheme, as follows:

  Authorization: Bearer <idToken>

• The server verifies the idToken and, if valid, responds with user information in JSON format.

4. Receive and Display User Information :

• If the API request is successful, the server responds with a JSON object containing the user's information. This data typically includes fields such as:

  • id: The user's unique ID in the system.

  • email: The user's registered email address.

  • user_name: The user's name or username.

  • picture: The user's profile picture URL.

  • wallet_address: The user's associated wallet address.

  • loginMethod: The method the user used to log in (e.g., Venly, Wallet).

  • create_time: The timestamp of the account creation.

Example of the API response:

{
  "code": 200,
  "message": "success",
  "data": {
    "id": 62,
    "create_time": "2023-07-26T18:28:48.322Z",
    "email": "[e-mail]",
    "picture": "https://cloud.umiverse.io/umi_avatar/7.png",
    "user_name": "John Doe",
    "wallet_address": "0x1Eb847CEA16863958Ab8B1635cD89f7193dD2475",
    "loginMethod": "venly"
  },
  "count": 0
}

5. Rendering User Information on the Frontend:

• Once the user information is received, the application processes and displays the information on the frontend.

• For example, it can show a welcome message with the user's name and profile picture, along with additional details like their email and wallet address.

• If there is an error during the API request (such as an invalid idToken or network issues), the error is handled, and a relevant message is displayed to the user (e.g., "Error fetching user info").

6. Error Handling and Redirect:

• In case the authorizationCode decryption fails (e.g., due to an incorrect or invalid secretKey), an error is logged, and the user may be redirected to the login page again or shown an appropriate error message.

• If the API request fails (e.g., due to an expired idToken), the user may be asked to reauthenticate.

Summary of the Flow:

1. Login and Redirect: After successful login, the authorizationCode is received via a redirect URL.

2. Decryption: The authorizationCode is decrypted using AES with the secret key to obtain the idToken.

3. API Call with idToken: The idToken is used to authenticate an API request to fetch the user's information.

4. Display User Information: The user information is displayed on the frontend.

5. Error Handling: Appropriate handling of errors during decryption or API requests, with fallback mechanisms in place.

This process ensures secure communication between the frontend and backend, using the idToken for authorization while keeping sensitive information safe through AES encryption and decryption.