Using Netlify's hosted Identity service with self-hosted Netlify CMS - netlify

I am hosting my website on my own server, and using Netlify CMS. However, I would still like to use Netlify's hosted Identity and Git Gateway services, instead of running my own.

Yes, that is possible. First, you will need to set up your site in Netlify, and make sure you have the Identity and Git Gateway services turned on and configured. Follow the regular "Add to Your Site" setup for Netlify CMS, but make these changes:
CMS config.yml changes
The backend section of your config should contain the following three keys. Replace my-site.netlify.com with your Netlify site URL.
backend:
name: git-gateway
identity_url: "https://my-site.netlify.com/.netlify/identity"
gateway_url: "https://my-site.netlify.com/.netlify/git"
CMS index.html changes
Assuming you already have the Netlify Identity script added (netlify-identity-widget.js), remove it and use the netlify-identity.js script from the same package instead. This script will not initialize automatically, which allows us to set our own parameters. Do this on both your admin page and your site homepage.
<script src="https://identity.netlify.com/v1/netlify-identity.js"></script>
Next, add this script right below it, on both the admin page and the home page. Again, replace my-netlify-site.com with your Netlify site URL.
<script>
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", function () {
netlifyIdentity.init({
APIUrl: "https://my-site.netlify.com/.netlify/identity"
});
});
} else {
netlifyIdentity.init({
APIUrl: "https://my-site.netlify.com/.netlify/identity"
});
}
</script>

Related

FB.ui Share popup on Azure Hosted Application: The domain of this URL isn't included in the app's domains

I have an application I have been developing which is to make use of the Facebook Developers FB.ui share popup:
FB.ui({
display: 'popup',
method: 'share',
href: imgUrl,
quote: imgComment,
}, function (response) { });
This seems to work perfectly when I am developing on localhost:5001 (I have set the following in my FB Dev Application settings):
However, as soon as I publish my application to my Azure hosted site (on the other address I have marked out above) I get the following error when trying to load the FB.ui Share popup:
The URL in the Valid OAuth Redirects URIs matches exactly the location of my Application online on Azure:
so cannot figure out why I am seeing this error when trying to load the Share popup.
The URL in the Valid OAuth Redirects URIs matches exactly the location of my Application online on Azure
The error message wasn't talking about that field, but about the App Domains field.
You find that under Settings -> Basic.

ServiceStack Metadata Redirect behind a Azure App Gateway not working

My api is hosted on Azure as an App Service with an Azure App Gateway in front of that.
I have set the webhosturl in my startup and that is working as when I view the metadata page, i see the links pointing to the correct location. And those links work. However when I navigate to the base url for my api, it redirects me to the app service url.
Here is a snippet of my startup...
SetConfig(new HostConfig
{
WebHostUrl = "https://api-dev.hsawaknow.net/link/",
DefaultRedirectPath = "/metadata",
DebugMode = AppSettings.Get(nameof(HostConfig.DebugMode), false)
});
Please see the links below and see the differences.
https://api-dev.hsawaknow.net/link/metadata
vs
https://api-dev.hsawaknow.net/link/
You will get an https error as I am using a self signed cert, until I get this figured out. I have seen other posts that say to make this change and that it works, but not for me.
Please help!
I have this figured out. There were a couple things that I had to do.
First thing I had to do was setup the forwarded headers middleware to recognize and process the correct headers coming from the Azure Application Gateway.
services.Configure<ForwardedHeadersOptions>(options =>
{
options.ForwardedHostHeaderName = "X-ORIGINAL-HOST";
options.ForwardedHeaders = ForwardedHeaders.XForwardedHost | ForwardedHeaders.XForwardedProto | ForwardedHeaders.XForwardedFor;
});
This allowed my site to work with links to the correct pages without setting the WebHostUrl. The only caveat about using the Azure App Gateway is that it uses X-ORIGINAL-HOST instead of the standard X-FORWARDED-HOST.
Next, I had to set the DefaultRedirectPath on the HostConfig dynamically based on settings in appsettings.json. In the case of the Azure App Gateway, my public url was https://api-dev.hsawaknow.net/link/, I had to set the redirect to /link/metadata, instead of just metadata, because of how the host header was getting set in the previous step.
It took a few tries, but this configuration works well, when hosting on Azure App Services fronted with an Azure Application Gateway.
Kudos to the mythz for the quick response, which pointed me in the right direction.
Enable the Request Logger so you can see what requests ServiceStack receives.
Does it work when not specifying a WebHostUrl?

How can I secure simple HTML files using Azure AD?

