<html>
<head>
<meta name="google-signin-client_id" content="Myvalue.apps.googleusercontent.com">
</head>
<body>
<div id="my-signin2"></div>
<script>
function onSuccess(googleUser) {
console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
}
function onFailure(error) {
console.log(error);
}
function renderButton() {
gapi.signin2.render('my-signin2', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
</script>
<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
</body>
</html>
I tited to sign in using google but get these errors
cb=gapi.loaded_0?le=scs:177 Uncaught
{error: 'idpiframe_initialization_failed', details: 'You have created a new client application that use…i/web/guides/gis-migration) for more information.'}
details
:
"You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated. See the Migration Guide for more information."
error
:
"idpiframe_initialization_failed"
Authentication and authorization with Google signin changed in HTML and JavaScript.
In this authentication-only sign-in scenario, example code and renderings of the existing Google Sign-In button are shown. Select from either Popup or Redirect mode to see differences in how the authentication response is handled either by a JavaScript callback or by secure redirect to your back-end server login endpoint.
The old way and deprecated.
<html>
<body>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
<div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
</body>
</html>
The new way
To use the new library in a simple authentication-only sign-in scenario select from either the Popup or Redirect mode and use the code sample to replace your existing implementation on your login page.
So what is the popup way:
Use a callback to handle sign-in directly from the user's browser.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_CLIENT_ID"
data-callback="handleCredentialResponse">
</div>
<div class="g_id_signin" data-type="standard"></div>
</body>
</html>
And the redirect way is:
Google invokes your login endpoint as specified by the data-login_url attribute. Previously, you were responsible for the POST operation and parameter name. The new library posts the ID token to your endpoint in the credential parameter. Lastly, verify the ID token on your back-end server.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_CLIENT_ID"
data-ux_mode="redirect"
data-login_uri="https://www.example.com/your_login_endpoint">
</div>
<div class="g_id_signin" data-type="standard"></div>
</body>
</html>
Related
I am trying to make a functional connection to GA API according to the official docs - https://developers.google.com/analytics/devguides/reporting/core/v4/quickstart/web-js. I did everything needed to set it up however the solution is not working. The weird thing is that the button for the authentication is loaded and its working up until the point where I select the google account to login with. After that however loading appears and the auth window gets closed. There is no error in the console, nothing happens at all.
I use it on localhost currently but I've also tried it on a server with the same result. After selecting the account, every next attempt doesn't even require choosing the account so the window just opens, loading appears and closes again without anything happening.
screenshot
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Analytics Reporting API V4</title>
<meta name="google-signin-client_id" content="<CLIENT-ID>">
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/analytics.readonly">
</head>
<body>
<h1>Hello Analytics Reporting API V4</h1>
<!-- The API response will be printed here. -->
<textarea cols="80" rows="20" id="query-output"></textarea>
<!-- The Sign-in button. This will run `queryReports()` on success. -->
<p class="g-signin2" data-onsuccess="queryReports"></p>
<script>
const VIEW_ID = '<VIEW-ID>';
// Query the API and print the results to the page.
function queryReports() {
gapi.client.request({
path: '/v4/reports:batchGet',
root: 'https://analyticsreporting.googleapis.com/',
method: 'POST',
body: {
reportRequests: [
{
viewId: VIEW_ID,
dateRanges: [
{
startDate: '7daysAgo',
endDate: 'today'
}
],
metrics: [
{
expression: 'ga:sessions'
}
]
}
]
}
}).then(displayResults, console.error.bind(console));
}
function displayResults(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
document.getElementById('query-output').value = formattedJson;
}
</script>
<!-- Load the JavaScript API client and Sign-in library. -->
<script src="https://apis.google.com/js/client:platform.js"></script>
</body>
</html>
Is there something wrong in the code which I missed?
I am trying to follow the simplest of examples of how to setup up Google's "
One tap sign-up and automatic sign-in" in a web page. Just copy and pasting the code provided by google, I get an exception "No credentials available". Why? How to fix it?
This is my web page content ...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script src="https://smartlock.google.com/client"></script>
<script>
console.log( "window.location.origin=" + window.location.origin);
window.onGoogleYoloLoad = (googleyolo) => {
console.log("Google one tap ready");
};
const retrievePromise = googleyolo.retrieve({
supportedAuthMethods: [
"https://accounts.google.com",
"googleyolo://id-and-password"
],
supportedIdTokenProviders: [
{
uri: "https://accounts.google.com",
clientId: "xxxx-86peetl434op89ug41lg1vv8sjspfupp.apps.googleusercontent.com"
}
]
});
</script>
</head>
<body>
Content of the document......
</body>
</html>
The Authorized JavaScript origins has been correctly setup. I am confident of that. The URL for the above content is: https://s3-ap-southeast-2.amazonaws.com/sbd-aws-sdk-delphi-22/index.html
Upon hitting the page (browser=Chrome), the resultant javascript console is ..
window.location.origin=https://s3-ap-southeast-2.amazonaws.com
Google one tap ready
index.html:1 Uncaught (in promise)
a {type: "noCredentialsAvailable", name: "OpenYoloError", message:
"noCredentialsAvailable: No credential is available for the current user."}
message:
"noCredentialsAvailable: No credential is available for the current user."
Context: When I make this web page hit, I am logged into Google.
What am I doing wrong?
The problem is that there is currently no user signed in. The library has very little support for this, as a work around, when no Google Accounts are active and no credentials are available. You can simply show the traditional Google Sign-In button and have the user click to proceed through the flow to activate their Google Account in the browser.
https://developers.google.com/identity/sign-in/web/
I want to use google-login api in my application but I have 2 different errors for it.
1)Google login button is not rendering properly(Only render sometimes).
2)when my button shows up i got "The OAuth client was not found." on click in popup window.
My credentials for google login api are
Client ID :---> YOUR_CLIENT_ID
Client secret :--->voMrsqhFNBtnh5FUvqy-jorI
Redirect URIs :---->http://localhost:3000/
JavaScript origins :---> http://localhost:3000/
I already changed my Project name many times.but it shows me the same error.
My HTML page is as under.
<!doctype html>
<html lang="en" class="no-js">
<head>
<link rel="stylesheet" href="../Scripts/vendor/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../css/github-fork.css">
<link rel="stylesheet" href="../css/bb-login.css">
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com"
>
</head>
<body>
<div id="wrap">
<div class="header"></div>
<div id="content" class="container">
<script src="../Scripts/Vendor/requirejs/require.js" data-main="../Scripts/config.js"></script>
</div>
</div>
<script src="https://apis.google.com/js/client:platform.js?onload=start" ></script>
<script type="text/javascript">
function start() {
alert("inside start auth");
gapi.load('auth2', function() {
var auth2 = gapi.auth2.getAuthInstance();
alert(auth2);
});
if (auth2.isSignedIn.get()) {
alert("inside profile");
var profile = auth2.currentUser.get().getBasicProfile();
console.log('ID: ' + profile.getId());
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
}
}
</script>
</body>
</html>
and I am adding my <div class="g-signin2"></div> in different template for backbone.js.
what is the problem I have?
The problem you are having, is that google API fails to see you as a registered client.
Google twitter and many more uses nowadays OAuth 2.0, which means you have to be a registered and known client to the platform before using it's API.
In your case, google is not recognizing you as an active client, thus:
"The OAuth client was not found."
Make sure you are REGISTERED and acknowledged by google and that ALL the credentials are right.
I am trying to access linkedIn from my website. For that I have created a new Application and get the API key. And implemented in my code below. This gives me the blank page but works only in Javascript API developer console.
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: mykey
authorize: true
</script>
</head>
<body>
<script type="In/Login">
Hello, <?js= firstName ?> <?js= lastName ?>
</script>
</body>
Please help to get the login button..
The code looks alright as far as I can tell. As mentioned in the docs:
Verify that your API key, is specified in the framework script tag.
Verify that the full domain name you are using to access the html
file is specified in the key's configuration details.
Check your JavaScript Console for any framework errors.
If you are using Firebug or WebKit's Developer Tools, check to make
sure that the following files were loaded automatically: in.js,
userspace.js and framework.js
I found that you need a specific jQuery version to make the button appear!
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5b1.js"></script>
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: xxxxxxxxxxxxx
onLoad: onLinkedInLoad
authorize: true
</script>
And to show the Button you will need also this somewhere BUT INSIDE A BODY TAG!!!
<body>
<script type="IN/Login"></script>
</body>
hope that will give some light to the issue!
Here is my scenario. When a user opens a browser and goes to facebook.com to sign himself in, I want to be able to detect that and init my Facebook application sign-in process.
Is that possible? I'm asking because I noticed that signing into Facebook itself doesn't get my app signed in automatically, which is not good.
I'd prefer JavaScript client code.
UPDATE: Here you have a FULLY WORKING example. The only thing you will need to do is to replace the APP_ID for whatever ID you get when sign your app at: http://www.facebook.com/developers/ and the port you may use for the localhost test. This detects when the user logs in even in another browser window. It is obviously extremely basic but proves the point that is feasible with the tools from the graph API.
You can add this code to detect when the user logs in. It is the same oauth log in whether the user clicks on a <fb:login-button> or logs directly onto facebook.com:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Hello App Engine</title>
<SCRIPT type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></SCRIPT>
</head>
<body>
<h1>Hello!</h1>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : APP_ID,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
/*
* Authentication functions
*/
FB.Event.subscribe('auth.login', function (response) {
welcomeMsg(response);
});
FB.Event.subscribe('auth.logout', function (response) {
alert ("Good bye!");
});
if (FB.getSession() != null) {
FB.api('/me', function(response){
console.log(response.name);
welcomeMsg(response);
})
} else {
window.setTimeout(function(){window.location.href="http://localhost:8888"},5000);
}
function welcomeMsg(userData) {
console.log ("Welcome " + userData.name);
}
</script>
</body>
</html>
You can subscribe to the auth.login event.
http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
There are many Facebook images that you can see only if you're logged into Facebook. You can make the user attempt to load one of these images, and then detect if it loaded or not. It's a total trick.