I am using keycloakjs version 10.0.2 and my keycloak server is of version 10.0.2, I am not able to authorize user in keycloakjs, browser console gets the following error, Please give me some idea on where I am going wrong :
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'appendChild')
at setupCheckLoginIframe (keycloak.js:1219:27)
at processInit (keycloak.js:313:28)
Sample code :
<html><head>
<script src="http://localhost:81/auth/js/keycloak.js" type="text/javascript"></script>
<script type="text/javascript">
const keycloak = Keycloak({
"realm": "test",
"auth-server-url": "http://localhost:8080/auth",
"ssl-required": "external",
"resource": "account",
"public-client": true,
"confidential-port": 0,
"url": 'http://localhost:8080/auth',
"clientId": 'account',
"enable-cors": true
});
const loadData = () => {
console.log(keycloak.subject);
if (keycloak.idToken) {
document.location.href = "?user="+keycloak.idTokenParsed.preferred_username;
console.log('IDToken');
console.log(keycloak.idTokenParsed.preferred_username);
console.log(keycloak.idTokenParsed.email);
console.log(keycloak.idTokenParsed.name);
console.log(keycloak.idTokenParsed.given_name);
console.log(keycloak.idTokenParsed.family_name);
} else {
keycloak.loadUserProfile(function() {
console.log('Account Service');
console.log(keycloak.profile.username);
console.log(keycloak.profile.email);
console.log(keycloak.profile.firstName + ' ' + keycloak.profile.lastName);
console.log(keycloak.profile.firstName);
console.log(keycloak.profile.lastName);
}, function() {
console.log('Failed to retrieve user details. Please enable claims or account role');
});
}
};
const loadFailure = () => {
console.log('Failed to load data. Check console log');
};
const reloadData = () => {
keycloak.updateToken(10)
.success(loadData)
.error(() => {
console.log('Failed to load data. User is logged out.');
});
}
keycloak.init({ onLoad: 'login-required' }).success(reloadData);
</script>
</head>
<body>
</body>
</html>
Please help
Regards
Kris
On modifying the line
keycloak.init({ onLoad: 'login-required' }).success(reloadData);
to
keycloakAuth.init({onLoad: 'login-required', checkLoginIframe: false}).success(reloadData);
solved this issue
Related
i'm using freeswitch 1.6 and following cookbok to implement webrtc. for this i download sip.js#0.7.0 too. and have created call.html, call.js and answer.html, answer.js pages. my call.html including js is
<html>
<body>
<button id="startCall">Start Call</button>
<button id="endCall">End Call</button>
<br/>
<video id="remoteVideo"></video>
<br/>
<video id="localVideo" muted="muted" width="128px" height="96px"></video>
<!--<script src="js/sip-0.7.0.min.js"></script>-->
<!--<script src="call.js"></script>-->
</body>
<HEAD>
<script src="js/sip-0.7.0.min.js"></script>
<script>
var session;
console.log('hiiiiiiiiiiii')
var endButton = document.getElementById('endCall');
endButton.addEventListener("click", function () {
session.bye();
alert("Call Ended");
}, false);
console.log('hiiiii2')
var userAgent = new SIP.UA({
uri: 'sip:anonymous#gmaruzz.org',
wsServers: ["ws://call.sia.co.in:5066"],
authorizationUser: 'anonymous',
password: 'welcome'
});
console.log('hiiii3')
var startButton = document.getElementById('startCall');
startButton.addEventListener("click", function () {
session =userAgent.invite('sip:1010#139.59.17.63', options);
alert("Call Started");
}, false);
console.log('hiiii4')
var options = {
media: {
constraints: {
audio: true,
video: true
},
render: {
remote:document.getElementById('remoteVideo'),
local: document.getElementById('localVideo')
}
}
};
</script>
</HEAD>
</html>
please correct me where i'm going wrong. Thanks in advance.
you must put the wsServers in transportOptions like :
var userAgent = new SIP.UA({
uri: 'sip:anonymous#gmaruzz.org'
transportOptions: {
wsServers: "ws://call.sia.co.in:5066"
},
authorizationUser: 'anonymous',
password: 'welcome'
I use jqgrid, when i add a row, i want push a file on the server.
I have read many many post, but i don't find a working example.
Many example don't work from jquery 1.5.
I found people who council:
http://www.jainaewen.com/files/javascript/jquery/iframe-post-form.html#api
http://malsup.com/jquery/form/#file-upload
But, i don't knows howto use this with jqgrid.
Someone could give me a complete example of a solution to upload a file with jqgrid?
Thank,
Well, i have find:
<script type="text/javascript" src="/static/jqueryform/jquery.form.js"></script>
<script type="text/javascript"> $(function(){
$("#citype").jqGrid({ url:"/api/citype/getdata",
datatype:'json',
mtype:'POST',
colNames:['No', 'Name', 'Icon'],
colModel :[
{ name:'id',
index:'id',
width:55,
editable:false,
key:true,
hidden:true
},
{
name:'name',
index:'name',
width:55,
editable:true
},
{
name:'icon',
index:'icon',
edittype:'file',
width:80,
align:'right',
editable:true},
],
pager:'#pager',
rowNum:10,
rowList:[10,20,30],
sortname:'citype_id',
sortorder:'desc',
viewrecords:true,
gridview:true,
caption:'List',
useDataProxy: true,
dataProxy : function (opts, act) {
opts.iframe = true;
var $form = $('#FrmGrid_citype'); //use name of the grid
//Prevent non-file inputs double serialization
var ele = $form.find('INPUT,TEXTAREA,SELECT').not(':file');
ele.each(function () {
$(this).data('name', $(this).attr('name'));
$(this).removeAttr('name');
});
//Send only previously generated data + files
$form.ajaxSubmit(opts);
//Set names back after form being submitted
setTimeout(function () {
ele.each(function () {
$(this).attr('name', $(this).data('name'));
jQuery("#citype").trigger('reloadGrid');
});
}, 200);
},
editurl:"/submit"
});
// Action Option jQuery("#citype").jqGrid('navGrid','#pager',
{}, //options
{ // edit options
closeAfterEdit:true,
height:280,
reloadAfterSubmit:true,
closeOnEscape : true,
useDataProxy: true,
onInitializeForm : function(formid){
$(formid).attr('method','POST');
$(formid).attr('action','');
$(formid).attr('enctype','multipart/form-data');
}
},
{ // add options
closeAfterAdd:true,
height:280,
reloadAfterSubmit:true,
closeOnEscape : true,
useDataProxy: true,
onInitializeForm : function(formid){
$(formid).attr('method','POST');
$(formid).attr('action','');
$(formid).attr('enctype','multipart/form-data');
}
},
{ // del options
reloadAfterSubmit:true
},
{} // search options );
I cant figure out why facebook publish is not working on this site
I get
API Error Code: 102
API Error Description: Session key invalid or no longer valid
Error Message: Iframe dialogs must be called with a session key
While calling the stream.publish method as iframe
<script type="text/javascript">
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol
+ '//connect.facebook.net/fr_FR/all.js';
document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function()
{
FB.init({ appId: '303380259758621',
status: true,
channelUrl: 'http://www.crabegame.com/channel.php',
cookie: true,
xfbml: true,
oauth: true});
}
function PublishStream(score)
{
FB.ui(
{
method: 'stream.publish',
display : 'iframe',
message : '',
attachment:
{
name: 'CrabeGame',
caption: 'Essaye de battre mon score sur le Crabe Game !',
description: "J'ai réalisé un score de " + score + "points au Crabe Game !",
href: 'http://www.crabegame.com',
media:
[
{
type: 'image',
src: 'http://crabegame.com/media/crabe_fb.png',
href: 'http://www.crabegame.com'
}
]
},
action_links:
[
{
text: 'Play Crabe Game',
href: 'http://www.crabe-game.com'
}
],
user_message_prompt: 'Publier sur votre mur'
},
function (response)
{
if (response && response.post_id)
{
}
}
);
}
</script>
This means that you have no current user. Try this in order to call PublishStream:
FB.login(function(response) {
if (response.authResponse) {
PublishStream();
} else {
console.log('Not logged in');
}
});
you don´t need a logged in user, just remove display: "iframe", worked for me. it will still show in an iframe, but without error. don´t ask me why, with 1:1 the same app settings it works WITH the display value in another app of mine...at least that worked for me with the apprequest dialog, might be the same here.
and i would use "feed" instead of "stream.publish".
see here: https://developers.facebook.com/docs/reference/dialogs/feed/
also: Using Like Button and FB.ui (apprequests) On the Same Page Conflicts
I've tried all the code at https://github.com/davejohnson/phonegap-plugin-facebook-connect
that is recommended by the phonegap community, but i keep running into errors trying to get it to work.
As you can see I'm using cordova 1.6.0 which maybe the problem?
i've added the script files to in my html page
<script type="text/javascript" charset="utf-8" src="cordova-1.6.0.js"></script>
<script type="text/javascript" charset="utf-8" src="cdv-plugin-fb-connect.js">/script>
<script type="text/javascript" charset="utf-8" src="facebook_js_sdk.js"></script>
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
And I've added the ChildBrowserCommand.cs into the plugins directory.
I then added this to device ready listener with my authentic app id (the real id not shown here)
document.addEventListener("deviceready",onDeviceReady,false);
// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady() {
//document.getElementById("welcomeMsg").innerHTML += "Cordova is ready! version=" + window.device.cordova;
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
//fb connect sign in
try {
//alert('Device is ready! Make sure you set your app_id below this alert.');
console.log('Device is ready! Make sure you set your app_id below this alert.');
FB.Cookie.setEnabled(true); // this seems to be duplicate to 'cookie: true' below, but it is IMPORTANT due to FB implementation logic.
FB.init({ appId: "311961255484993", nativeInterface: CDV.FB, cookie: true });
login();
} catch (e) {
//alert(e);
console.log("Init error: " + e);
}
};
function login() {
FB.login(
function (response) {
if (response.session) {
console.log('logged in');
} else {
console.log('not logged in');
}
},
{ scope: 'email, read_stream, read_friendlists' }
);
}
The error i get is
Unable to locate command :: org.apache.cordova.facebook.Connect
Any help?
EDIT: I also realize it's coming from cdv-plugin-fb-connect.js in here but not sure why?
cordova.exec(function () {
var authResponse = JSON.parse(localStorage.getItem('cdv_fb_session') || '{"expiresIn":0}');
if (authResponse && authResponse.expirationTime) {
var nowTime = (new Date()).getTime();
if (authResponse.expirationTime > nowTime) {
// Update expires in information
updatedExpiresIn = Math.floor((authResponse.expirationTime - nowTime) / 1000);
authResponse.expiresIn = updatedExpiresIn;
localStorage.setItem('cdv_fb_session', JSON.stringify(authResponse));
FB.Auth.setAuthResponse(authResponse, 'connected');
}
}
console.log('Cordova Facebook Connect plugin initialized successfully.');
}, (fail ? fail : null), 'org.apache.cordova.facebook.Connect', 'init', [apiKey]);
},
I am using connect-js (FB.login) to login users to share my page, in standard way. In all normal browsers (chrome, firefox, opera) it pops up a window with permissions request (everything is fine). But in Internet Explorer (7 and 8, didn't test in 6) it pops up window that says: "An error occurred with [myapp]. Please try again later."
This is my code:
<div id="fb-root"></div>
<script language="javascript">
var nombre = "";
var pic_big = "";
FB.init({
appId : '161599150607341', // App ID
channelUrl : '//emocionesverde.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
function conectarse() {
FB.login(handleSessionResponse, {
scope: 'publish_stream, user_about_me'
});
}
function handleSessionResponse(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
//console.log(response.name);
window.nombre = response.name;
getUserPic(response.id);
});
}
}
function getUserPic(uid) {
FB.api('/me?fields=picture&type=large', function(response) {
//console.log(response.picture);
window.pic_big = response.picture;
publicar();
});
}
function publicar() {
FB.ui({
method: 'stream.publish',
message: '',
attachment: {
name: 'Emoción es Verde',
caption: window.nombre + ' midió el impacto de sus acciones verdes. Te invitamos a conocer acciones para mantener el planeta verde con Emoción es Verde',
media: [{
type: 'flash',
swfsrc: 'http://mainteractivetools.com/erik/mifb/emocionesverde/Prueba.swf?pic=' + window.pic_big + '&nombre=' + window.nombre,
imgsrc: 'http://mainteractivetools.com/erik/mifb/emocionesverde/telefonica1.jpg',
expanded_width: '450',
expanded_height: '258'
}],
href: 'http://www.emocionesverde.com'
},
action_links: [{
text: 'Emoción es Verde',
href: 'http://www.emocionesverde.com'
}],
user_message_prompt: 'Escribe un comentario'
}, function (response) {});
}
$('#swfmapsdiv').css('visibility', 'hidden');
</script>
Have you tried adding p3p headers? It's an IE thing and clears up a lot of problems. However cryptic the codes are. What Facebook is essentially trying to do is share cookies across domains, which is a security flag. You need to say it's ok.
The issue could be in channelUrl, try to have the whole path there i.e http://emocionesverde.com/channel.html
Also login into facebook as app developer - the error message will be more detailed