Fixed some search issues and Oauth2 Application perms + JWT problems

This commit is contained in:
Frikky
2023-11-15 00:53:02 +01:00
parent f6c7939dda
commit df6d7f88de
4 changed files with 321 additions and 180 deletions
+68 -8
View File
@@ -297,6 +297,65 @@ const AuthenticationOauth2 = (props) => {
const handleOauth2Request = (client_id, client_secret, oauth_url, scopes, admin_consent, prompt) => {
if ((authenticationType.redirect_uri === undefined || authenticationType.redirect_uri === null || authenticationType.redirect_uri.length === 0) && (authenticationType.token_uri !== undefined && authenticationType.token_uri !== null && authenticationType.token_uri.length > 0)) {
console.log("No redirect URI found, and token URI found. Assuming client credentials flow and saving directly in the database")
// Find app.configuration=true fields in the app.paramters
var parsedFields = [{
"key": "client_id",
"value": client_id,
},
{
"key": "client_secret",
"value": client_secret,
},
{
"key": "scope",
"value": scopes.join(","),
},
{
"key": "token_uri",
"value": authenticationType.token_uri,
}]
// Not necessary yet to do something like this due to not showing the fields anyway
/*
if (selectedApp.parameters !== undefined && selectedApp.parameters !== null && selectedApp.parameters.length > 0) {
for (var i = 0; i < selectedApp.parameters.length; i++) {
if (selectedApp.parameters[i].configuration !== true) {
continue
}
console.log("Found configuration field: ", selectedApp.parameters[i].key, " with example: ", selectedApp.parameters[i].example)
parsedFields.push({
"key": selectedApp.parameters[i].key,
"value": selectedApp.parameters[i].example,
})
}
}
*/
const appAuthData = {
"label": "OAuth2 for " + selectedApp.name,
"app": {
"id": selectedApp.id,
"name": selectedApp.name,
"version": selectedApp.version,
"large_image": selectedApp.large_image,
},
"fields": parsedFields,
"type": "oauth2-app",
"reference_workflow": workflowId,
}
setNewAppAuth(appAuthData)
return
}
setButtonClicked(true);
//console.log("SCOPES: ", scopes);
@@ -798,6 +857,7 @@ const AuthenticationOauth2 = (props) => {
}}
fullWidth
color="primary"
label={"Client ID"}
placeholder={"Client ID"}
onChange={(event) => {
setClientId(event.target.value);
@@ -816,20 +876,22 @@ const AuthenticationOauth2 = (props) => {
}}
fullWidth
color="primary"
label={"Client Secret"}
placeholder={"Client Secret"}
onChange={(event) => {
setClientSecret(event.target.value);
//authenticationOption.label = event.target.value
}}
/>
{allscopes.length === 0 ? null : "Scopes"}
{allscopes.length === 0 ? null : (
<div style={{width: "100%", marginTop: 10, display: "flex"}}>
<span>
Scopes
<Select
multiple
underline={false}
value={selectedScopes}
label="Scopes"
style={{
backgroundColor: theme.palette.inputColor,
color: "white",
@@ -855,6 +917,8 @@ const AuthenticationOauth2 = (props) => {
})}
</Select>
</span>
{((authenticationType.redirect_uri === undefined || authenticationType.redirect_uri === null || authenticationType.redirect_uri.length === 0) && (authenticationType.token_uri !== undefined && authenticationType.token_uri !== null && authenticationType.token_uri.length > 0)) ? null :
<span>
<Tooltip
color="primary"
@@ -866,6 +930,7 @@ const AuthenticationOauth2 = (props) => {
}}/>
</Tooltip>
</span>
}
</div>
)}
</span>
@@ -882,19 +947,14 @@ const AuthenticationOauth2 = (props) => {
variant="contained"
fullWidth
onClick={() => {
handleOauth2Request(
clientId,
clientSecret,
oauthUrl,
selectedScopes
);
handleOauth2Request(clientId, clientSecret, oauthUrl, selectedScopes);
}}
color="primary"
>
{buttonClicked ? (
<CircularProgress style={{ color: "white" }} />
) : (
"Manually Authenticate"
"Authenticate"
)}
</Button>
+1 -1
View File
@@ -81,7 +81,7 @@ const SearchField = props => {
style: {
color: "white",
minWidth: 750,
height: 685,
height: 785,
borderRadius: 16,
border: "1px solid var(--Container-Stroke, #494949)",
background: "var(--Container, #000000)",
-1
View File
@@ -4593,7 +4593,6 @@ const AngularWorkflow = (defaultprops) => {
}
}
console.log("NODE: ", nodedata)
if (nodedata.decorator !== true && nodedata.attachedTo === undefined) {
var newdata = JSON.parse(JSON.stringify(nodedata))
newdata.large_image = ""
+90 -8
View File
@@ -374,8 +374,8 @@ const AppCreator = (defaultprops) => {
"API key",
"Bearer auth",
"Basic auth",
"Oauth2",
"JWT",
"Oauth2",
];
const apikeySelection = ["Header", "Query"];
@@ -411,6 +411,7 @@ const AppCreator = (defaultprops) => {
const [appBuilding, setAppBuilding] = useState(false);
const [fileDownloadEnabled, setFileDownloadEnabled] = useState(false);
const [actionAmount, setActionAmount] = useState(increaseAmount);
const [oauth2Type, setOauth2Type] = useState("application");
const defaultAuth = {
name: "",
type: "header",
@@ -1754,11 +1755,10 @@ const AppCreator = (defaultprops) => {
//console.log("FLOW2: ", value[flowkey][basekey])
if (value[flowkey] !== undefined && value[flowkey][basekey] !== undefined
) {
if (
value[flowkey][basekey].authorizationUrl !== undefined &&
parameterName.length === 0
) {
if (value[flowkey][basekey].authorizationUrl !== undefined && parameterName.length === 0) {
setParameterName(value[flowkey][basekey].authorizationUrl);
} else {
setOauth2Type("application")
}
var tokenUrl = "";
@@ -2846,7 +2846,6 @@ const AppCreator = (defaultprops) => {
style={{ margin: 0, flex: "1", backgroundColor: inputColor }}
fullWidth={true}
placeholder="/security/user/authenticate"
type="name"
id="standard-required"
margin="normal"
variant="outlined"
@@ -2866,6 +2865,40 @@ const AppCreator = (defaultprops) => {
},
}}
/>
<Typography
variant="body2"
color="textSecondary"
style={{ marginTop: 10 }}
>
Optional: Authentication queries
</Typography>
{/*
<TextField
style={{ margin: 0, flex: "1", backgroundColor: inputColor }}
fullWidth={true}
placeholder="grant_type=client_credentials&scope=connect.api.read"
id=""
margin="normal"
variant="outlined"
defaultValue={parameterName}
helperText={
<span style={{ color: "white", marginBottom: "2px" }}>
Must use 'key=value&key=value' format
</span>
}
onBlur={(e) => {
//setParameterName(e.target.value)
}}
InputProps={{
classes: {
notchedOutline: classes.notchedOutline,
},
style: {
color: "white",
},
}}
/>
*/}
</div>
) : null;
@@ -2878,9 +2911,15 @@ const AppCreator = (defaultprops) => {
color="textSecondary"
style={{ marginTop: 10 }}
>
Find the Authorization URL, Token URL and scopes in question for the API. Ensure the app in question is pointed at https://shuffler.io/set_authentication
{oauth2Type === "delegated" ?
"Find the Authorization URL, Token URL and scopes in question for the API. Ensure your app in the service uses redirect url https://shuffler.io/set_authentication"
:
"Find the Token URL and scopes in question for the API"
}
</Typography>
{oauth2Type === "delegated" ?
<span>
<Typography
variant="body2"
color="textSecondary"
@@ -2928,6 +2967,8 @@ const AppCreator = (defaultprops) => {
},
}}
/>
</span>
: null}
<Typography
variant="body2"
color="textSecondary"
@@ -2977,6 +3018,8 @@ const AppCreator = (defaultprops) => {
},
}}
/>
{oauth2Type === "delegated" ?
<span>
<Typography
variant="body2"
color="textSecondary"
@@ -3020,6 +3063,8 @@ const AppCreator = (defaultprops) => {
},
}}
/>
</span>
: null}
<Typography
variant="body2"
color="textSecondary"
@@ -3037,7 +3082,7 @@ const AppCreator = (defaultprops) => {
},
}}
style={{ maxHeight: 80, overflowX: "hidden", overflowY: "auto" }}
placeholder="Available Oauth2 Scopes"
placeholder="Available Oauth2 Scopes (enter to add)"
color="primary"
fullWidth
value={oauth2Scopes}
@@ -5865,6 +5910,7 @@ const AppCreator = (defaultprops) => {
}}
/>
<div style={{padding: 25, border: "2px solid rgba(255,255,255,0.7)", borderRadius: theme.palette.borderRadius, }}>
<span style={{display: "flex", }}>
<FormControl style={{ }} variant="outlined">
<Typography variant="h6">Authentication</Typography>
<a
@@ -5910,6 +5956,42 @@ const AppCreator = (defaultprops) => {
))}
</Select>
</FormControl>
{authenticationOption === "Oauth2" ?
<FormControl style={{ marginLeft: 350, maxWidth: 200, }} variant="outlined">
{/*
<Typography variant="body2">
- Delegated: The user will get a popup for access their personal data.
- Application: Permissions are set by the app creator in the 3rd party platform.
</Typography>
*/}
<Select
fullWidth
label="Oauth2 type"
onChange={(e) => {
setOauth2Type(e.target.value);
}}
value={oauth2Type}
style={{
backgroundColor: inputColor,
color: "white",
height: "50px",
}}
>
{["delegated", "application"].map((data, index) => (
<MenuItem
key={index}
style={{ backgroundColor: inputColor, color: "white" }}
value={data}
>
{data}
</MenuItem>
))}
</Select>
</FormControl>
: null}
</span>
<div style={{marginTop: 15 }} />
{basicAuth}
{bearerAuth}