is this possible?
I want to add a public event from a google+ page to users calendar with api calls. Unfortunately, the google+ api returns not all information about the event. So i'm searching for an option to add this event to the calendar like the "take part" button on google+.
#Alex, have you tried
Sharing interactive posts
Interactive posts provide an easy and prominent way to allow users to share your site or app with their connections and invite them to take action, for example, RSVP for an event.
To add a add button to your site:
<script >
window.___gcfg = {
lang: 'zh-CN',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/client:platform.js" async defer></script>
Then create your button:
<!-- Place the tag where you want the button to render -->
<button
class="g-interactivepost"
data-contenturl="https://plus.google.com/pages/"
data-contentdeeplinkid="/pages"
data-clientid="xxxxx.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-prefilltext="Engage your users today, create a Google+ page for your business."
data-calltoactionlabel="CREATE"
data-calltoactionurl="http://plus.google.com/pages/create"
data-calltoactiondeeplinkid="/pages/create">
Tell your friends
</button>
Related
I have a microservice-based application that implements a dedicated user authentication and authorization service. This service has two API endpoints to login with Google: GET signin and POST callback. If GET signin is called, it will challenge the user by redirecting them to Google login, and after they sign in to Google, Google calls the POST callback API. The POST callback will sign in the user using the ID and access token it receives from Google, creates a local user, and returns its DTO.
I am trying to implement the Sign in with Google button in the UI. I am following Google's documentation on creating this button. Here is what I have so far.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: "...",
login_uri: "https://localhost:1234/signin",
ux_mode: "redirect"
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large", click_listener: onClickHandler }
);
function onClickHandler(){
window.location.replace("https://localhost:1234/signin")
}
google.accounts.id.prompt();
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
This setup works, but not as expected.
The interaction I expect compared to what happens:
User clicks on the Login with Google button;
[expect] A pop-up opens and redirects to https://localhost:1234/signin. [happens] full-page redirect to https://localhost:1234/signin;
https://localhost:1234/signin redirects to Google login;
After the user sign in, https://localhost:1234/callback is called, which will sign in the user and redirects to the page where the Sign in with Google button was clicked.
I expect the redirect to happen in the pop-up, so the callback redirect happens in the pop-up, and user does not experience a full-page refresh. However, using the above code, two full-page refreshes happen: (a) redirect to the login endpoint, then to Google, (b) Google to the callback, then to the page where the login button was clicked.
I'm using the standard share button plugin for Google+, and after the button there's a bit of text that reads "Share this on Google+":
<script >
window.___gcfg = {
lang: 'zh-CN',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
I'd like to hide or remove that text, but since it's in the iFrame it's not possible to do it with CSS. I'm finding the documentation lacking or confusing on their dev pages for this share buttons.
https://developers.google.com/+/web/share/
Is there any way to remove that text?
You can use the data-annotation attribute and set its value to none, eg:
<div class="g-plus" data-action="share" data-annotation="none"></div>
More info here within the share tag attributes of the docs.
I'm adding Google+ sign in button to my site using the server-side flow.
Here is how I render the sign in button:
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://plus.google.com/js/client:plusone.js?onload=renderGPlus';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
<script type="text/javascript">
function renderGPlus() {
gapi.signin.render('customGPlusBtn', {
'callback': 'gPlusSignInCallback',
'clientid': '<my_client_id>',
'redirecturi': 'postmessage',
'accesstype': 'offline',
'cookiepolicy': 'single_host_origin',
'requestvisibleactions': 'http://schemas.google.com/BuyActivity',
'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email'
});
}
</script>
When the button is loaded, it immediately checks to see if the user has authorized my application (immediate mode). If the user has previously authorized my application, a notification bar will pop up at the bottom of the page with the message "Welcome back, you've already connected with this app via Google+ Sign-In as .....".
Is there anyway to stop this message from popping up?
Just recently the newly accepted answer on this page for hiding the "Google Sign-in Welcome back pop up"
window.___gcfg = { isSignedOut: true };
does not work again.
AIM: "Hide or Suppress the Google+ Sign In Welcome Back message" on all browsers.
Please if you have been using `
window.___gcfg = { isSignedOut: true };
to suppress the warning. After serious experimentation I discovered this.
I will recommend you use this iframe versions to suppress any kind of Google API pop up window on your web page..
Iframe 1: iframe[src^="https://apis.google.com"] {display: none;} This Hides all pop up windows from Google APIs on your web page.
Iframe 2: iframe[src^="https://apis.google.com/u/0/_/sharebox"] {display: none;} This Hides all Google's Interactive Share Dialog pop up on your web page.
Iframe 3: iframe[src^="https://apis.google.com/u/0/_/widget/oauthflow/toast"] {display: none;} This Hides all "Google's Welcome Back Message" pop up window on your web page.
Iframe 4: iframe[src^="https://apis.google.com/u/0/_/+1/"] {display: none;} This Hides all "Google's +1 Button" on your web page.
So for this particular question do this in the Head tag of your HTML Page
<style> `iframe[src^="https://apis.google.com/u/0/_/widget/oauthflow/toast` </style>
Have tested it and it works perfectly well.
First, the message only appears the first time that a user is signing in as recognized by Google for a particular browser session. In other words, the user will only see the message if they have closed their browser windows and have started a new browser session.
You should be authorizing the user any time that you are seeing the authorization result successfully returning and updating the user to an authorized state. As such, the user is getting automatically signed in whenever this message appears.
Because the message that appears is there to inform your users that they have automatically been signed in, you probably should not be suppressing this message unless you are doing it intentionally for a user whose session you are explicitly managing.
However, if you have implemented explicit sign-out and are managing the user's signed-in state, the following code change to the plusone.js synchronous include will suppress the toast message.
<script src="https://apis.google.com/js/plusone.js">
isSignedOut: true
</script>
Another note, you no longer need to manage the user's state to sign the user out. The new method gapi.auth.signOut will sign the user out. You can see a demo of signout here.
If you are doing an asynchronous include, the following global configuration flags will suppress the message:
window.___gcfg = { isSignedOut: true };
UPDATE:
As pointed out by Chimdi2000 this solution does not work in Chrome. You can add the following CSS to hide the generated iframe:
iframe[src^="https://apis.google.com"] {
display: none;
}
As his answer is far more complete than mine and addresses additional issues, please check it out.
The accepted answer is the right way to do it, but if for some other reason you just want to hide the generated iframe, you can do it with CSS:
iframe[src^="https://apis.google.com"] {
display: none;
}
Chimdi2000's last style code must be:
<style>
iframe[src^="https://apis.google.com/u/0/_/widget/oauthflow/toast"] {
display: none;
}
</style>
and runs perfect.
EDIT :
Coding below also hides the login button.
<style>
iframe[src^="https://apis.google.com"] {
display: none;
}
</style>
I am in the process of integrating Google+ sign in with my site, which also lets users sign in with Twitter and Facebook. The sign in page of the site therefore has 3 buttons, one for each of the services.
The issue I am having is in the following scenario:
user goes to the sign in page
user signs in successfully with G+
user signs out of my site (but the account is still associated with G+, signing out of the site does not disconnect the G+ account)
user visits the sign in page again
at this stage the Sign in with G+ button is rendered and automatically signs the user into the account associated with G+ without the user having to click the button
The problem is that on revisiting the sign in page, I want the user to have the option of signing in with another service, rather than automatically being signed in with G+. If the user wants to sign in with G+ then they can do so by clicking the button - the user will then be signed in automatically.
Is it possible to prevent this automatic sign in on button render? I can simulate it by using the data-approvalprompt="force" as an attribute on the button, but I don't think this is an ideal solution (the user then has to go through the confirmation process, which I would ideally would like to prevent)
Update
The best supported way to prevent automatic sign-in is to use the API method gapi.auth2.getAuthInstance().signOut() which will prevent automatic sign-in on your site after it has been called. Demo here.
In the demo, the user is signed out when they leave the page as shown in the following code:
window.onbeforeunload = function(e){
gapi.auth2.getAuthInstance().signOut();
};
Now, whenever the user exits the site (e.g. closes the window, navigates away), they will be signed out and the sign in button will not trigger sign-in until the user clicks it.
I don't recommend you do this in your own implementation but instead allow the user to explicitly sign out when they no longer desire want to be signed in. Also, please note that my example is a demo, you probably do not want to sign the user out automatically any time they leave your site.
Original Post
First, you should not be using data-approvalprompt="force" as this will cause extra authorized subtokens to be issued to your application / client and is designed to be used in scenarios where the user needs to be reauthorized after credentials have been lost server-side.
Second, you probably do not want to have the behavior where the user needs to click to sign in because they are already "signed in" to their Google account and it could be confusing to need to sign in (or trigger sign-in) again, separately, for your site.
If you really wanted to do this, you would perform an explicit render for the signin button but would not make the call to gapi.signin.render as documented in the Google+ sign-in documentation until you are aware that the user will not automatically get signed in.
The following code shows how to enable explicit render of the sign-in button:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>
<script type="text/javascript">
var token = "";
function onSigninCallbackVanilla(authResponse){
// in a typical flow, you show disconnect here and hide the sign-in button
}
The following code shows you how to explicitly render the button:
<span id="signinButton">
<button id = "shim" onclick="gapi.signin.go(); $('#shim').hide();">Show the button</button>
<span
class="g-signin"
data-callback="onSigninCallbackVanilla"
data-clientid="YOUR_CLIENT_ID"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-scope="https://www.googleapis.com/auth/plus.login">
</span>
</span>
How you're communicating that the user is signed out of your site is probably going to vary from site to site, but one approach could be to set a cookie indicating the "signed out" state for a user and then using this as the trigger for blocking explicit load. The behavior gets a little trickier when a user visits your site and has disabled cookies or uses a separate, signed-in, browser. To address this, you could do something complicated like querying the user state from your server over XHR on the sign-in callback and pretending not to know the user is signed in to Google+.
Just check for g-auth-window in the callback function:
function google_sign_callback(authResult){
if(authResult['g-oauth-window']){
}else if(authResult['error']) {
}
}
I had this issue and used auth2.disconnect()
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
var auth2 = gapi.auth2.getAuthInstance();
auth2.disconnect();
//do other stuff
}
Edit:
you need to store the token before you disconnect because in some cases id_token will become null after disconnect:
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
var idToken=profile.id_token;
googleUser.disconnect()
//use idToken for server side verification
}
If i'm correct you have your own sign in mechanism for your site and just need google sign in to sign up a user on verified email. in this case you can easily disconnect after you get the profile info.
Next time you load the page you will see "sign in" button instead of "signed in " button.
Unfortunately calling gapi.auth.signOut() made the app to log-in again when I'm requesting user data (neither it is persistent)
So the solution, as suggested by #class is to revoke the token:
$.ajax({
type: 'GET',
url: 'https://accounts.google.com/o/oauth2/revoke?token=' +
gapi.auth.getToken().access_token,
async: false,
contentType: 'application/json',
dataType: 'jsonp',
success: function(result) {
console.log('revoke response: ' + result);
$('#authOps').hide();
$('#profile').empty();
$('#visiblePeople').empty();
$('#authResult').empty();
$('#gConnect').show();
},
error: function(e) {
console.log(e);
}
});
I too has same issue this how i fixed it.I may not sure this is a stander way to do it but still it works fine with me...
add this Google JS from google developer
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
function onSuccessG(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
}
function onFailureG(error) {
console.log(error);
}
function renderGmail() {
gapi.signin2.render('my-signin2', {
'scope': 'https://www.googleapis.com/auth/plus.login',
'width': 0,
'height': 0,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccessG,
'onfailure': onFailureG
});
}
Now add html link and onClick call this renderGmail() function.
SignUp with Gmail
I hope this works...
I am using https://developers.google.com/identity/sign-in/web/build-button to build the sign in button for my web app which gives the user a choice to log in through either Facebook or Google.
This code is pretty easy for obtaining the Id_token.
However it also came with automatic signing in of the user if the user is already signed in.
Thus, adding the following snippet in the beginning of the script helped me control the signup procedure.
window.onbeforeunload = function(e){
gapi.auth2.getAuthInstance().signOut();
};
Thanks!
Our AngularJS solution was:
$scope.$on('event:google-plus-signin-success', function (event, authResult) {
if( authResult.status.method !== "AUTO"){
onGoogleLogIn(authResult[settings.configKeys.googleResponseToken]);
}
});
I have been struggling with this for a while and could not find a way to prevent automatic sign in to Google using the "easy implementation" of the Sign-in
I ended up using the custom integration which does not attempt to auto sign in (also allowed me to change the appearance in the same time)
The accepted answer no longer works when you start to use both Google Sign In and OAuth access tokens for other Google services. The access tokens expire immediately when the user is signed out. Instead, I would recommend the answer from this SO post, which involves attaching a click event handler to the Google sign in button. Only once the user clicks the sign in button and successfully logs into their Google account will the callbacks events fire.
I solved this by adding a click handler to my Google sign-in button. The click handler sets a global Javascript variable google_sign_in to true. When the onSuccess() handler fires (whether automatically on page load, or manually when the user clicks the sign-in button), it first checks whether google_sign_in == true and only then does it continue signing the user in:
<div id="google-signin2" onclick="return do_click_google_signin();"></div>
<script>
var google_sign_in = false; // assume
function do_click_google_signin() {
google_sign_in = true;
}
function onSuccess( googleUser ) {
if ( google_sign_in ) {
// Process sign-in
}
}
// Other redundant login stuff not shown...
</script>
I've implemented Sign-In using Google's tutorials, but the button doesn't really fit in with the design of the website I'm using it in. I'd like to use an image my graphic designer made instead. Is it currently possible to use a custom image for Sign-In buttons?
You can use gapi.signin.render to render a specified container as a sign-in button.
For example if in your HTML code you have:
<button id="mySignIn">SignIn</button>
The Javascript call would be something like:
gapi.signin.render("mySignIn", {
'callback': signinCallback,
'clientid': 'CLIENT_ID',
'cookiepolicy': 'single_host_origin',
'requestvisibleactions': 'http://schemas.google.com/AddActivity',
'scope': 'https://www.googleapis.com/auth/plus.login'
});
Also, remember to follow the branding guidelines.
The following code is used to add the login button to the page right?
<span id="signinButton">
<span
class="g-signin"
data-callback="signinCallback"
data-clientid="CLIENT_ID"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-scope="https://www.googleapis.com/auth/plus.login">
</span>
</span>
Have you tried to simply replace the class "g-signin" with your own class??
If g-signin is required for google themselves, to determine which is the actual signin button, you could always add a subclass to it.
<span class="g-signin custom" ...></span>
In your CSS this would be shown as:
.g-signin .custom {
/*properties*/
}