I keep getting a [GSI_LOGGER]: Parameter client_id is not set correctly. when trying to implement the Google Identity SignIn - google-signin

Followed googles steps and got generated code as shown below, but on page load, the console shows [GSI_LOGGER]: Parameter client_id. Can you help with ideas on how to fix this issue.
this is generated code i added to my login page
<script src="https://accounts.google.com/gsi/client" async="async" defer="defer"></script>
<div id="g_id_onload"
data-client_id="clientID.apps.googleusercontent.com"
data-context="signin"
data-ux_mode="popup"
data-login_uri="http://localhost:8080/web/admin.html"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="pill"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">

Related

TypeError: Cannot read property 'MS_APP_CLIENT_ID' of undefined

I tryed to use the code provided by the https://dev.skype.com/webcontrol, but the browser shows "TypeError: Cannot read property 'MS_APP_CLIENT_ID' of undefined" in the console, and the chat does not show up.
The most strage thing is that i had the same code working few days ago. So the problem might be in the https://swc.cdn.skype.com/sdk/v1/sdk.min.js
Documentation: https://dev.skype.com/webcontrol
Code to replicate the issue
Beforre anyone asks, i've set the Microsoft App ID in the data-bot-id
<html>
<body>
<div class="skype-button bubble " data-bot-id='YOUR_BOT_ID'></div>
<script src="https://swc.cdn.skype.com/sdk/v1/sdk.min.js"></script>
</body>
</html>

Close Button Does Not Display in ui.bootstrap Alert

I am using ui.bootstrap alerts to display messages to users. However, the close button does not display. I'm developing an asp.Net application environment specifically in DNN. That's the only thing I can think of that could be causing the issue.
I have researched the following articles trying to find a fix:
Close button not appearing for Bootstrap alert
https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm
I have tried manually providing the code for the button but that doesn't fix the issue.
My code:
<!-- START alerts -->
<div class="col-md-12">
<div class="alert alert-dismissible" uib-alert ng-repeat="alert in $ctrl.alerts track by $index" ng-class="'alert-' + (alert.type || 'warning')" close="$ctrl.closeAlert($index);" dismiss-on-timeout="5000">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
×
</button>
{{ alert.msg }}
</div>
</div>
<!-- END alerts -->
The message displays and the alert is dismissable and will dismiss itself after 5 seconds as a workaround.
What I can see in the developer console is it's trying to pull a png file that doesn't exist. I can't even tell why it thinks this file would be there as the official bootstrap examples don't show the exact same CSS as I'm seeing in my environment.
// path it's looking for: WEBSITE/Portals/_default/Skins/MyTheme/assets/img/remove-icon-small.png
background-image: url(../img/remove-icon-small.png) !important;
Any thoughts on what I else I could try? Thanks in advance.
Update: adding the missing png file to the location it's looking for it still does not cause the icon to display.

Integrate Stripe Checkout with R Shiny App

