I would like to add the possibility of LinkedIn login to my project. I followed the tutorial given on the LinkedIn developer page and ended up with the following code, really basic stuff from that tutorial:
<!-- linkedin login -->
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: [MY_API_KEY] {~n}
authorize: false {~n}
onLoad: onLinkedInLoad {~n}
</script>
<!-- linkedin login play -->
<script type="text/javascript">
// Setup an event listener to make an API call once auth is complete
function onLinkedInLoad() {
IN.Event.on(IN, "auth", getProfileData);
}
// Handle the successful return from the API call
function onSuccess(data) {
console.log(data);
}
// Handle an error response from the API call
function onError(error) {
console.log(error);
}
// Use the API call wrapper to request the member's basic profile data
function getProfileData() {
IN.API.Raw("/people/~").result(onSuccess).error(onError);
}
</script>
Don't mind the {~n} as I'm using dust.js to render the page and I need them to pass the arguments to the LinkedIn script.
So, the login button appears, this means that LinkedIn was able to connect to my API key correctly, but the Chrome console gives me the following error: Uncaught Error: Could not execute 'onLinkedInLoad'. Please provide a valid function for callback.. Since this is the example given on the tutorial page, I don't know what can be wrong with it. Even if I declare the block of LinkedIn login functions before the call to the LinkedIn in.js, I get the same error.
I think it is a very easy mistake to spot, but I cannot really tell what am I doing wrong.
This is happening cause you are calling onLinkedInLoad() in head section,and if you are working on multiple pages..it will be called on the every page even if it doesn't have data from API call(or simply you are not making any call on the page where this error is appearing).
Try this`
// Removing event listener by calling IN.Event.on() outside of onLinkedInLoad()
IN.Event.on(IN, "auth", getProfileData);
// Handle the successful return from the API call
function onSuccess(data) {
console.log(data);
}
// Handle an error response from the API call
function onError(error) {
console.log(error);
}
// Use the API call wrapper to request the member's basic profile data
function getProfileData() {
IN.API.Raw("/people/~").result(onSuccess).error(onError);
}
`
And Yes remove " onLoad: onLinkedInLoad {~n}" from first script call
Related
It seems no matter what I try, I end up with this error. I have tried the default example:
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: YOUR_API_KEY_HERE
authorize: true
onLoad: onLinkedInLoad
</script>
<script type="text/javascript">
// Setup an event listener to make an API call once auth is complete
function onLinkedInLoad() {
IN.Event.on(IN, "auth", getProfileData);
}
// Handle the successful return from the API call
function onSuccess(data) {
console.log(data);
}
// Handle an error response from the API call
function onError(error) {
console.log(error);
}
// Use the API call wrapper to request the member's basic profile data
function getProfileData() {
IN.API.Raw("/people/~:(firstName)?format=json").result(onSuccess).error(onError);
}
</script>
I'm just trying to console log the first name of the user as a test. I have also tried various function names, as well as removing the onLoad argument just to test. I always get the error: Uncaught TypeError: Cannot read property 'apply' of undefined.
It looks like you are trying to use onLinkedInLoad before it's defined, try swapping the <script> blocks order.
We use Linkedin to have our members "Sign in" to access our back end. We only use the Javascript SDK as our website is very simple. We have many users that come back after 6-months and receive the following error instead of seeing the "Sign in with Linkedin" button:
[unauthorized]. Expired access token. Timestamp: 1501736450333
Since we don't have a backend to renew the tokens in batch prior to their 60 day expiration, a simple solution for our members is to Logout first, see the "Log in" button, and sign-in again -- that we know re validates the token.
Question: I don't know how to "catch" the error or identify when a user has an expired token with Linkenin's Javascript SDK.
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: XXXXXXXXXXXXX
onLoad: li_OnFrameworkLoad
authorize: true
</script>
...
<script type="text/javascript">
function li_OnFrameworkLoad() {
IN.Event.on(IN, "auth", li_OnAuth);
}
</script>
I have tried using the:
if (!IN.User.isAuthorized()) {
li_Logout();
}
method, but that doesn't work as
IN.Event.on(IN, "auth", li_OnAuth);
will trigger the "[unauthorized]..." message without first calling the "li_OnAuth" callback.
Reproducing: The worst part of this bug is that I can't seem to reproduce it on my local machine, if you know how to trigger an "[unauthorized]. Expired access token..." bug please do let me know.
Solution?: One possible recent solution is using:
<script type="text/javascript">
window.onerror = function(e) {
if (e == 'Script error.') {
console.log('There is a chace IN.init failed.');
}
}
</script>
But I am not very familiar with "window.onerror" and I am not sure if the Linkedin Javascript SDK will trigger an error if the token is expired, etc. Basically I just need to catch the error and call my "li_logout();" function to Log Out the user from Linkedin and refresh the page.
Thank you much, any wisdom would be highly appreciated.
I am trying to use google drive javascript API. I have set the OAuth consent also. But everytime its showing error
Not a valid origin for the client
and
"idpiframe_initialization_failed"
what is the problem actually? I have googled, googled and googled but no solution with that. I am trying on localhost by creating a virtual host.
I am using the sample from google doc
<html>
<head></head>
<body>
<script type="text/javascript">
function handleClientLoad() {
// Loads the client library and the auth2 library together for efficiency.
// Loading the auth2 library is optional here since `gapi.client.init` function will load
// it if not already loaded. Loading it upfront can save one network request.
gapi.load('client:auth2', initClient);
}
function initClient() {
// Initialize the client with API key and People API, and initialize OAuth with an
// OAuth 2.0 client ID and scopes (space delimited string) to request access.
gapi.client.init({
apiKey: 'APIKEY',
discoveryDocs: ["https://people.googleapis.com/$discovery/rest?version=v1"],
clientId: 'CLIENTID.apps.googleusercontent.com ',
scope: 'profile'
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
});
}
function updateSigninStatus(isSignedIn) {
// When signin status changes, this function is called.
// If the signin status is changed to signedIn, we make an API call.
if (isSignedIn) {
makeApiCall();
}
}
function handleSignInClick(event) {
// Ideally the button should only show up after gapi.client.init finishes, so that this
// handler won't be called before OAuth is initialized.
gapi.auth2.getAuthInstance().signIn();
}
function handleSignOutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}
function makeApiCall() {
// Make an API call to the People API, and print the user's given name.
gapi.client.people.people.get({
'resourceName': 'people/me',
'requestMask.includeField': 'person.names'
}).then(function(response) {
console.log('Hello, ' + response.result.names[0].givenName);
}, function(reason) {
console.log('Error: ' + reason.result.error.message);
});
}
</script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
<button id="signin-button" onclick="handleSignInClick()">Sign In</button>
<button id="signout-button" onclick="handleSignOutClick()">Sign Out</button>
</body>
</html>
I had the same problem with Google Drive javascript API quick start example.
I cleared Google Chrome's cache from beginning of time and after that it worked...
Hope it helps! :)
You should provide the http calls and response so we can check.
However the message "Not a valid origin for the client" suggests that the URL you are serving your web page from is not one of those origins that you configrued in the API Console.
I am working on that application allow user to connect to linkedin (using javascript). I want to store access token that I got from IN.ENV.auth.oauth_token because I will use it to post to user's timeline.
But when I use this access token to post to Linkedin, I got "Invalid access token" error.
Did I use correct access token? How's the correct way to get Access token?
Here's my code:
$("#linkedin-connect").on('click',function(e){
e.preventDefault();
IN.UI.Authorize().place();
IN.Event.on(IN, "auth", OnLinkedInAuth);
return false;
});
function OnLinkedInAuth() {
console.debug("oauth token:" + IN.ENV.auth.oauth_token);
}
JSFiddle Example
this event IN.Event.on(IN, "auth", OnLinkedInAuth); should pass some data to your function OnLikedInAuth as in shown in the documentation of the sdk.
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: YOUR_API_KEY_HERE
authorize: true
onLoad: onLinkedInLoad
</script>
<script type="text/javascript">
// Setup an event listener to make an API call once auth is complete
function onLinkedInLoad() {
IN.Event.on(IN, "auth", getProfileData);
}
// Handle the successful return from the API call
function onSuccess(data) {
console.log(data);
}
// Handle an error response from the API call
function onError(error) {
console.log(error);
}
// Use the API call wrapper to request the member's basic profile data
function getProfileData() {
IN.API.Raw("/people/~").result(onSuccess).error(onError);
}
As that example (available in docs) the getProfileData (similar to your OnLinkedInAuth) returns a Promise and when it's resolved will give you some data that you need to read. In that object you will find the token that you can store (LocalStorage) and use
I'm trying to add an 'Apply by LinkedIn' button to an expressionengine site. I've created my app on LinkedIn and am using the JS SDK and have followed the guide in order to do so. My code is below:
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: MY CLIENT ID
authorize: true
onLoad: onLinkedInLoad
</script>
<script type="text/javascript">
// Setup an event listener to make an API call once auth is complete
function onLinkedInLoad() {
IN.Event.on(IN, "auth", getProfileData);
}
// Handle the successful return from the API call
function onSuccess(data) {
console.log(data);
}
// Handle an error response from the API call
function onError(error) {
console.log(error);
}
// Use the API call wrapper to request the member's profile data
function getProfileData() {
IN.API.Raw("/people/~:(id, first-name, skills, educations, languages, twitter-accounts)")
.result(onSuccess).error(onError);
}
</script>
I've added the button markup as suggested:
<script type="in/Login"></script>
SO the button is displayed and upon click I'm presented with my account to authorise the app, however, upon authenticating, the button disappears and I get the following error:
Failed to load resource: the server responded with a status of 400 (Bad Request)
ObjecterrorCode: 0message: "Unknown field {_first-name} in resource {Person}"requestId: "LT59BVDVU2"status: 400timestamp: 1436259208629__proto__: Object
Thanks!
Use camelcasing instead of dashes:
IN.API.Raw("/people/~:(id, firstName, skills, educations, languages, twitter-accounts)")