I have
a wordpress landing site/blog on example.com
a meteor app member area on members.example.com
This has worked very well so far - both technologies are very suited for each part.
I'd like to add some client-side functionality to the wordpress site that communicates with the meteor app. At the very least it should be able to retrieve log in status and username from the meteor app. Additionally I'd like to add some forms that interact with meteor data.
Is there a best practice for this?
I would suggest adding a REST API to your Meteor app which exposes the data you want via HTTP Methods. GET for things like getting the user login state or username. POST to create the forms you would like. I cannot describe how to do this any better than what was said on Meteorpedia, so I will just refer you there:
http://www.meteorpedia.com/read/REST_API
From there you would call the REST API from WordPress. I am by no means a WordPress expert but I do imagine there are probably a number of plugins and there is probably built in functionality in WordPress to call a REST API from the client side. If not, you could make AJAX calls using custom JavaScript or jQuery or whatnot.
I have a very similar setting for my app!
I also thought of ways to interact between my two sites. Basically, you would have to set up an access between Wordpress and your app's MongoDB database, and I am sorry to say, it does not seem very likely to happen in a near future...
Best thing you could have is actually going the other way (accessing Wordpress's MySQL through your Meteor app), using a package like meteor-mysql, and even that would only allow you to read the data in your wordpress database... but reactively! Wooo!
To my knowledge, that is the best "interaction" I can think of that you can get (without extensive hacking) so far.
Then if you are ready and willing to code your way through, you can implement calls to your meteor server using the meteor-ddp-php client in your WordPress site. Just make sure your Meteor methods are safe to call.
If you want to load your meteor application into you wordpress blog then you could just load it in as an iFrame.
To communicate with the meteor application just build some endpoints onto the meteor application which can be used on the wordpress blog. Because meteor is reactive the changes you do with the endpoints (Probably rest since is the simples option imo) will be directly shown in the iframe.
My 2 cents
Related
I'm working on a school project using vanilla HTML, CSS, and JS. When compete, we're expected to have the repo working via GitHub Pages. It's above and beyond the scope of the assignment, but I wanted to connect to a Firebase Firestore database.
The question is, how do I hide the API key/information, using only vanilla HTML, CSS, and JS (no frameworks), and have a working GitHub Pages demo for the instructor to mark?
I've looked at a number of websites and YouTube videos, but every tutorial I've come across is either using a framework or some stack of packages that would go against the 'rules' of the assignment. I can use a .env file, but to my understanding, because the repo is public the key would be public.
Any advice would be greatly appreciated.
The answer is .env files (sort of).
If you're building a frontend project and you're connecting the front end directly to your database, your credentials will be visible.
The correct way to handle keys is to put them in your backend API. Of course, when I asked this question, I wasn't "there yet".
Your backend API can have a public endpoint that listens to incoming requests. You don't need to include your database credentials in the request coming from your frontend app. It hits your backend api at its public endoint where your backend code then handles the incoming request. On your backend you have the connection to your database with the necessary credentials. This is how you are supposed to build it.
For beginners, you might want to try Google Firebase. With Firebase you can create Firebase Functions. With these, you can create a simplified API endpoint to target with your front-end requests. It triggers the Firebase Function to run, and inside this function, you can store your private keys/credentials. Because your Firebase Functions run on your own secure backend, the client never sees the keys.
If you're learning or familiar with Vue3, here's a good article to check out: https://www.bezkoder.com/vue-3-firebase/#more-9260
We have some scorm 1.2 content hosted in our server and would like to integrate in our website. I didn’t find any good article that explains how to do it right way. I found lot of articles/tutorials explaining various apis and events about Scorm 1.2, Scorm 2004 and TinCan but none about integrating content in a html page.
Are there any good javascript libraries (scorm players?) that actually reads imsmanifest.xml file and render content?
There are a lot of questions like this on StackOverflow. And the web in general.
Server side Recipe:
Serverside script to allow the upload of a zip or FTP/SFTP, scp etc...
Serverside script to Unzip a Zip file (optional)
Serverside script to parse the imsmanifest.xml (one to many content objects)
SQL or NOSQL DB to store data (optional)
You need to control any launch data, and parameters as well as thresholds defined in the imsmanifest.xml required to launch the content.
Client Side Recipe:
You probably will want a UI for login/user management and assignments
Shareable Content objects commonly run within IFRAMEs, popup windows, new tabs or windows. Determine how you want to launch them.
You'll need a JavaScript SCORM Runtime exposed "API" for 1.2. You'll need to read up on the CMI Object and its namespaces/rules. Don't worry, most the specification is optional.
You'll need to use AJAX to submit the student attempt when they call commit. You'll want to control this with a 'sync' call in cases where the student has closed their browser, or was navigated away from your site. Else, you'll lose their data.
You could get away with localStorage vs the server side storage of data depending on your goals.
General flow for your site is to wait for the student to choose an assignment. Load their CMI Object (clean/new or suspended/resumed). Then load the SCO, wait for them to make calls against your JavaScript API.
Be very careful about not round tripping your back end on get and set value requests. Use the commit to do that so your not spamming your backend.
I am at the stage where I am thinking of integrating a social login method into my site. Of course my first one will be the facebook login before moving onwards.
Basically my question is : Which language is best for this type of OAuth connection, and which is going to let me do everything I want?
This will encompass all OAuth connections in general eventually, but specifically Facebook for now.
From what I have read of the documentation, the JavaScript SDK allows you to login, and connect to the open graph API - which in turn will allow me to post / upload etc etc. This is also available in PHP.
From experience which is the more durable route to go?
PHP or JAVASCRIPT
The best and recommend way to authorize users is the JavaScript SDK (FB.login). No redirect needed (better usability), very easy to handle, no PHP needed (the new PHP SDK needs PHP 5.4+). Use PHP only for stuff that involves usage of the App Secret or Extended Access Tokens. And for cron jobs, obviously. You can even just forget about the PHP SDK and use your own CURL calls.
Btw, security is no problem, you should just activate "appsecret_proof" in the App Settings.
More information about appsecret_proof:
https://developers.facebook.com/docs/graph-api/securing-requests
http://www.devils-heaven.com/facebook-php-sdk-4-0-tutorial/
One more reason (and one of the most important ones) is the possibility to refresh Access Tokens (=User Sessions) easily without page refresh by using FB.getLoginStatus.
And another reason is that you need to upgrade to new PHP SDK versions on your own. The JavaScript SDK does not need any upgrades, in the lase few years you only had to change one or two parameters in some cases, the SDK gets downloaded from the Facebook servers.
Also, if you add Social Plugins, you need the JavaScript SDK anyway.
TL;DR PHP/both
I'd really recommend PHP. You'll want to store the login in database. If you do it via JS, you'll need to make an Ajax call to the server, which is not really that secure.
Having said that, they are targeted for different uses. JS is for frontend more, while PHP is for backend (db storage, checks, actual site login, etc). Using JS will let you generate the buttons on the fly, while using PHP you'll need to do some more coding.
Somehting else, the php library will get updated from time to time and you'll need to keep up after testing. JS also, but it's easier, since the code usually works.
If you only want one, use PHP. You can control what the code does and JS will not break your site since it's written by you. However, I'd recommend using both since you will probably want more than just simple login
Edit:
As facebook states, use PHP SDK: Usually this means you're developing with PHP for a Facebook Canvas app, building your own website, or adding server-side functionality to an app that already uses the Facebook SDK for JavaScript.
https://developers.facebook.com/docs/reference/php/4.0.0
The best route would be to use both, together. Some users might have javascript disabled or you might do something within your javascript code that will not work on some browsers. So as a fallback method you can use php api.
Going with only php would be solid and will work regardless of what the users client is, but you can make the user experience better with javascript.
Still, in most cases you'll end up having to use both.
I have just spent the afternoon playing with the JavaScript SDK for facebook and I have to admit I think this is going to be the best option for what I need.
If anyone else is reading this, it may not be perfect for you - but with the way my application has been built I think it is a perfect fit. Here is why :
My standard login system uses JavaScript to grab my form data, then validate, which then passes the validated data via AJAX to a PHP validation script. Which in turn returns a JSON response to the original AJAX call. If my call comes back with "ok" : true then we are good to go basically.
The way the facebook JavaScript SDK works is almost a perfect little jigsaw puzzle to bolt onto the system I am using. All I require is a little bit of profile data, to then keep a record of this user on my system. THIS is provided by facebook, then validated by myself.
However, other social network logins may not be as nice and simple to use as the facebook API, so I could end up changing my mind on the overall system. For now just using facebook, I think the JavaScript SDK is absolutely spot on, as it just gets the information for you to run through your own validation on site. As I said this is a perfect fit for my system however it may not be for yours.
I have following problem which I can not handle mysefl:
I am wondering how to maintain ID of the client across different subpages at the server site.
Let me explain my scenario in more detailed way:
I have a pages (simple html pages with just js scripts (bootstrap, jquery and so on, no ASP involved) and one SignalR hub on the server with broadcast function to all clients. (my application is monitoring system for a industrial device, and simple functionality for a hub is only needed).
Now I have to add ability to block changing several textboxes or select items on webpages until password is entered. And I wonder how to keep information that the user is logged in on server site.
I know that every page refresh or switching to a different page which uses the same hub gives the client new connectionID.
I've found solution with custom ConnectionIDFactory method but I dont how to implement it in my project since I dont have global.asax file.
Any sugestion how to get solution for this scenario?
Have a nice day :)
I would suggest using a framework like Angularjs on your front end. You can then specify the routing within Angular and load the screens you need but at the same time ensure that your connection to the hub isn't being interrupted by moving to a different page. Here is an example of how angular achieves this. Hope this helps. It also ensures that you don't have to worry about trying to shoehorn the factory into your app.
I need to make a dead simple web application. Users hit a static HTML page and enter some basic info (name, and comment). When they hit submit, I want to store this info in either a CSV file or a sqlite on the hosting server. I know all of this is possible with django/python or ror/ruby but is there anyway to do this with just JavaScript?
Thanks in advance..
There's few ways to handle this, using just javascript. Which is to use a hosted Backend-as-a-Service.
You would need to make API calls on the client end, and will be able to connect to it without having to rely on a backend technology.
Most of these technologies are built for mobile, but you can still use it to build it on your static HTML pages. (cross browser issues may vary).
Here are some:
Firebase (https://www.firebase.com/docs/web-quickstart.html)
Parse (https://parse.com/docs/js_guide)
There's more out there if you google Backend as a service.
If you are looking for something more simple, just need to take information and store it (like a form), then I would suggest looking at these services:
Wufoo (http://www.wufoo.com/)
jotform (http://www.jotform.com/)
Hope it helps!