[cross post with the R shiny Google group - I waited 24 hours]
The following code will render the checkout button from Stripe normally if I simply save it as a .html and open it with Firefox:
<h1> this is a test </h1>
<form action="" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_qdunoptxl9KNXR5qk7WdtkVg"
data-amount="2000"
data-name="Demo Site"
data-description="2 widgets ($20.00)"
data-image="/128x128.png">
</script>
</form>
but placing it in a R Shiny app like so:
output$StripeCheckOut <- renderUI({
div(class="span6",
div(HTML('
<h1> this is a test </h1>
<form action="" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_qdunoptxl9KNXR5qk7WdtkVg"
data-amount="2000"
data-name="Demo Site"
data-description="2 widgets ($20.00)"
data-image="/128x128.png">
</script>
</form>
')))
will result in a blank field under the This is a Test text.
It seems that R Shiny is not allowing the Javascript to dynamically load the button after the page has been rendered by the dom.
How can I include the basic Stripe Checkout button in an R Shiny App?
If I include:
HTML('
<h1> this is a test </h1>
<form action="" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_qdunoptxl9KNXR5qk7WdtkVg"
data-amount="2000"
data-name="Demo Site"
data-description="2 widgets ($20.00)"
data-image="/128x128.png">
</script>
</form>
')
inside ui.r directly, it works - but placing it inside a conditional panel will not allow the Stripe JS to load.
Instead, I used an html data-display-if condition:
<div align="center" data-display-if="output.Unpaid==True">
...
</div>
and everything worked!
This is also nice because it allows you to bind the condition to a Shiny output object vs input object which can be easier at times to work with.
Update after further testing
It turns out my edits don't quite work; after the Stripe Checkout JS has loaded, it blocks my Shiny App from interacting with other JS elements on the page.
It seems like there is some conflict with the Stripe JS and the internal Shiny JS....
New Update
The newest version of Shiny (0.9.1) has fixed this problem.
It seems to have been something with js heads and singletons, which have been updated in the most recent release.
This is no longer an issue,
and you can now use Stripe directly in shiny.
Ok, that didn't work in a comment either (bad luck with code in comments this week). Did you try wrapping it in an explicit tags$script call?
tags$script(src="https://checkout.stripe.com/checkout.js",
class="stripe-button",
"data-key"="pk_test_qdunoptxl9KNXR5qk7WdtkVg",
"data-amount"="2000",
"data-name"="Demo Site",
"data-description"="2 widgets ($20.00)",
"data-image"="/128x128.png")
it might be advantageous to build the whole form that way to see if it helps.

IFrame in content script. How to communicate with main.js?

My Firefox add-on opens Fancybox (type: "iframe") from a content script (page-mod). In the Fancybox I show my own HTML page (my_fancybox_stuff.html) that is located in my own server.
Now, from the my_fancybox_stuff.js (javascript of my_fancybox_stuff.html), can I send a message to the add-on's main.js? Or to the content script that opened the Fancybox?
I was hoping the global 'self' object to be accessible from my_fancybox_stuff.js as it is accessible from the content script that opened the Fancybox.
I am interested to hear about any potential workarounds to get this done.
In Chrome extension this is trivial. In my_fancybox_stuff.js I can call chrome.extension.sendMessage() and it works.
Thanks in advance!
EDIT: Adding some code to clarify my case. Simplified the code to save folks' time on reading it. This is simple as hello world.
From the contents_scipt.js (injected with page-mod) I call:
$.fancybox.open(
{
// Some irrelevant Fancybox options hidden for clarity
href:"http://www.mysite.com/my_fancybox_stuff.html
type: 'iframe'
}
);
my_fancybox_stuff.html would look something like this:
<!doctype html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js"></script>
<script src="js/my_fancybox_stuff.js"></script>
</head>
<body>
<div id="my-wrapper">
<div id="my-form-div">
<form id="my-form" action="#">
<div>
<div><p>Name</p></div>
<div><input id="fullname" type="text" name="fullname" value=""></div>
</div>
<div>
<div><p><a id="my-button" href="#">Press this</a></p></div>
</div>
</form>
</div>
</div>
</body>
In my_fancybox_stuff.js, when button ("my_button") is pressed, I want to send out a message containing the value of the input field ("fullname") and listen it in content_script.js.
Yes, your my_fancybox_stuff.js can communicate with your add-on's content script using postMessage ().
See the documentation and examples at MDN.

Css Drop down not working in FTL

Am using cssdropdown plugin in ftl file and it just didn't work with it.
I had the same code working fine in a jsp page.
My code is as follows,
<div id="subMenu">
<div class="drpdown posRel">
<div class="tab" id="chromemenu">
<span style="padding-right:1px;">
<#s.a href="createMessage.action"> Demo |</#s.a> <img src="images/image.gif" /></span></div>
<div id="dropmenu1" class="dropmenudiv"> <#s.a href="${stack.findValue('href')}" class="sample_attach"><span> ${stack.findValue('label')}</span></#s.a> <#s.a href="${stack.findValue('href')}" class="sample_attach"><span> ${stack.findValue('label')}</span></#s.a>
</div>
<script type="text/javascript">cssdropdown.startchrome("chromemenu")</script>
</div>
</div>
Is there any dependency i had to add for ftl.
P.S. I had an iterator that iterates the in this code. I could see the HTML output same as of my jsp page but it is not working in ftl.
Any help is appreciated. Thanks.
Check the HTML output... If it's identical to what the JSP outputs, then look closer, because the browser doesn't care if the HTML was generated by JSP, FTL or whatever, since both JSP and FTL runs on the server, not on the client.

Resources