I have a question, about the Instagram Api oAuth. create a small api, which users allow to generate a instagram api token key. but, my problem is, when I log in with my account, the source works. But, when someone other with a different account want to lo in. the get this back:
{"error_message": "You are not a sandbox user of this client", "error_type": "OAuthForbiddenException", "code": 403}
I don't know, what the hell the problem is? maybe in the Valid redirect URIs? I have there the same URL like website url? Do I have to submit in the end of the url? something? I have read down the docu: instagram.com/ oAuth. I followed these steps:
first:
sign up to my developer account:
then register a new client:
website URL: mywebsitecom/token/
Valid redirect URIs: mywebsitecom/token/
the app should work so: user click on the button >> then it will be forward to the oauth >> after authorize the app >> the user will get the token key on the same page or site website/token/#access_token=1920579593.4ca8793.a66f6aa9d40243afa282735f707b58b3
how can i doing that? i dont know, where the problme is..
the app is with Disable implicit OAuth:
Here is my source:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Instagram API Access Token KEY Generator – by Lucas Gatsas</title>
<link rel="icon" type="image/png" href="images/favicon.png">
<meta name="description" content="Quickly generate an access token for Instagram to display your photos on your website.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="assets/js/javascript.modify.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css">
<script type="text/javascript">
(function(){$(function(){var n,t,o,c;return c=function(){return o()?($(document.body).addClass("token-received"),t()):$(document.body).addClass("no-token"),n()},o=function(){var n;return n=window.location.hash,!!(n.length&&n.indexOf("access_token")>-1)},t=function(){var n;return n=window.location.hash.split("#access_token=")[1],$(".instagram-access-token").val(n).on("click",function(){return $(this).select()})},n=function(){return Modernizr.svg?void 0:$(".logo").attr("src",$(".logo").data("backup-png"))},c()})}).call(this);
</script>
</head>
<body>
<div class="site-header-wrapper">
<header class="site-header" role="banner">
<img src="assets/img/Instagram-logo.png" style=" width 200px;
display contents;
margin 0 auto;
text-align center;
display -webkit-box;">
</header>
</div>
<div class="site-content-wrapper">
<div class="site-content" role="main">
<div class="pre-token">
<div class="token-button-wrapper">
Generate Token Key
</div>
<p>You'll be brought right back here and, if all went well, your Instagram Access Token will be ready for you. Copy and paste this access token into the correct field. Remember to keep your access token private and never paste it in a location where others might can access it.</p>
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<code>
https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token
</code>
<h1>Docu:</h1>
<p>Instagram Developers</p>
<p>oAuth2 - Authentication</p>
<p>oAuth2 - Authentication</p>
<h1>Links:</h1>
<p>oAuth V.2</p>
<div class="post-token">
<h2>It worked!</h2>
<p>Use this token in the appropriate field on your website or blog, and you should have a working Instagram widget.</p>
<div class="token-input-wrapper">
<input class="instagram-access-token" type="text" value="" size="50">
</div>
<p>Are you have any Question to the Api Token Key. Please feel free to contact me <a href="mailto:space#lucasgatsas.ch">Contact Me.</p>
</div>
</div>
</div>
<div class="site-footer-wrapper">
<footer class="site-footer">
<p>©.2017 by Lucas Gatsas</p>
</footer>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='scripts/jquery-1.11.1.min.js'><\/script>")</script>
<script type="text/javascript">
(function () { $(function () { var n, t, o, c; return c = function () { return o() ? ($(document.body).addClass("token-received"), t()) : $(document.body).addClass("no-token"), n() }, o = function () { var n; return n = window.location.hash, !!(n.length && n.indexOf("access_token") > -1) }, t = function () { var n; return n = window.location.hash.split("#access_token=")[1], $(".instagram-access-token").val(n).on("click", function () { return $(this).select() }) }, n = function () { return Modernizr.svg ? void 0 : $(".logo").attr("src", $(".logo").data("backup-png")) }, c() }) }).call(this);
</script>
</body>
</html>
Hope some one can give me tips?
Your client isn't accessible by every user. You need to invite the user you are testing with as a "Sandbox User".
Navigate to "Manage Clients" and click "Manage" for the client you wish to use. Choose the tab "Sandbox" and add the user you are testing with.
As you can see your own account is added by default by Instagram.
Best of luck
Related
I was trying to convert the basic viewer example code into a simple vue.js viewer app. When I try to run `npm run serve'(vue-cli).Things are getting rendered correctly and I am getting all the console logs in the console.
But even before the script getting executed the eslint-loader is showing Autodesk is not defined error. But I can see the viewer loaded the document in the background.I will attach a screenshot of it here.
Can someone correct me with the code for creating a basic viewer as a simple vue.js app?
/public/index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- Autodesk Forge Viewer files -->
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
/src/App.vue
<div id="forgeViewer"></div>
</template>
<script>
export default {
mounted(){
var viewer;
var options = {
env: 'AutodeskProduction',
api: 'derivativeV2', // for models uploaded to EMEA change this option to 'derivativeV2_EU'
getAccessToken: function(onTokenReady) {
var token = 'eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJzY29wZSI6WyJidWNrZXQ6Y3JlYXRlIiwiYnVja2V0OnJlYWQiLCJkYXRhOnJlYWQiLCJkYXRhOndyaXRlIl0sImNsaWVudF9pZCI6Ikp2Vk40bzdBQ0V0ZE81TVpnZ21QMk9WM1RoNFJnRW54IiwiYXVkIjoiaHR0cHM6Ly9hdXRvZGVzay5jb20vYXVkL2p3dGV4cDYwIiwianRpIjoiMXBQcVhxOFBZVVU0WmtpTURsaGpUSUxCM3I1UEpBWk9kbTY4dTY2R1ZjajhDY3VzYjB3VFVId0E3emZPVk5JRCIsImV4cCI6MTU4ODIzNDEwOX0.zmY_BFmoZgL4TbtSVyTWKlrFdImEKbQTUsfQxBjsPV4';
var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
onTokenReady(token, timeInSeconds);
}
};
Autodesk.Viewing.Initializer(options, function() {
var htmlDiv = document.getElementById('forgeViewer');
viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
var startedCode = viewer.start();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
console.log('Initialization complete, loading a model next...');
});
var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZmFjaWxpb25ld2NsaWVudGJ1Y2tldC9yYWNfYWR2YW5jZWRfc2FtcGxlX3Byb2plY3QucnZ0';
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
}
},
methods:{
onDocumentLoadSuccess:function(viewerDocument){
var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(viewerDocument, defaultModel);
viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, event=>{
})
},
onDocumentLoadFailure:function(){
console.error('Failed fetching Forge manifest');
}
}
}
</script>
<style>
</style>
You have to fix your Eslint errors one by one.
1.- Declare autodesk as a global in .eslintrc
"globals": {
"Autodesk": true
}
2.- Declare viewer
const viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
3.- Remove event listeners if not being used or just console.log(event)
Alternatively you can disable eslint but I'd never recommend that.
check out these working samples here:
https://github.com/dukedhx/forge-tools-hub/blob/master/components/Viewer.vue
https://github.com/alvpickmans/forge-vuer
In the main.js you can add:
Vue.prototype.$Autodesk = window.Autodesk;
And use it in the vue components like below:
this.$Autodesk
I am exploring WebRTC based solutions for video conferencing. Have found Jitsi to be one of the prominent candidate to look around from various frameworks.
Example Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<?php
$webroot = '/openemr-local';
?>
<script src="<?php echo $webroot ?>/jitsi-meet/libs/lib-jitsi-meet.min.js"></script>
<script src="<?php echo $webroot ?>/jitsi-meet/libs/jquery-2.1.1.min.js"></script>
<script src="<?php echo $webroot ?>/jitsi-meet/libs/strophe/strophe.js"></script>
<script src="<?php echo $webroot ?>/jitsi-meet/libs/strophe/strophe.disco.min.js?v=1"></script>
<script type="text/javascript" src="<?php echo $webroot ?>/jitsi-meet/example.js"></script>
</head>
<body>
<div class="container">
<div id="jitsi-test">
<span>Join Meeting Name</span><input type="text" id="meetingroom" name="meetingroom"/>
<button id="join" name="join" onclick="joinMeeting()">Join Me</button>
<button id="disconnect" name="disconnect" onclick="unload()">Disconnect</button>
</div>
<div id="video-container">
</div>
</div>
</body>
</html>
I am using example.js from Jitsi-meet Git Hub Example with below changes:
const options = {
hosts: {
domain: 'beta.meet.jit.si',
muc: 'conference.beta.meet.jit.si', // FIXME: use XEP-0030
focus: 'focus.beta.meet.jit.si',
},
bosh:'//beta.meet.jit.si/http-bind', // FIXME: use xep-0156 for that
// The name of client node advertised in XEP-0115 'c' stanza
clientNode: 'http://jitsi.org/jitsimeet'
};
Video gets launched on the browser bu I am not able to get
Connection Callback -- onConnectionSuccess never gets called. I did put
debugger there.
Getting error on console
Access to XMLHttpRequest at 'http://beta.meet.jit.si/http-bind' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
EDIT:
After adding https: to bosh:'//beta.meet.jit.si/http-bind'. The CORS error is gone and also onConnectionSuccess is working fine.
Still, Need some pointers on working Conference example.
I am trying to achieve something similar to below example:
jitsi-meet custom GUI
I'm following the uber ouath2 guide on this link.
I also have a registered uber app with an app id, client id, client secret, server token and a redirect URI:
http://localhost:8084/testapp
However, when I invoke https://login.uber.com/oauth/v2/authorize?client_id=[my_client_id]&response_type=code&redirect_uri=http://localhost:8084/testapp, instead of receiving a link with a token code (specified as a paremeter), I'm receiving the next html content:
<html class="no-js">
<!--<![endif]-->
<head>
<meta content="HTML Tidy for Java (vers. 26 sep 2004), see www.w3.org" name="generator"/>
<meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<title>Uber</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<link type="image/x-icon" href="https://d1a3f4spazzrp4.cloudfront.net/login/images/favicon.17677bc2cadb48697a3d2da2efc65d8c.ico" rel="icon"/>
<link href="https://d1a3f4spazzrp4.cloudfront.net/login/style-login/style.770406eec666b67f729c6f924b60ee7e.css" rel="stylesheet" type="text/css"/>
<link href="https://d1a3f4spazzrp4.cloudfront.net/uber-fonts/2.0.1/superfine.css" rel="stylesheet" type="text/css"/>
<link href="https://d1a3f4spazzrp4.cloudfront.net/uber-icons/3.13.0/uber-icons.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="content text--center soft--top">
<div class="push-gutter--sides push-small--top">
<div id="login-content">
<div id="fb-root"/>
<script type="text/javascript">window.fbAsyncInit = function() {
FB.init({
appId : '277064115737714',
xfbml : false,
version : 'v2.2' // good until Oct-2016
});
if (window.asyncUberFacebook) {
window.asyncUberFacebook();
}
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/en_US/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">window.phone_email_placeholder = 'Email or Phone Number';
window.locale = 'MX';</script>
<p class="primary-font primary-font--semibold background-line push--top push--bottom">
<span>Sign In</span>
</p>
<form novalidate="novalidate" id="login-form" class="form" method="post">
<input value="1469850228-01-me6IZ7r1uyi5eZuFlK3sjFsIsAmBEkXjr_sR7f1RCAw=" name="_csrf_token" type="hidden"/>
<input name="access_token" data-js="access-token" type="hidden"/>
<a data-js="facebook-connect" class="btn btn--full btn--facebook soft-small--sides" href="#">
<span class="push--ends flush">Continue with Facebook</span>
</a>
<p class="primary-font primary-font--semibold background-line push--top push--bottom">
<span>or use email</span>
</p>
<div id="input-container" class="form-group push-tiny--top flush--bottom">
<input id="email" value="" placeholder="Email Address" class="text-input square--bottom" name="email" type="email"/>
</div>
<div class="form-group push--bottom">
<input id="password" placeholder="Password" class="text-input square--top" name="password" type="password"/>
</div>
<button type="submit" class="btn btn--large btn--full">Sign In</button>
</form>
<hr id="signin-signup-separator" class="push--top push-small--bottom"/>
<p class="text--center push-small--bottom">
<a class="forgot-password" href="https://login.uber.com/forgot-password">Forgot Password</a>
</p>
<p class="text--center">
Don't have an account?
Sign Up
</p>
</div>
</div>
<script src="https://d1a3f4spazzrp4.cloudfront.net/login/scripts/analytics.7a14669194cf515d1963bd28ce5e8290.js" type="text/javascript"/>
<script type="text/javascript">Analytics.init({
services: {
tealium: {
account: 'uber',
profile: 'main',
env: 'prod',
geo: 'MX'
}
}
});</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"/>
<script src="https://d1a3f4spazzrp4.cloudfront.net/login/scripts/login.b8edef605ff990f6a792faf084868f5c.js" type="text/javascript"/>
<script src="https://ws.audioeye.com/ae.js" type="text/javascript"/>
<script type="text/javascript">Analytics.track('load', 'login.pageview');</script>
</div>
</body>
</html>
I have searched for this kind of issue and also I have readed a lot of posts about uber api and oauth with no effective solutions.
What I'm doing wrong?
Thanks in advance for your help.
Are you saying that instead of a web page loading when you click that link in a browser, you're getting back a raw HTML response, or are you saying that you're making a GET request to that URL in some way other than opening it in a browser?
I'm responding to myself (partially), I hope this could help others.
According with Uber ouath2 guide, you must to explicitly display to your users a page where they must to interact putting their email account and password. When they do clic in "Login", they are redirected to an authorization page and, finally, when they accept the information access agreement, uber redirect to your specified uri, putting at the end, the authorization code.
However, my scenario is different and maybe I need to put another question, since what I need is to access to my own information using a registered uber app on my own uber account and, I need to automate the oauth2 validation process. I mean, this need to be an automated process where I will not there to interact with the uber agreement information statements: I need in an automated way, send my client id and all required data and retrieve an authorization code.
I am in process of learning so kindly help me to do how the retrieval of table from mysql in ibm mobile first by just clicking an button from my html page. I have tried but not working help please
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>vikdemodb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!--application UI goes here-->
<div id="header">
<h1>database Demo</h1>
</div>
<div id="wrapper">
<input type="button" id="databasecon" value="click me to get data from db" /><br />
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
My main.js
function wlCommonInit(){
$('#databasecon').click(loadSQLRecords);
}
function loadSQLRecords(){
var invocationData = {
adapter : 'vikadap',
procedure : 'getstudinfo',
parameters : []
};
WL.Client.invokeProcedure(invocationData,{
onSuccess : loadSQLQuerySuccess,
onFailure : loadSQLQueryFailure
});
}
function loadSQLQuerySuccess(result){
window.alert("success");
console.log("Retrieve success" + result);
console.log(result.invocationResult.resultSet);
}
function loadSQLQueryFailure(result){
WL.Logger.error("Retrieve failure");
}
You have a button in your HTML:
<input type="button" id="databasecon" value="click me to get data from db" />
You handle this button in wlCommonInit():
$('#databasecon').click(loadSQLRecords);
In loadSQLRecords() you call an adapter procedure to retrieve data from the database. If this operation succeeds then it calls the loadSQLQuerySuccess callback function.
It is this function that you are supposed to handle the display of the response from the backend (your database). But what are you doing? You only print to the console the response. You do not handle at all, displaying it in the application - in the HTML.
So in your HTML, you need to prepare a place holder that you will append the result into. For example: <table id="mytable"></table>
Then you need to populate the table with the data...
So in loadSQLQuerySuccess, you could for example do the following... this is where you need to learn HTML and JavaScript to accomplish what YOU want it to look like:
function loadFeedsSuccess(result) {
if (result.invocationResult.resultSet.length > 0)
displayFeeds(result.invocationResult.resultSet);
else
loadFeedsFailure();
}
function loadFeedsFailure() {
alert ("failure");
}
function displayFeeds(result) {
for (var i = 0; i < result.length; i++) {
$("#mytable").append("<tr><td>" + result[i].firstName + "</td></tr>");
$("#mytable").append("<tr><td>" + result[i].lastName + "</td></tr>");
}
}
Note that you need to create your own code in the for loop to make it look like how you want it to look, and of course append your own properties from the database, instead of "firstName" and "lastName".
I read a lot about how to add stuff dynamically in jquery mobile, but I couldn't figure out how to add links.
Currently my solution looks like this:
Add a new Page - with id (id="list-1")
Creating a Link for it (href="#list-1")
This solution works perfectly in static pages, but I want to do it dynamically. I have tried a lot with page() and stuff like that but nothing helped me.
My questions are:
How do I add dynamic links & pages?
Did I choose the right way to use ids & anchors (#list-1) as links or is there another solution for jquery mobile?
Let me know if you need more information
To add dynamic links, I have found the easiest way is to just have an event listener waiting for a click on those links. This event listener then saves any parameters you want to pass into the next page you are visiting. You pass the parameters from the list element to the event listener by just specifying parameters within each "li" element.
(create the HTML for a list dynamically & store it into list-1-html)
$("div#my-page div[data-role=content]").html(list-1-html);
$("div.list-1 ul").listview();
$("div.list-1 ul").listview('refresh');
Then your event listener would look something like:
$('#my-page').delegate('li', 'click', function() {
passedParameter = $(this).get(0).getAttribute('passed-parameter');
});
When jQuery Mobile loads your next page, you'll probably want to load this page dynamically and you'll have this passedParameter variable available to you. To load the page dynamically, just add a listener that waits for JQM to try to load the page:
$('[data-role=page]').live('pageshow',function(e, ui){
page_name = e.target.id;
if (page_name == 'my-page-2'){
(do something with passedParameter)
}
});
This is the workflow I use with jQuery Mobile and it has been working just fine. I'm guessing in future releases, though, that they'll build in some kind of support for passing dynamic parameters to pages.
Any new enhancement to the DOM should be done before the page initializes. But by default JQM automatically initializes the page once the page is load in browser.
Hence first you need to set autoInitializePage property to false and then call initializePage() method after the new page and links are add to the document. Hope this helps.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).ready(function() {
//add a link.
$("#page1 div[data-role='content']").append('Next Page');
//add a page.
$('body').append(' <div data-role="page" id="page2" data-title="next page"><header data-role="header" class="header"> <h5>Page 2</h5></header><div data-role="content"><h3>Good Morning...</h3>Back</div><footer data-role="footer" data-position="fixed"><h5>© All rights reserved</h5></footer></div>');
});
window.onload = function() {
$.mobile.initializePage();
};
</script>
</head>
<body>
<div data-role="page" id="page1">
<header data-role="header" class="header">
<h5>jQuery Mobile</h5>
</header>
<div data-role="content">
<form method="get" action="" data-transition="slideup">
<label for="email">Email:</label>
<input type="email" name="email" id="email" value=""/>
</form>
</div>
<footer data-role="footer" data-position="fixed"><h5>© All rights reserved</h5></footer>
</div>
</body>
</html>