I want to integrate Linkedin login using javascript.
I searched for that and get relevant results. But lot of search results says that below code:
<script type="in/Login">
</script>
is used to create sign-in button. But i want to use my own custom button and call a function on "onClick" event in my HTML.
Help in correct direction.
My code :
function linkedinLogin(){
console.log('linkedinLogin called');
var src="http://platform.linkedin.com/in.js"
api_key: 'XXXXXXXXXXXXXXXX'
authorize: true
onLoad: OnLinkedInFrameworkLoad
}
function OnLinkedInFrameworkLoad()
{
IN.Event.on(IN, "auth", OnLinkedInAuth);
}
function OnLinkedInAuth() {
IN.API.Profile("me").result(ShowProfileData);
}
function ShowProfileData(profiles)
{
var member = profiles.values[0];
console.log(member);
var id=member.id;
var firstName=member.firstName;
var lastName=member.lastName;
var photo=member.pictureUrl;
var headline=member.headline;
//use information captured above
var str="<b>id</b> : "+id+"<br>";
str +="<b>firstName: </b>"+firstName+"<br>";
str +="<b>lastName: </b>"+lastName+"<br>";
str +="<b>photo: </b>"+photo+"<br>";
str +="<b>headline: </b>"+headline+"<br>";
str +="<input type='button' value='Logout' onclick='logout();'/>";
document.getElementById("status").innerHTML = str;
}
And this is my HTML snippet:
<li>
<a href="javascript:void(0);" onClick="linkedinLogin()">
<img src="images/icon_linkedIn.png" />
<span>LinkedIn</span>
</a>
</li>
<html>
<head>
<title>LinkedIn JavaScript API Hello World</title>
<!-- 1. Include the LinkedIn JavaScript API and define a onLoad callback function -->
<script type="text/javascript" src="https://platform.linkedin.com/in.js">
api_key: xxx
onLoad: onLinkedInLoad
authorize: true
</script>
<script type="text/javascript">
// 2. Runs when the JavaScript framework is loaded
function onLinkedInLoad() {
IN.Event.on(IN, "auth", onLinkedInAuth);
}
// 2. Runs when the viewer has authenticated
function onLinkedInAuth() {
IN.API.Profile("me").fields("id","first-name", "last-name", "email-address").result(displayProfiles);
}
// 2. Runs when the Profile() API call returns successfully
function displayProfiles(profiles) {
member = profiles.values[0];
document.getElementById("profiles").innerHTML =
"<p>"+member.id+"<br> " + member.firstName + "<br> " + member.lastName + "<br>"+member.emailAddress+"</p>";
}
</script>
</head>
<body>
<!-- 3. Displays a button to let the viewer authenticate -->
<script type="in/Login"></script>
<!-- 4. Placeholder for the greeting -->
<div id="profiles"></div>
</body>
</html>
Can you try this ?
Related
I need to get auth code in JSON not in url after confirm popup google window. I try do it like in this google docs https://developers.google.com/identity/sign-in/web/server-side-flow
but this is doesnt work! What i do wrong ? Here is my code .
<script src="https://apis.google.com/js/client:platform.js?onload=start" async defer></script>
<script>
function start() {
gapi.load('auth2', function() {
auth2 = gapi.auth2.init({
client_id: '0101010101-p5a3fgbkeso3loqg157001l4deajshot.apps.googleusercontent.com',
scope:'https://www.googleapis.com/auth/drive'
// Scopes to request in addition to 'profile' and 'email'
//scope: 'additional_scope'
});
});
}
</script>
</head>
<body>
<button id="signinButton">Sign in with Google</button>
<script>
$('#signinButton').click(function() {
// signInCallback defined in step 6.
auth2.grantOfflineAccess({'redirect_uri': 'postmessage'}).then(function(resp) {
var auth_code = resp.code;
});
});
I am trying to call this Javascript function. When I hit my button, there is nothing loading. I set an id for my button. With the onclick I load the function onLinkedInLoad. But is it not that function I should call to activate the script? Can anybody see what I am doing wrong here?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<button id="btn">Try Me</button>
<script type="text/javascript">
document.getElementById("btn").onclick = onLinkedInLoad;
</script>
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: myKey
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", shareContent);
}
// 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 share content on LinkedIn
function shareContent() {
// Build the JSON payload containing the content to be shared
var payload = {
"comment": "Check out developer.linkedin.com! http://linkd.in/1FC2PyG",
"visibility": {
"code": "anyone"
}
};
IN.API.Raw("/people/~/shares?format=json")
.method("POST")
.body(JSON.stringify(payload))
.result(onSuccess)
.error(onError);
}
</script>
</body>
</html>
Update:
I get this in my console:
18 Uncaught ReferenceError: onLinkedInLoad is not defined
www.linkedin.com/uas/js/userspace?v=0.0.1191-RC8.56309-1429&apiKey=myKey&authorize=true&onLoad=onLinkedInLoad&secure=1&:
22 Uncaught Error: You must specify a valid JavaScript API Domain as part of this key's configuration.
I putted my APIkey in also. I just replaced in the code here with "myKey". I also tried with .addEventListener('click', onLinkedInLoad), but still nothing happens
Try to load the function definition script before the call script. Or better, take all the scripts in another file and just load that on your HTML.
I've tried your code on js fiddle and it works by doing that.
Hi as I found on some website by using linkedin api we can fetch your website user's linkedin recommendation to show it on your website as part of user profiles.
So to do this I searched for its implementation & found 2 api code & I tried both but its not working for my side.
First code ,I tried:
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: XXXXXXXXX
authorize: true
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="IN/Login" data-onAuth="authSuccess"></script>
<script>
function authSuccess() {
var recos_element = jquery("#footer-logo");
IN.API.Raw("people/~:(id,first-name,last-name,recommendations-received)").method("GET").result(function(result){
console.log("result",result);
{
for(var key in result.values) {
var reco = result.values[key];
recos_element.append($('<p><i><b>' + reco.recommender.firstName + ' ' + reco.recommender.lastName + '</b> says,</i><br> ' + reco.recommendationText + '</p>'));
}
});
}
</script>
Second code I tried:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: XXXXXXXXXX
authorize: true
</script>
<script type="text/javascript">
function onLinkedInAuth() {
IN.API.Raw('/people/~:(recommendations-received)')
.method('GET')
.result(function(result){
var received = result.recommendationsReceived.values;
$('<p>')
.html('Recommendations: ' + received.length)
.appendTo('#recommendations');
$.each(received, function(i, data){
$('<h3>')
.html(data.recommender.firstName + " " + data.recommender.lastName)
.appendTo('#recommendations');
$('<p>')
.html(data.recommendationText)
.appendTo('#recommendations');
});
})
};
</script>
<script type="in/login" data-onAuth="onLinkedInAuth">
Hello, <?js= firstName ?> <?js= lastName ?>.
</script>
I am also using linkedin Member Profile Plugin in this we have to send user's profile-url to fetch his profile in data-id
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="(Profile URL)" data-format="inline"></script>
So should we have to do similar like this for fetching user's recommendtaion.
Please help me for this.
thanks in advance!!!
well honestly do not know where you are putting this section of code and there is very little information about your error inyour code, what I recommend is to use a plugin that will facilitate besides that there implemetation documentation and tutorials, just make a git clone of:
Cakephp-Linkedin
and the wiki:
tep by step: Setup your controller
How to use the API
I am trying to fetch salesforce records in Gmail using OAuth. I am reading about Contextual Gadgets but am not able to get the OAuth request triggered.
I am able to see all my javascript alerts but the popup for authorization does not come up.
Any help/tips are appreciated.
Please find below the code for reference:
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="SF OAuth">
<Require feature="dynamic-height"/>
<Require feature="google.contentmatch">
<Param name="extractors">
google.com:SenderEmailExtractor
</Param>
</Require>
</ModulePrefs>
<Content type="html" view="card">
<![CDATA[
<!-- Start with Single Sign-On -->
<script type="text/javascript" src="https://gist.github.com/Sujit1987/7672590/raw/86a330515eede7c169280718decc9de4ddb494fb/jquery.js"></script>
<script type="text/javascript" src="https://gist.github.com/Sujit1987/7673430/raw/7e066e610cf98a16769c93f733efedb13fa4a5b5/jquery.popup.js"></script>
<script type="text/javascript" src="https://gist.github.com/Sujit1987/7671399/raw/f175870455f7dfe41a3dffeef7ae605138810619/forcetk.js"></script>
<script type="text/javascript">
// OAuth Configuration
var loginUrl = 'https://login.salesforce.com/';
var clientId = '******';
var redirectUri = 'https://gist.github.com/Sujit1987/7672925/raw/72a98f5a5cae641b20ad36841448f4edee6ec601/oauthcallback.html';
var proxyUrl = 'https://gist.github.com/Sujit1987/7671408/raw/ae3d9059a9fb032e0e231a8c54f00f076059f736/proxy.php?mode=native';
var client = new forcetk.Client(clientId, loginUrl, proxyUrl);
$(document).ready(function() {
alert('Hello - Inside Ready function');
$('#message').popupWindow({
windowURL: getAuthorizeUrl(loginUrl, clientId, redirectUri),
windowName: 'Connect',
centerBrowser: 1,
height:524,
width:675
});
$('#message').show();
alert('Hello - Exiting Ready Function');
});
function getAuthorizeUrl(loginUrl, clientId, redirectUri){
alert('Get Authorized Called'+loginUrl+'services/oauth2/authorize?display=popup'
+'&response_type=token&client_id='+escape(clientId)
+'&redirect_uri='+escape(redirectUri));
return loginUrl+'services/oauth2/authorize?display=popup'
+'&response_type=token&client_id='+escape(clientId)
+'&redirect_uri='+escape(redirectUri);
}
function sessionCallback(oauthResponse) {
alert('Hello - Session Call Back');
if (typeof oauthResponse === 'undefined'
|| typeof oauthResponse['access_token'] === 'undefined') {
$('#message').html('Error - unauthorized!');
} else {
client.setSessionToken(oauthResponse.access_token, null,
oauthResponse.instance_url);
client.query("SELECT Name FROM Account LIMIT 1",
function(response){
$('#message').html('The first account I see is '
+response.records[0].Name);
});
}
}
var clients = [];
matches = google.contentmatch.getContentMatches();
for(var match in matches)
{
for(var key in matches[match])
{
if(key == 'sender_email')
{
clients.push(matches[match][key]);
}
}
}
/*gadgets.window.adjustHeight(100);*/
/*function showEmail(){
document.write(clients);
}*/
</script>
<form>
<!-- <button type="button" onclick="showEmail();"> Show Sender Email </button>
<button type = "button" onclick ="getAuthorizeUrl();"> Query SalesForce </button> -->
<p id="message">Click here.</p>
</form>
]]>
</Content>
</Module>
I am trying to get this particular piece of code working.
It works fine in the developer console, but fails when try it on my computer in a html file. It gives me a error in the pop up which says [object Object]. Could really use some help here. I don't know why is code entering into the error handler while it works fine in the developer console of LinkedIn.
Thanks!
<html>
<head>
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: my_actual_key
authorize: false
credentials_cookie: true
credentials_cookie_crc: true
onLoad: onLinkedInLoad
</script>
</head>
<body>
<p>This example demonstrates the use of a login button to control what's displayed. It also demonstrates how to use the LinkedIn auth events in a user flow.</p>
<div id="loginbadge">
<p>Login badge renders here if the current user is authorized.</p>
</div>
<!-- NOTE: be sure to set onLoad: onLinkedInLoad -->
<script type="text/javascript">
function onLinkedInLoad() {
IN.Event.on(IN, "auth", function() {onLinkedInLogin();});
IN.Event.on(IN, "logout", function() {onLinkedInLogout();});
}
function onLinkedInLogout() {
setLoginBadge(false);
}
function onLinkedInLogin() {
// we pass field selectors as a single parameter (array of strings)
IN.API.Connections("me")
.fields(["id", "firstName", "lastName", "pictureUrl", "publicProfileUrl"])
.result(function(result) {
setLoginBadge(result.values[0]);
})
.error(function(err) {
alert(err);
});
}
function setLoginBadge(profile) {
if (!profile) {
profHTML = "<p>You are not logged in</p>";
}
else {
var pictureUrl = profile.pictureUrl || "http://static02.linkedin.com/scds/common/u/img/icon/icon_no_photo_80x80.png";
profHTML = "<p><a href=\"" + profile.publicProfileUrl + "\">";
profHTML = profHTML + "<img align=\"baseline\" src=\"" + pictureUrl + "\"></a>";
profHTML = profHTML + " Welcome <a href=\"" + profile.publicProfileUrl + "\">";
profHTML = profHTML + profile.firstName + " " + profile.lastName + "</a>! logout</p>";
}
document.getElementById("loginbadge").innerHTML = profHTML;
}
</script>
<!-- need to be logged in to use; if not, offer a login button -->
<script type="IN/Login"></script>
</body>
</html>
Try replacing
IN.API.Connections("me")
with
IN.API.Profile("me")