Fixed some search issues and Oauth2 Application perms + JWT problems
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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)",
|
||||
|
||||
@@ -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 = ""
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user