Я внедряю LinkedIn Войти в мое веб-приложение. Я использую следующий script как:
<script type="in/Login"> </script>
чтобы загрузить кнопку SignedIn Sign In. Этот script автоматически загружает кнопку входа LinkedIn с конструкцией или изображением.
но я хочу настроить кнопку с моим пользовательским изображением LinkedIn, и эта кнопка должна сгенерировать событие входа в LinkedIn после нажатия на нее, то есть оно должно служить выше script цель
Справка Plz
Другой способ сделать это:
Поместите изображение, которое вам нравится:
<a href=""><img onclick="liAuth()" src="./img/widget_signin.png"></a>
Создайте функцию JS следующим образом:
function liAuth(){
IN.User.authorize(function(){
callback();
});
}
Используйте данные пользователя LinkedIn:
IN.API.Profile("me")
.fields("firstName", "lastName", "headline")
.result(resultFunction);
Да, это возможно. Мы используем jQuery, так что вот наше решение:
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: apikey
onLoad: onLinkedInLoad authorize: true
</script>
<script type="text/javascript">
function onLinkedInLoad() { // Use a larger login icon.
$('a[id*=li_ui_li_gen_]').css({marginBottom:'20px'})
.html('<img src="/images/shared/linkedin-register-large.png" height="31" width="200" border="0" />');
}
</script>
Вы можете сделать это, как показано ниже:
Создаем собственную пользовательскую кнопку и вызываем по ней функцию click (onclick="doLinkedInLogin()"):
<a href="javascript:void(0);"><img onclick="doLinkedInLogin()" src="./img/widget_signin.png"></a>
Теперь изменил мой код, как показано ниже: -
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: ********
onLoad: onLinkedInLoad //removed this line
authorize: true
</script>
<script>
function doLinkedInLogin(){
IN.User.authorize(function(){
onLinkedInAuth(); // callback function which will process LinkedIn login
});
}
function onLinkedInAuth() {
IN.API.Profile("me").fields("email-address","first-name","id").result(function (data) {
processLinkedInUserDetails(data); //call function with data as parameter if you want to do some process on data
}).error(function (data) {
console.log(data);
});
}
processLinkedInUserDetails = function(data){
//do your stuff with data
};
</script>
Под головой тег
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: xxxxxxxxx
authorize: true
// onLoad: onLinkedInLoad
//scope: r_basicprofile r_emailaddress
</script>
<a href="javascript:void(0)" class="btn btn-default btn-linkedin" onclick='call_linkedin()'>
<i class="fa fa-linkedin-square" aria-hidden="true"></i> <span>Sign In With LinkedIn</span> </a>
<script type="text/javascript">
function call_linkedin() {
if(IN.User.authorize()){
getProfileData();
}else{ IN.Event.on(IN, "auth", function() {getProfileData();});}
}
// Use the API call wrapper to request the member profile data
function getProfileData() {
IN.API.Profile( "me" ).fields( "id", "first-name", "last-name", "headline", "location", "picture-url", "public-profile-url", "email-address" ).result( displayProfileData ).error( onError );
}
// Handle the successful return from the API call
function displayProfileData( data ) {
console.log(data)
}
</script>
Пожалуйста, попробуйте это и дайте мне знать
Вы можете использовать свой собственный html-код, например:
<html>
<head>
<title>LinkedIn JavaScript API</title>
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: put_your_api_key_here
</script>
<script type="text/javascript">
function onLinkedInLoad() {
IN.UI.Authorize().place();
IN.Event.on(IN, "auth", function () { onLogin(); });
IN.Event.on(IN, "logout", function () { onLogout(); });
}
function onLogin() {
IN.API.Profile("me").result(displayResult);
}
function displayResult(profiles) {
member = profiles.values[0];
alert(member.id + " Hello " + member.firstName + " " + member.lastName);
}
</script>
</head>
<body>
<input type="button" onclick="onLinkedInLoad()" value="Sign in using LinkedIn account" />
</body>
</html>
для пользовательской кнопки linkin
<div onclick="liAuth()">sign in with linkedin</div>
<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">
function liAuth(){
IN.User.authorize(function(){
});
}
// 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 basic profile data
function getProfileData() {
IN.API.Raw("/people/~").result(onSuccess).error(onError);
}
</script>
**LinkedIn Customize button onclick function you can call linked in login function**
<!-- language: lang-html -->
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: Your App Key //add your linkedIn aap key here
authorize: true
</script>
//create your customized linkedIn button with css
<div id="wLinkedIn">
// use onLinkedInLoad onclick function in customized button
<a href="#" onclick="onLinkedInLoad();">
<span id="icon-bg"><i class="fa fa-linkedin"></i></span>
<span id="icon-label-bg">Login with LinkedIn</span>
</a>
</div>
<!-- language: lang-js -->
// ----------------------------LinkedIn Sdk---------------------
function onLinkedInLoad() {
IN.UI.Authorize().place();
// call onLinkedInLogin on click of button
IN.Event.on(IN, "auth", function () { onLinkedInLogin(); });
//IN.Event.on(IN, "logout", function () { onLinkedInLogout(); });
}
function onLinkedInLogin() {
//alert('logged in');
//get all user data from linked in plugin
IN.API.Raw("/people/~:(id,firstName,lastName,emailAddress)format=json").result(function (data)
{
console.log(data);
var profileData = data;
LinkedInFName = profileData.firstName;
LinkedInLName = profileData.lastName;
LinkedInEmail = profileData.emailAddress;
LinkedInId = profileData.id;
//alert("LinkedInFName : " + LinkedInFName);
GetLinkedinLoginDetails(LinkedInEmail, LinkedInId)
}).error(function (error) {
console.log('Error : ' + error);
});
}
function onSuccess(data) {
}