Coder Social home page Coder Social logo

romvnly-gaming / authapp Goto Github PK

View Code? Open in Web Editor NEW
6.0 2.0 0.0 171 KB

Authentication app to authenticate users with DiscordSRV and Microsoft's API.

Home Page: https://2v1.me

JavaScript 41.56% CSS 3.54% TypeScript 54.90%
microsoft microsoft-azure msal-js xboxlive

authapp's Introduction

Overview

This project is a Node.js & Express web application that authenticates users against Azure Active Directory (Azure AD) and obtains Access Tokens to call the Xbox Live API and the Mojang API, with the help of Microsoft Authentication Library for Node.js (MSAL Node). It uses Redis for caching sessions and tokens.

Discord's oAuth2 system is used just for accessing Discord profile information, which is used for saving who you are in DiscordSRV's MySQL database.

Scenario

  1. The client application uses the MSAL Node to sign-in a user redirects them to the Discord oAuth2 page
  2. User gets redirected to Microsoft authorization page to obtain an JWT Access Token from Microsoft.
  3. The Access Token is used as a bearer token to authorize the server to access the Xbox Live API.
  4. The Xbox Access Token is used as a bearer token to authorize the server to access Mojang's API
  5. The server responds with the data that the server has access to.

Contents

File/folder Description
App/app.js Application entry point.
App/appSettings.json Application settings and authentication parameters.
App/routes/router.js Application routes are defined here.
App/controllers/mainController.js Main application controllers.

Prerequisites

Setup

Locate the root of the project folder (i.e. AuthApp). Then:

    npm install
    cd TestApp
    vim example.appSettings.json
    mv example.appSettings.json appSettings.json
    cd App
    vim example.ormconfig.js
    vim example.redisconfig.js
    mv example.ormconfig.js ormconfig.js
    mv example.redisconfig.js redisconfig.js

Registration

Register Discord oAuth2 application

  1. Open your Discord applications, create or select an application, and head over to the "OAuth2" page.
  2. Take note of the client id and client secret fields. Copy these values into your appSettings.json file; you'll need them later. Next, add a redirect URL to http://localhost:4545/callback

Register the web app

  1. Navigate to the Azure portal and select the Azure AD service.
  2. Select the App Registrations blade on the left, then select New registration.
  3. In the Register an application page that appears, enter your application's registration information:
    • In the Name section, enter a meaningful application name that will be displayed to users of the app, for example AuthApp.
    • Under Supported account types, select Personal Microsoft account users.
    • In the Redirect URI (optional) section, select Web in the combo-box and enter the following redirect URI: http://localhost:4545/redirect.
  4. Select Register to create the application.
  5. In the app's registration screen, find and note the Application (client) ID. You use this value in your app's configuration file(s) later in your code.
  6. Select Save to save your changes.
  7. In the app's registration screen, select the Certificates & secrets blade in the left to open the page where we can generate secrets and upload certificates.
  8. In the Client secrets section, select New client secret:
    • Type a key description (for instance app secret),
    • Select one of the available key durations (In 1 year, In 2 years, or Never Expires) as per your security posture.
    • The generated key value will be displayed when you select the Add button. Copy the generated value for use in the steps later.
    • You'll need this key later in your code's configuration files. This key value will not be displayed again, and is not retrievable by any other means, so make sure to note it from the Azure portal before navigating to any other screen or blade.
  9. In the app's registration screen, select the Authentication blade in the left to open the page where we add access to the APIs that your application needs.
    • Scroll down to the Advanced settings section.
    • Ensure that the Live SDK support button set as Yes.

Configure the web app to use your app registration

Open the project in your IDE (like Visual Studio or Visual Studio Code) to configure the code.

In the steps below, "ClientID" is the same as "Application ID" or "AppId".

  1. Open the ./App/appSettings.json file.
  2. Find the key clientId and replace the existing value with the application ID (clientId) of the AuthApp application copied from the Azure Portal.
  3. Find the key tenantId and replace the existing value with your Azure AD tenant ID.
  4. Find the key clientSecret and replace the existing value with the key you saved during the creation of the AuthApp app, in the Azure Portal.
  5. Find the key homePageRoute and replace the existing value with the route that you wish to be redirected after sign-in, e.g. /home.
  6. Find the key redirectUri and replace the existing value with the Redirect URI for AuthApp app. For example, http://localhost:4545/redirect.
  7. Find the postLogoutRedirectUri and replace the existing value with the URI that you wish to be redirected after sign-out, e.g. http://localhost:4545/
  8. Find example.ormconfig.js and change the data to your liking and rename the file name to ormconfig.js
  9. Find example.redisconfig.js and change the data to your setup for Redis and rename the file name to redisconfig.js

Running the project

Make sure that Redis server is currently running. Start the Redis server if needed. You will need WSL if on Windows:

    redis-server

: information_source: On Windows, you may use WSL to run above

Locate the root of the project folder (i.e. TestApp). Then:

    npm start

Explore the webpage

  1. Open your browser and navigate to http://localhost:4545.
  2. Click the Sign-in button on the top right corner.
  3. Once you sign-in, click on the See my Xbox profile button to call Xbox Live.
  4. Once you sign-in, click on the See my Java account button to call Mojang's API.
  5. Once you sign-in, click on the See my Discord account button to call Discord's API

authapp's People

Contributors

romvnly-gaming avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.