I am trying to restrict access to certain pages of my app to authenticated users only. Hovewer, if anonymous user clicks page for first time it loads and after refresh user is getting 401 error.
Here is my react router
<Switch>
<Route path='/' exact component={Dashboard} />
<Route path='/records' component={Records} />
<Route path='/livecam' component={LiveCamera} />
<Route path='/debug' component={Debug} />
<Route path='/settings' component={Settings} />
</Switch>
And my Azure Static web app routes:
{
"routes": [
{
"route": "/records*",
"allowedRoles": ["authenticated"]
},
{
"route": "/livecam*",
"allowedRoles": ["authenticated"]
},
{
"route": "/settings",
"allowedRoles": ["admin"]
}
],
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/assets/*.{png,jpg,jpeg,gif,bmp}", "/static/css/*"]
},
"mimeTypes": {
".json": "text/json"
},
"responseOverrides": {
"400": {
"rewrite": "/invalid-invitation-error.html"
}
}
}
Thanks!
I found solution. To force server-side routing it is required to add forceRefresh parameter to react router.
<BrowserRouter forceRefresh={true}>
Related
Following Chrome Extension Manifest V3 rule I want to create an extension, that listens to particular network request and, for startes, just log them to the console of the currently opened tab (later I want to add custom script and styles to the page in the current tab).
For this I try to utilize chrome.scripting.executeScript.
When I implement the sample from https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/examples/page-redder/manifest.json it works like expected for the chrome.action.onClicked listener.
As soon as I try to execute a script within the chrome.webRequest.onBeforeRequest listener, this error pops up:
Error in event handler: TypeError: Error in invocation of
scripting.executeScript(scripting.ScriptInjection injection, optional
function callback): Error at parameter 'injection': Error at property
'target': Missing required property 'tabId'.
at chrome.webRequest.onBeforeRequest.addListener.urls ()
Missing required property tabId? I assume it has to do with the lifecycle, but I cannot figure out what to do. This is my manifest:
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js",
"matches": [ "<all_urls>"]
},
"host_permissions": [
"<all_urls>"
],
"permissions": [
"activeTab",
"tabs",
"webRequest",
"webNavigation",
"management",
"scripting"
]
}
And this is my script, I just slightly modified the "redden"-example:
function reddenPage(url) {
console.log(url);
}
chrome.webRequest.onBeforeRequest.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: reddenPage,
args: [tab.url],
});
},
{urls: ["*://*.google.com/*"]},
[]);
I don't know exactly why, but the script from Github seems not work. This is how it works:
It's not only a couple of changed brackets, look at tab instead of (tab), but also tab.tabId instead of tab.id:
chrome.webRequest.onBeforeRequest.addListener(tab => {
chrome.scripting.executeScript(
{
target: { tabId: tab.tabId },
function: reddenPage,
args: [details.url],
},
() => { console.log('ZZZ') });
}, {
urls: ['<all_urls>']
});
I am trying to migrate my browser extension to manifest version 3 but I am not able to access some properties from chrome.runtime in my service_worker. Code explains more than words I guess.
My background.js file:
function call() {
console.log({ runtime: chrome.runtime })
chrome.runtime.getPackageDirectoryEntry(() => null)
}
// putting it to timeout otherwise I couldn't access the logs page
setTimeout(() => {
call()
}, 0)
My manifest:
{
"manifest_version": 3,
"name": "Test",
"version": "0.0.0",
"background": {
"service_worker": "background.js"
}
}
When I open service worker page I can see
Uncaught TypeError: chrome.runtime.getPackageDirectoryEntry is not a function
The same code works with v2:
{
"manifest_version": 2,
"name": "Test",
"version": "0.0.0",
"background": {
"scripts": ["backgroud.js"]
}
}
The method I am trying to use is documented here but it is clearly missing in the runtime object (with plenty of others...)
So I got this problem.
I am trying to fetch a local json file from my project. The json file is stored in the src folder.
This is my json file
[
{
"name": "Sunsssset Beach",
"email": "info#sunsetbeach.com",
"image": "https://images.unsplash.com/photo-1439130490301-25e322d88054?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80",
"price": 85,
"maxGuests": 18,
"lat": 60.393388,
"lng": 5.22872,
"description": "Get ready for some amazing sunsets as you sip a cocktail and watch dolphins play in the harbour below.",
"selfCatering": true,
"createdAt": "2020-09-04T09:07:10.367Z",
"id": "5f5203bedc17b0a4b302f211"
},
{
"name": "The Hideaway",
"email": "info#hideaway.com",
"image": "https://images.unsplash.com/photo-1551906993-c8b38a6ab201?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=666&q=80",
"price": 70,
"maxGuests": 2,
"lat": 60.425168,
"lng": 5.358141,
"description": "This secluded wilderness cabin is the perfect spot for a restful and cosy getaway.",
"selfCatering": true,
"createdAt": "2020-09-04T09:07:10.370Z",
"id": "5f5203bedc17b0a4b302f213"
},
{
"name": "Rest Easy",
"email": "management#resteasy.com",
"image": "https://images.unsplash.com/photo-1512552288940-3a300922a275?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80",
"price": 120,
"maxGuests": 14,
"lat": 60.396779,
"lng": 5.235602,
"description": "Need some time off from your busy life to relax and unwind? Choose Rest Easy for the complete relaxation experience you desire.",
"selfCatering": false,
"createdAt": "2020-09-04T09:07:10.370Z",
"id": "5f5203bedc17b0a4b302f212"
}
]
And here is my project file
function Establishment() {
const [establishment, setEstablishment] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch("jsonfile")
.then((response) => {
// check if response returns ok
if (response.ok) {
return response.json();
} else {
setErrorHandle(true);
}
})
.then((data) => {
setEstablishment(data);
})
.catch((err) => {
console.log(err);
setErrorHandle(true);
})
.finally(() => setLoading(false));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
Now I want to be able to press a button do display all of these items, and by clicking on one item, it should display only that item in a different page. How do I do that?
Let me know if there is anything else you need to solve this problem :)
Firstly if the JSON data is in a local in your file system then you do not need fetch or axios
Why you did not use Axios or Fetch?
Axios or Fetch use to get or post data into the server. In our case, we read on the local folder file so that we use map().
Note: most important when using Axios and Fetch we need URL parameter compulsory
Now what you are to do is:
1. Firstly Import the file wherever you want to use:
import data from "../static/data/myData.json";
2. Now you want to map through that Json file:
<div>
{
data.map(myData, index)=>{
return <div key={myData.id}>
<h1>{myData.name}</h1>
<h3>{myData.email}</h3>
</div>
}
}
</div>
So that is how you want to handle this situation obviously structuring the content the way you desire not with h1's and h3's like I did
I am making a project where I want to integrate different FCM google-service.json,how to integrate in same file different project key I tried 2 projects this like but not working we need to add in our project.
{
"project_info": {
"project_number": "60554696754247",
"firebase_url": "https://project-1fca7.firebaseio.com",
"project_id": "project-1fca7",
"storage_bucket": "project-1fca7.appspot.com"
},
"client": [
{
"client_info": {
"mobilesdk_app_id": "xxxxxxxxxxxxx",
"android_client_info": {
"package_name": "com.company.project1"
}
},
"oauth_client": [
{
"client_id": "xxxxxxxxxxxxxxxx",
"client_type": 3
}
],
"api_key": [
{
"current_key": ""
}
],
"services": {
"analytics_service": {
"status": 1
},
"appinvite_service": {
"status": 1,
"other_platform_oauth_client": []
},
"ads_service": {
"status": 2
}
}
}
],
"project_info": {
"project_number": "13052496681",
"firebase_url": "https://project-2ebf8.firebaseio.com",
"project_id": "project-2ebf8",
"storage_bucket": "project-2ebf8.appspot.com"
},
"client": [
{
"client_info": {
"mobilesdk_app_id": "xxxxxxxxxxxxxxx",
"android_client_info": {
"package_name": "com.company.project2"
}
},
"oauth_client": [
{
"client_id": "xxxxxxxxxxxxxx",
"client_type": 3
}
],
"api_key": [
{
"current_key": "xxxxxxxxxxxxxxxx"
}
],
"services": {
"analytics_service": {
"status": 1
},
"appinvite_service": {
"status": 1,
"other_platform_oauth_client": []
},
"ads_service": {
"status": 2
}
}
}
],
"configuration_version": "1"
}
It's not clear exactly what your use case is, but it's worth noting that using the google-services.json file is totally optional and in your case you may want to skip it and configure your app manually.
The documentation here explains how the plugin processes the JSON file.
Basically the plugin creates a strings.xml file that looks like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<! -- Present in all applications -->
<string name="google_app_id" translatable="false">1:1035469437089:android:73a4fb8297b2cd4f</string>
<! -- Present in applications with the appropriate services configured -->
<string name="gcm_defaultSenderId" translatable="false">1035469437089</string>
<string name="default_web_client_id" translatable="false">337894902146-e4uksm38sne0bqrj6uvkbo4oiu4hvigl.apps.googleusercontent.com</string>
<string name="ga_trackingId" translatable="false">UA-65557217-3</string>
<string name="firebase_database_url" translatable="false">https://example-url.firebaseio.com</string>
<string name="google_api_key" translatable="false">AIzbSyCILMsOuUKwN3qhtxrPq7FFemDJUAXTyZ8</string>
<string name="google_crash_reporting_api_key" translatable="false">AIzbSyCILMsOuUKwN3qhtxrPq7FFemDJUAXTyZ8</string>
</resources>
Since you're talking about FCM, the relevant pieces are google_app_id, gcm_defaultSenderId, and google_api_key. If you create strings with those names in your application, Firebase will auto-initialize correctly.
If you want to use multiple apps, as you said, you'll need to manually initialize FirebaseApp like this:
FirebaseApp customApp = FirebaseApp.initializeApp(this,
new FirebaseOptions.Builder()
.setApplicationId(...)
.setApiKey(...)
.setGcmSenderId(...)
.build(),
"custom-app-name");
I just created a new ASP5 MVC6 project using visual studio 2015 "web application- No Authentication" templete project. I didn't make any changes to the project and I published the project on local and uploaded the published files to the host (gearhost.com) using Filezilla. But when I open my site it gives me this error:
The specified CGI application encountered an error and the server terminated the process.
My website address:
http://publish1.gear.host/
Here is what web.config contains:
<configuration>
<system.webServer>
<handlers>
<add name="httpplatformhandler" path="*" verb="*" modules="httpPlatformHandler" resourceType="Unspecified" />
</handlers>
<httpPlatform processPath="..\approot\web.cmd" arguments="" stdoutLogEnabled="false" stdoutLogFile="..\logs\stdout.log" startupTimeLimit="3600"></httpPlatform>
</system.webServer>
</configuration>
Here is what launchSettings.json contains:
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:26153/",
"sslPort": 0
}
},
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"Hosting:Environment": "Development"
}
},
"web": {
"commandName": "web",
"environmentVariables": {
"Hosting:Environment": "Development"
}
}
}
}
Here is what global.json contains:
{
"projects": [
"src"
],
"sdk": {
"version": "1.0.0-rc1-final"
},
"packages": "packages"
}
Here is what appsettings.json contains:
{
"Logging": {
"IncludeScopes": false,
"LogLevel": {
"Default": "Verbose",
"System": "Information",
"Microsoft": "Information"
}
}
}
Thanks..
We do not support .NET 5 or MVC 6 just yet as they are not in release (only beta/rc). We do however support all versions of .NET and MVC.
Few considerations:
Your host needs to have httpPlaformHandler module installed for this to work.
Do you know if you host supports ASP.NET Core?
Error seems to suggest that the handler was not able to serve the request properly. You can do stdoutLogEnabled ="true" in the web.config and see the actual reason for the failure in the log file. Could be because of permissions, EF not able to talk to DB server, could be the DNX process path is not found.