Thanks to visit codestin.com
Credit goes to github.com

Skip to content

enable JWT token param in frontend API calls #337

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Yuqing-cat merged 4 commits into from
Jun 14, 2022
Merged

enable JWT token param in frontend API calls #337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dc5bb40
enable JWT token param in frontend API calls
Yuqing-cat Jun 9, 2022
b903515
use id token instead of access token
Yuqing-cat Jun 9, 2022
de437a2
remove mock token
Yuqing-cat Jun 9, 2022
937979c
add comment and remove log
Yuqing-cat Jun 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 40 additions & 6 deletions ui/src/api/api.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import Axios from "axios";
import { DataSource, Feature, FeatureLineage, UserRole, Role } from "../models/model";
import { InteractionRequiredAuthError, PublicClientApplication } from "@azure/msal-browser";
import mockUserRole from "./mock/userrole.json";
import { getMsalConfig } from "../utils/utils";

const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT + "/api/v1";
const token = "mockAppServiceKey";
const msalInstance = getMsalConfig();

export const fetchDataSources = async (project: string) => {
const token = await getIdToken(msalInstance);
return Axios
.get<DataSource[]>(`${ API_ENDPOINT }/projects/${ project }/datasources?code=${ token }`,
{ headers: {} })
Expand All @@ -15,6 +18,7 @@ export const fetchDataSources = async (project: string) => {
};

export const fetchProjects = async () => {
const token = await getIdToken(msalInstance);
return Axios
.get<[]>(`${ API_ENDPOINT }/projects?code=${ token }`,
{
Expand All @@ -26,6 +30,7 @@ export const fetchProjects = async () => {
};

export const fetchFeatures = async (project: string, page: number, limit: number, keyword: string) => {
const token = await getIdToken(msalInstance);
return Axios
.get<Feature[]>(`${ API_ENDPOINT }/projects/${ project }/features?code=${ token }`,
{
Expand All @@ -38,6 +43,7 @@ export const fetchFeatures = async (project: string, page: number, limit: number
};

export const fetchFeature = async (project: string, featureId: string) => {
const token = await getIdToken(msalInstance);
return Axios
.get<Feature>(`${ API_ENDPOINT }/features/${ featureId }?code=${ token }`, {})
.then((response) => {
Expand All @@ -46,6 +52,7 @@ export const fetchFeature = async (project: string, featureId: string) => {
};

export const fetchProjectLineages = async (project: string) => {
const token = await getIdToken(msalInstance);
return Axios
.get<FeatureLineage>(`${ API_ENDPOINT }/projects/${ project }?code=${ token }`, {})
.then((response) => {
Expand All @@ -54,6 +61,7 @@ export const fetchProjectLineages = async (project: string) => {
};

export const fetchFeatureLineages = async (project: string) => {
const token = await getIdToken(msalInstance);
return Axios
.get<FeatureLineage>(`${ API_ENDPOINT }/features/lineage/${ project }?code=${ token }`, {})
.then((response) => {
Expand All @@ -63,8 +71,9 @@ export const fetchFeatureLineages = async (project: string) => {

// Following are place-holder code
export const createFeature = async (feature: Feature) => {
const token = await getIdToken(msalInstance);
return Axios
.post(`${ API_ENDPOINT }/features`, feature,
.post(`${ API_ENDPOINT }/features?code=${ token }`, feature,
{
headers: { "Content-Type": "application/json;" },
params: {},
Expand All @@ -76,8 +85,9 @@ export const createFeature = async (feature: Feature) => {
}

export const updateFeature = async (feature: Feature, id: string) => {
const token = await getIdToken(msalInstance);
feature.guid = id;
return await Axios.put(`${ API_ENDPOINT }/features/${ id }`, feature,
return await Axios.put(`${ API_ENDPOINT }/features/${ id }?code=${ token }`, feature,
{
headers: { "Content-Type": "application/json;" },
params: {},
Expand All @@ -89,8 +99,9 @@ export const updateFeature = async (feature: Feature, id: string) => {
};

export const deleteFeature = async (qualifiedName: string) => {
const token = await getIdToken(msalInstance);
return await Axios
.delete(`${ API_ENDPOINT }/features/${ qualifiedName }`,
.delete(`${ API_ENDPOINT }/features/${ qualifiedName }?code=${ token }`,
{
headers: { "Content-Type": "application/json;" },
params: {},
Expand All @@ -107,6 +118,7 @@ export const listUserRole = async () => {
};

export const getUserRole = async (userName: string) => {
const token = await getIdToken(msalInstance);
return await Axios
.get<UserRole>(`${ API_ENDPOINT }/user/${userName}/userroles?code=${ token }`, {})
.then((response) => {
Expand All @@ -115,8 +127,9 @@ export const getUserRole = async (userName: string) => {
}

export const addUserRole = async (role: Role) => {
const token = await getIdToken(msalInstance);
return await Axios
.post(`${ API_ENDPOINT }/user/${role.userName}/userroles/new`, role,
.post(`${ API_ENDPOINT }/user/${role.userName}/userroles/new?code=${ token }`, role,
{
headers: { "Content-Type": "application/json;" },
params: {},
Expand All @@ -128,8 +141,9 @@ export const addUserRole = async (role: Role) => {
}

export const deleteUserRole = async (role: Role) => {
const token = await getIdToken(msalInstance);
return await Axios
.post(`${ API_ENDPOINT }/user/${role.userName}/userroles/delete`, role,
.post(`${ API_ENDPOINT }/user/${role.userName}/userroles/delete?code=${ token }`, role,
{
headers: { "Content-Type": "application/json;" },
params: {},
Expand All @@ -139,3 +153,23 @@ export const deleteUserRole = async (role: Role) => {
return error.response;
});
}

export const getIdToken = async( msalInstance: PublicClientApplication ): Promise<string> => {
const activeAccount = msalInstance.getActiveAccount(); // This will only return a non-null value if you have logic somewhere else that calls the setActiveAccount API
const accounts = msalInstance.getAllAccounts();
const request = {
scopes: ["User.Read"],
account: activeAccount || accounts[0]
};
// Silently acquire an token for a given set of scopes. Will use cached token if available, otherwise will attempt to acquire a new token from the network via refresh token.
await msalInstance.acquireTokenSilent(request).then(response => {
return response.idToken
}).catch(error => {
if (error instanceof InteractionRequiredAuthError) {
msalInstance.acquireTokenPopup(request).then(response => {
return response.idToken
});
}
})
return ""
}
12 changes: 3 additions & 9 deletions ui/src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Layout } from "antd";
import { QueryClient, QueryClientProvider } from "react-query";
import { Configuration, InteractionType, PublicClientApplication, } from "@azure/msal-browser";
import { InteractionType } from "@azure/msal-browser";
import { MsalAuthenticationTemplate, MsalProvider } from "@azure/msal-react";
import Header from "./components/header/header";
import SideMenu from "./components/sidemenu/siteMenu";
Expand All @@ -15,17 +15,11 @@ import Monitoring from "./pages/monitoring/monitoring";
import LineageGraph from "./pages/feature/lineageGraph";
import Management from "./pages/management/management";
import RoleManagement from "./pages/management/roleManagement";
import { getMsalConfig } from "./utils/utils";

const queryClient = new QueryClient();

const msalConfig: Configuration = {
auth: {
clientId: process.env.REACT_APP_AAD_APP_CLIENT_ID,
authority: process.env.REACT_APP_AAD_APP_AUTHORITY,
redirectUri: window.location.origin,
},
};
const msalClient = new PublicClientApplication(msalConfig);
const msalClient = getMsalConfig();
const App: React.FC = () => {
return (
<MsalProvider instance={ msalClient }>
Expand Down
12 changes: 12 additions & 0 deletions ui/src/utils/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { Configuration, PublicClientApplication } from "@azure/msal-browser";

export const getMsalConfig = () => {
const msalConfig: Configuration = {
auth: {
clientId: process.env.REACT_APP_AAD_APP_CLIENT_ID,
authority: process.env.REACT_APP_AAD_APP_AUTHORITY,
redirectUri: window.location.origin,
},
};
return new PublicClientApplication(msalConfig);
}