I am working on superset integration with kepler. so far, I have cloned the superset code and configured in local and for kepler I have created a react application with kepler plugin.
Now in Superset I have included a button named 'View in Kepler' to allow the user to navigate to my kepler application.
In Superset there is a login screen to validate the user but while redirecting how to perform the same?
Code that performing redirecting logic with json data(dashboard data) is attached below
const res = userListJson; // Proceed and get data from dataFromListOfUsersState function
if (typeof window !== 'undefined') {
if(check_time == true){
window.location.href = "http://localhost:3000/header?dashboard=time&filename="+res.data+"";
}else {
window.location.href = "http://localhost:3000/header?dashboard=header&filename="+res.data+"";
}
}
}).catch((error) => {
if (error.response_2) {
console.log(error.response_2)
console.log(error.response_2.status)
console.log(error.response_2.headers)
}
});
Related
I am trying to integrate Azure AD authentication with my Electron App (with Angular). I took reference from this link and able to integrate: https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-nodejs-desktop
Issue: It's using getTokenInteractive() method and it's navigating to an external browser. As per my requirement we don't have to navigate to an external browser, it should open the UI inside my electron App where end users can provide their credentials.
Another option if possible we can open the Azure AD url part of my electron App.
I took reference from this link and able to integrate: https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-nodejs-desktop
async getTokenInteractive(tokenRequest) {
try {
const openBrowser = async (url) => {
await shell.openExternal(url);
};
const authResponse = await this.clientApplication.acquireTokenInteractive({
...tokenRequest,
openBrowser,
successTemplate: '<h1>Successfully signed in!</h1> <p>You can close this window now.</p>',
errorTemplate: '<h1>Oops! Something went wrong</h1> <p>Check the console for more information.</p>',
});
return authResponse;
} catch (error) {
throw error;
}
}
I am building an app in ReactJS that requires the user's location. In the browser (Chrome) on my PC I get a prompt once. If I decline, the prompt will not show again upon a page refresh. However, I will get the option to manually enable location.
When I open the same web page on my android phone in Chrome I neither get a prompt nor the option to enable location access manually. I have looked for solutions through Google but all of them rely on a prompt being automatically shown upon a navigator.geolocation.getCurrentPosition call, but it doesn't.
This is my code:
function getUserLocation() {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(
function (position) {
setLocationDidMount(true);
console.log("got position");
},
function errorCallback(error) {
console.log(error);
navigator.permissions
.query({ name: "geolocation" })
.then(function (result) {
if (result.state === "granted") {
console.log(result.state);
//If granted then you can directly call your function here
} else if (result.state === "prompt") {
console.log(result.state);
} else if (result.state === "denied") {
console.log("location access denied by user");
//If denied then you have to show instructions to enable location
}
result.onchange = function () {
console.log(result.state);
};
});
},
{
timeout: 5000,
}
);
} else {
console.log("Not Available");
}
}
How to handle this problem? Btw, I'm not supposed to use React-Native.
As is pointed out by the article shared by Sergey, mobile browsers will only handle location properly when there is an SSL certificate in place.
While causing a warning, installing a local certificate using OpenSSL did fix the problem.
So I'm in the process of setting up MSAL with AAD for my react project. As it is, everything is working as expected, I can login, refresh the page (to get the latest active token) and logout.
However, as I was trying to refactor some of my code to make it more readable, I ran into a problem with setActiveState(), the following code works in my App.js:
export const msalInstance = new PublicClientApplication(msalConfig);
const accounts = msalInstance.getAllAccounts();
if (accounts.length > 0) {
msalInstance.setActiveAccount(accounts[0]);
}
However, I wanted to refactor the above as follows - To handle more cases in a joint function:
export const msalInstance = new PublicClientApplication(msalConfig);
function handleResponse(response) {
if (response !== null) {
const accountId = response.account.homeAccountId;
} else {
const currentAccounts = msalInstance.getAllAccounts();
if (currentAccounts.length === 0) {
// no accounts signed-in, attempt to sign a user in
instance.loginRedirect(loginRequest);
} else if (currentAccounts.length > 0) {
msalInstance.setActiveAccount(currentAccounts[0]);
}
}
}
msalInstance.handleRedirectPromise().then(handleResponse);
The above code is capable of getting all current accounts and it successfully reaches setActiveAccount, however nothing happens - I.e. my active account is not being set, which means that my <AuthenticationTemplate/> is stuck loading.
Please double-check your application, tenant, and client identifiers. Also, make sure that http://localhost:3000 is listed among the Allowed Web Origins in Azure's Application settings.
Check out this sample for further guidance.
I am trying to use one private NPM module only when the page is loading for the first time and rendering is happening on the server. I am using the following piece of code but I am still able to see my package in chunks in client.html using the build analyzer.
if (typeof window === 'undefined') {
const content = await import('#abc/my-npm-package');
return conent(payload);
} else {
return null;
}
Excellent question, I've poked around the Next.js's code and found out that in order to code that will be exists only on the server you need to use some variable which is passed to webpack.DefinePlugin (which at build time will replace the usage with the value, this what allows the tree-shake to work).
From this line, there is a special variable process.browser which will be true only in the browser.
Change your code to
if (!process.browser) {
const content = await import('#abc/my-npm-package');
return conent(payload);
} else {
return null;
}
Update 16.03.2022
Next.js will deprecate process.browser soon, the new recommended way to distinguish between client & server is by checking type of window === 'undefined' // means that it's server side.
if (typeof window === 'undefined') { // server side
const content = await import('#abc/my-npm-package');
return content(payload);
} else { // client side
return null;
}
I`ve tried to register my app as Web application, generate the user id and implement it in my code but get an error when I press my button for log in with google:
[Unhandled promise rejection: Error: Please provide the appropriate client ID.
enter image description here
If you're using expo, you have to configure the google sign-in like this. This is my configuration. You have to create androidClientId and iosClientId from your account and use it here.
Disclaimer: This is a standalone function only for signingin/signingup a Google user and fetching details. To configure it with firebase you have to add other functions too.
Also, make sure that you're importing this package. I faced a similar problem when I used another package.
import * as Google from 'expo-google-app-auth'
Additionally, are you using the latest version of expo SDK?
async signInWithGoogleAsync() {
try {
const result = await Google.logInAsync({
androidClientId:
'your-id',
iosClientId:
'your-id',
scopes: ['profile', 'email'],
permissions: ['public_profile', 'email', 'gender', 'location']
})
if (result.type === 'success') {
/*put your logic here, I set some states and navigate to home screen
after successful signin.*/
const googleUser = result.user
this.setState({
email: googleUser.email,
name: googleUser.name,
})
this.navigateToLoadingScreen()
return result.accessToken
} else {
return { cancelled: true }
}
} catch (e) {
return { error: true }
}
}