The ultimate goal: display our corporate account's Instagram media onto our corporate website. Below, I will show everything that I have so far.
I have the Instagram basic permissions approved:
I have the Facebook app authenticated with the Instagram account with the appropriate permissions.
Questions:
If I'm using the Instagram Basic Display API, do I still need a website platform with the SDK implemented?
Do I need Facebook Login if I'm just using one account to display media on our corporate website?
The answers: YES and YES...
However, your ultimate goal is 8 lines of Javascript and 4 lines of CSS away if you allow some out of the box thinking. It is not the most beautiful solution and it has limited features, but it is really simple. Just look at the example and installation instructions.
The solution I came up with is actually quite simple: fully split the server-side and client-side part and use XML(RSS) as an intermediate. For the server-side part I used Zapier (for free). Zapier authenticates with Instagram and gets the required long lived access token. Using this token it listens to the users feed on a five minute interval. When it discovers a new post/image, it adds this to a Zapier RSS feed that has nothing to do with Instagram. Zapier takes care of the CORS policy on the RSS feed. Therefore, we only have to visualize the RSS feed. This requires just a few lines of Javascript and a touch of CSS.
<p id="instafeed"></p>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$.get('https://zapier.com/engine/rss/2502510/jhvanderschee', function (data) {
$(data).find("item").each(function () { // or "item" or whatever suits your feed
var el = $(this);
var title = el.find("title").text();
var link = el.find("link").text();
var image = el.find("enclosure").attr('url');
var description = el.find("description").text();
$('#instafeed').append('<img src="'+encodeURI(image)+'" alt="'+title.replace('Caption: ','')+'" />');
});
});
</script>
<style>
#instafeed {overflow: auto; margin-left: -1%;}
#instafeed a {float: left; display: block; margin: 0 0 1% 1%; width: 19%;}
#instafeed a img {width: 100%;}
</style>
Source: Instafeed.js alternative (for Instagram)
Related
I'm trying to build a website which has some private pages. And my goal is it that the users have the option to download PDFs from there, but only if they're authenticated. Now my question is, where should I store the PDF files, so that it can only be accessed by the authenticated users and how should I serve/access them. And all that with nextjs, if possible (I use next-auth for authentication).
It's a pretty general question and I don't need specific answer for it but a general way which I should follow or thing that I should look into would be awesome.
I'm kinda new to web development, so sorry if the question is dumb.
Authentication
I think you can combine the power of JavaScript and CSS to achieve this.
After authenticating the user with your desired framework, then navigate inside the component that will display login or sign up, and set up react hook state as this:
const [isAuthenticated, setIsAuthenticated] = useState(false);
Now the token generated by the authentication framework must have been saved. Use if else control to join them as this:
const user = Auth.user({email:abc#gmail.com})
let message
if (user){
setIsAuthenticated(true);
Message = <h3>Welcome {user.username}</h3>
}else {
router.push('/')
}
.
.
.
return(
<div className={isAuthenticated ? 'display': ''}>
<button>download link</button>
</div>
)
Inside the global CSS file,
Add the following lines
.display {
display:none;
}
This should do it.
It will only display the DOM to only authenticated users.
How can I play a specific Youtube Video on my Google Hub via Google Actions? I know I can use a Basic Card to display images and text and even a link (although that link does not show up on the HUB)
I specifically want to be able to trigger or to play a youtube video on my Google Hub.
Actions are not able to start playing video content. Media responses are only for audio.
I have a similar need. After a chat with an action on google, I want to play user requested youtube videos (chains-of) on a local "big screen" (TV-like / PC).
A workaround solution could be:
you realize an action that select one or more videos.
The action act also as a server for a client described here below
The action communicate (SSE, websocket, HTTP...) with a client browser page containing a javascript small program that dynamically visualize the video (id sent via SSE client-server communication)
Here below the rough js script (I'm not a web developer); that just gives you the idea:
<script language="javascript">
function loadVideoWithId(id) {
const tvEmbedMode = "embed/" //"tv#/watch?v="
const url = `https://www.youtube.com/embed/${id}?fs=1&autoplay=1&loop=1` //
const iframe = `<iframe src="${url}" width="1600" height="900" allowFullScreen="allowFullScreen" frameBorder="0" />`
document.write(iframe)
}
loadVideoWithId('hHW1oY26kxQ')
</script>
I've created Bot using Microsoft's bot services ( Bot framework) using nodeJs.
Its working fine when for plain text, but when i tried to return HTML table using below method
eg.
var tableHTML = '<table style="padding:20px;border:1px solid black; border-collapse: collapse;" border=1 border-collapse=collapse><tr style="background-color:#c6c6c6"><th>Countries</th><th>Capitals</th><th>Population</th><th>Language</th></tr><tr><td>USA</td><td> Washington D.C.</td><td>309 million</td><td>English</td></tr><tr><td>Sweden</td><td>Stockholm</td><td>9 million</td><td>Swedish</td></tr></table>';
var message = {
type: 'message',
textFormat: 'xml',
text: tableHTML
};
session.send(message);
It worked for me on skype for business desktop APP , but not working on skype for business mobile APP ( it returns nothing )
Currently i'm facing issue while rending HTML table for mobile devices on skype for business
Skype for business mobile app supports HTML in bot ??
Please provide if anyone have solution for this
Thanks
Skype for business mobile clients do not support HTML or markdown formats. This is a pain point for many customers I encourage you to reach out to them via their uservoice and request this feature.
Format rendering will be channel-specific and you need to determine what formats a channel supports ahead of time.
I'm building a SaaS application using the MEAN stack and have a few questions regarding how best to secure registration forms. Express.js is what I'm using to generate the endpoints (via angular-fullstack)
I have "tenants" that register using a registration form (name, email, password, etc.). This REST API is currently unsecured (POST /tenants).
My questions are:
Should I somehow secure this POST? If so, how?
If I'm not to secure the POST /tenants endpoint, how do I avoid someone writing a script to just create a whole bunch of tenants and attack my application?
I want to use some sort of confirmation email, but is that good practice when registering a new tenant?
I'd love to get some feedback here on how best to proceed.
Thanks!
reCAPTCHA is the solution I chose to solve this same problem.
Quoting from Google's developer site on reCAPTCHA an overview of integrating reCAPTCHA into a site follow. It's worth noting Google's reCAPTCHA codelab also includes an example for Java.
Overview
To start using reCAPTCHA, you need to sign up for an API key pair
for your site. The key pair consists of a site key and secret key. The
site key is used to invoke reCAPTCHA service on your site or mobile
application. The secret key authorizes communication between your
application backend and the reCAPTCHA server to verify the user's
response. The secret key needs to be kept safe for security
purposes.
First, choose the type of reCAPTCHA and then fill in authorized
domains or package names. After you accept our terms of service,
you can click Register button to get new API key pair.
Now please take the following steps to add reCAPTCHA to your site or
mobile application:
Choose the client side integration:
reCAPTCHA v3
reCAPTCHA v2
Checkbox
Invisible
Android
Verifying the user's response
And being a Python fan, here's an example I followed to implement this solution in Django (ref: Google's codelab example):
1. Getting set up
Install and verify web server
This codelab can either be run locally or through the gcloud shell in
Google Cloud Platform. To get started with the gcloud shell go to
https://console.cloud.google.com/appengine/start.
Download the Code
Clone all the code for this codelab:
git clone https://github.com/googlecodelabs/recaptcha-codelab.git
For Python:
cd recaptcha-codelab/phase1-python
python server.py
In the web
browser, go to http://localhost:8080 to see the example UI without
reCAPTCHA integrated.
2. Registering with the reCAPTCHA Admin Console
... We recommend if you have
time that you follow through and create your own registration in the
admin console. Before you use reCAPTCHA in development or production
you will need to do this step.
First go to The reCAPTCHA Admin Site.
Choose ‘Invisible reCAPTCHA' as the type of captcha.
Fill in the list of domains you wish to show your captcha. The reCAPTCHA site
key you create will only work on these domains. Save the site key and
secret key for the later stages.
3. Add Invisible reCAPTCHA to the frontend - Python
Let's update the frontend to call Invisible reCAPTCHA with your
favorite text editor.
First let's add a script tag to the html element in
feedback.html.
feedback.html
<html>
<head>
<title>Suggestion page</title>
<script src='https://www.google.com/recaptcha/api.js'></script>
Now update the attributes to the submit button. Add
class='g-recaptcha' data-sitekey="YOUR SITE KEY" and add a
data-callback.
feedback.html
<button class="g-recaptcha"
data-sitekey="6LfeHx4UAAAAAAKUx5rO5nfKMtc9-syDTdFLftnm"
data-callback="onSubmit">Submit</button>
The full file should be:
feedback.html
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Suggestion page</title>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function onSubmit() {
document.getElementById("demo-form").submit();
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
.status-message {
background-color: #5ff;
margin-bottom: 10px;
text-align: center;
}
textarea {
margin: 10px 0;
resize: none;
}
</style>
</head>
<body>
<h3>Give us feedback on our webpage!</h3>
<div class="status-message">%s</div>
<form id="demo-form" action="/feedback" method="POST">
Your comment <br><textarea name="feedback" cols="50" rows="5"></textarea><br>
<!-- Replace this with your site key -->
<button class="g-recaptcha"
data-sitekey="6LfeHx4UAAAAAAKUx5rO5nfKMtc9-syDTdFLftnm"
data-callback="onSubmit">Submit</button>
</form>
</body>
</html>
3. Validate the Invisible reCAPTCHA on the Server - Python
In "Registering with the reCAPTCHA Admin Console" we created a new
site key. As part of that process a site secret was created. The site
secret is necessary to validate the CAPTCHA solution. For the purposes
of this code lab you can use the default keys provided. These will
only work on localhost.
The validation of the reCAPTCHA token is done by sending a POST
request to https://www.google.com/recaptcha/api/siteverify. The
details are in Verifying the user's response.
To validate the reCAPTCHA token, let's update the server. First we
need to add the site secret and site verify constants.
server.py
SITE_VERIFY_URL = 'https://www.google.com/recaptcha/api/siteverify'
SITE_SECRET = '6LfeHx4UAAAAAFWXGh_xcL0B8vVcXnhn9q_SnQ1b'
RECAPTCHA_RESPONSE_PARAM = 'g-recaptcha-response'
Then we need to update our POST handler to verify the token.
server.py
def do_POST(self):
self.set_headers();
post_body = parse_qs(self.rfile.read(int(self.headers['Content-Length'])))
success = False
if RECAPTCHA_RESPONSE_PARAM in post_body:
token = post_body[RECAPTCHA_RESPONSE_PARAM][0]
resp = urllib.urlopen(
SITE_VERIFY_URL, urllib.urlencode(
{'secret': SITE_SECRET, 'response': token}, True)).read()
if json.loads(resp).get("success"):
success = True
if success:
message = 'Thanks for the feedback!'
else:
message = 'There was an error.'
self.wfile.write(open(curdir + sep + 'feedback.html').read() % message)
The final file should look like this:
server.py
import json
import urllib
from os import curdir, sep
from urlparse import parse_qs
from BaseHTTPServer import BaseHTTPRequestHandler, HTTPServer
SITE_VERIFY_URL = 'https://www.google.com/recaptcha/api/siteverify'
SITE_SECRET = '6LfeHx4UAAAAAFWXGh_xcL0B8vVcXnhn9q_SnQ1b'
RECAPTCHA_RESPONSE_PARAM = 'g-recaptcha-response'
class Handler(BaseHTTPRequestHandler):
def set_headers(self):
self.send_response(200)
self.send_header('Content-type', 'text/html')
self.end_headers()
def do_GET(self):
self.set_headers();
self.wfile.write(open(curdir + sep + 'feedback.html').read() % '')
def do_POST(self):
self.set_headers();
post_body = parse_qs(self.rfile.read(int(self.headers['Content-Length'])))
success = False
if RECAPTCHA_RESPONSE_PARAM in post_body:
token = post_body[RECAPTCHA_RESPONSE_PARAM][0]
resp = urllib.urlopen(
SITE_VERIFY_URL, urllib.urlencode(
{'secret': SITE_SECRET, 'response': token}, True)).read()
if json.loads(resp).get("success"):
success = True
if success:
message = 'Thanks for the feedback!'
else:
message = 'There was an error.'
self.wfile.write(open(curdir + sep + 'feedback.html').read() % message)
if __name__ == '__main__':
httpd = HTTPServer(('', 8080), Handler)
httpd.serve_forever()
You're all done! Now reload the server and give it a try. The
completed version can be found in final-python/server.py. You now have
a basic integration with reCAPTCHA to protect your form. In the
background, we are verifying the user and will sometimes show a
reCAPTCHA challenge to make sure that your website is protected from
abuse. More details and options can be found on our developer site.
Please note: I am an independant software developer with no affiliation with Google.
You should review the Open Web Application Security Project (OWASP) website and their Top 10 vulnerabilities thoroughly. There's a lot of information there. I also recommend abiding by their cheat sheets. This resource is a helpful place to get started. Web security is complex and requires you to be comprehensive in your protection scheme.
I have a Home screen with login button. When ever user clicks the Login button login view must open in dialog(popUp window). Here the twist is Home Screen and Login Screen are two different apps in two sub domains.
So I have to open Login View of auth.sample.com in dialog(PopUp window) from my.sample.com app.
Sorry for the bad English. Please see the code below:
<p>
<button type="submit" name="PopupLoginbutton" id = "PopupLoginbutton" value="Popbutton">Login</button>
</p>
<div id="dialog" title="Login" style="overflow: hidden;">
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
open: function (event, ui) {
$(this).load("http://auth.sample.com/");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#PopupLoginbutton').click(function () {
$('#dialog').dialog('open');
});
});
</script>
Views can only be accessed if they are in the current MVC3 project. If all you want to do is show the login screen, you should just show the popup using the full URL (http://my.sample.com/login).
If you want to pass information to the login app, then you would have to use a form and POST/GET to the full URL.
If I understand your position correctly, you want to provide access to content or an area of your site, but only if users are logged in. Are you looking to provide log in capabilities to your new site through the existing auth of your subdomain?
Unfortunately this won't work as you describe, if you're using common methods for authentication and authorization. Logging into a different sub domain isn't going to get you where you're trying to go. I can't log into my bank and then check my email.
You can POST wherever you like or even use JS to load content from other sites/domains (if the end-users permissions/config allow), but your token in the browser to represent a logged in user won't carry over from one domain to the next.
There are several approaches, here are a couple of common ones:
Create a custom MembershipProvider and RoleProvider. These would allow you to use the server-side logic you already have to your access your authentication service.
Configure your new site to use the same membership provider (and database) that the subdomain is using.
Build a web service and tokenization strategy to expose identity from your existing subdomain, and incorporate that into your site.
Number 2 is the easiest, if you own the subdomain. Number 1 isn't too hard if you can wrap the calls to the membership service. If your subdomain is third party, however, and it locks up the user database then you won't have much luck here, unless they provide a means to wrap their login services.
Hope this helps some.
Cheers.