I have a legacy static website that is just plain HTML and simple JavaScript for UI effects. There is no server side code, api, config files or anything in this website - just raw HTML files, CSS, pictures, etc.
The website will not be hosted in Azure. It will be on a local IIS server. If I pull the web site into Visual Studio, the "Configure Azure AD Authentication" wizard shows:
An incompatible authentication configuration was found in this project
().
How can I secure simple HTML files using Azure AD?
The Visual Studio "Configure Azure AD Authentication" wizard is intended for ASP.Net Web Apps and Web APIs.
In your case, what you are building is considered a "Single Page Application" or SPA. Even though you might have multiple pages, this term also applies to client side only web apps with no backend code.
For this, you should follow the Azure AD Javascript Single Page Application sample.
The gist of it is that you should us ADAL.js like shown in this sample's app.js, along the lines of:
// Configure ADAL
window.config = {
instance: 'https://login.microsoftonline.com/',
tenant: '[Enter your tenant here, e.g. contoso.onmicrosoft.com]',
clientId: '[Enter your client_id here, e.g. g075edef-0efa-453b-997b-de1337c29185]',
postLogoutRedirectUri: window.location.origin,
cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
};
var authContext = new AuthenticationContext(config);
// Check For & Handle Redirect From AAD After Login
var isCallback = authContext.isCallback(window.location.hash);
authContext.handleWindowCallback();
$errorMessage.html(authContext.getLoginError());
if (isCallback && !authContext.getLoginError()) {
window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
}
// Check Login Status, Update UI
var user = authContext.getCachedUser();
if (user) {
//Do UI for authenticated user
} else {
//Show UI for unauthenticated user
}
// Register NavBar Click Handlers
$signOutButton.click(function () {
authContext.logOut();
});
$signInButton.click(function () {
authContext.login();
});
Note: There's also a Angular SPA sample.
The solution posted by Saca pointed me in the right direction, but adding the JS to every page was not a valid solution for me. There were thousands of HTML files, lots with no common JS file I could tack that ADAL code into. I would have had to find a way to insert that JS on all those pages.
My first solution was simply creating a normal .NET MVC app with the proper auth configured. Then I simply loaded this legacy content via an iFrame. This worked but was limiting for the users.
As Fei Xue mentioned in another comment, the next solution involved scrapping the iFrame but routing all requests for static files through a controller. Using this as a reference for understanding that: https://weblogs.asp.net/jongalloway/asp-net-mvc-routing-intercepting-file-requests-like-index-html-and-what-it-teaches-about-how-routing-works
The above solutions worked. However, eventually this app ended up as an Azure App Service and I simply turned on authentication at the app service level with just the pure html files.

web notification on azure blob static website

I have a static website using azure storage:
https://helloweb.blob.core.windows.net/content/index.html
What is the domain I need to configure at onesiganl app settings:
Site URL : https://helloweb.blob.core.windows.net
Default Notification Icon URL: https://helloweb.blob.core.windows.net/content/icon.png
My manifest.json:
{
"name": "Hello Web",
"short_name": "Helloweb",
"start_url": "/content/index.html",
"display": "standalone",
"gcm_sender_id": "482941778795"
}
I can't see any user at onesignal users page.
According to onesignal document mentioned that OneSignalSDKWorker.js & OneSignalSDKUpdaterWorker.js should be served from the top-level root.
In the Azure storage, we are not able to set the blob in the top-level root. The blobs require a container.
Upload the files to the top-level root of your site directory. The following URLs should be publicly accessible:
• https://yoursite.com/manifest.json
• https://yoursite.com/OneSignalSDKWorker.js
• https://yoursite.com/OneSignalSDKUpdaterWorker.js
OneSignalSDKWorker.js & OneSignalSDKUpdaterWorker.js
• These files should not be renamed and the files should be served from the top-level root
From my experience ,it is not a good choice that put the website in the Azure storage. We could use azure WebApp service to do that easily. I do a test for it. It works correctly.
The following is my detail steps:
1.Create WebApp from the Azure portal
2.Configure OnSignal settings
3.Download the Web Push SDK and follow the tutorials to edit the manifest file.
4.Add an index file and just need to replace the "YOUR APP ID"
<head>
<link rel="manifest" href="/manifest.json">
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
appId: "YOUR_APP_ID",
autoRegister: false,
notifyButton: {
enable: true /* Set to false to hide */
}
}]);
</script>
</head>
5.Upload the code into WebApp using Kudu (https://yoursite.scm.azurewebsite.net/).We can drag files into the folder directly. More deploy please refer to official document.
From the Firefox browser visit https://yoursite.azurewebsite.net/index.html. And we need to set permission to set the message popup.
Check from [All User] we will see the subscribed user info

Node.js Heroku Facebook Developer

I have managed to successfully implement a 'log in using Facebook' button in to my website/heroku app, it works fine when used locally with the site URL and App Domain set to localhost:8080 within the app settings of the Facebook development page.
I have now tried to push the app to heroku to go live, I have changed the Site URL and App Domain to myapp.herokuapp.com, I have set my heroku config using:
heroku config:set FACEBOOK_APP_ID=133333333463066 \ FACEBOOK_SECRET=a7244e333333333a7a2bf9492a6089a0but whenI attempt to use the button I receive this response:
Given URL is not permitted by the Application configuration: One or
more of the given URLs is not permitted by the App's settings. It must
match the Website URL or Canvas URL, or the domain must be a subdomain
of one of the App's domains.
The issue was that I was using:
module.exports = {
'facebookAuth' : {
'clientID' : '663072463821834', // your App ID
'clientSecret' : 'fb87ad1ac64364e3bf42c95766a50e08', // your App Secret
'callbackURL' : 'http://infinite-scrubland-4586.herokuapp.com/auth/facebook/callback'
}
to set my config and I hadn't updated my callbackURL with the appropriate suffix of /auth/facebook/callback.

Resources