Настройка кнопки входа в Linkedin

Я внедряю LinkedIn Войти в мое веб-приложение. Я использую следующий script как:

<script type="in/Login"> </script> 

чтобы загрузить кнопку SignedIn Sign In. Этот script автоматически загружает кнопку входа LinkedIn с конструкцией или изображением.

но я хочу настроить кнопку с моим пользовательским изображением LinkedIn, и эта кнопка должна сгенерировать событие входа в LinkedIn после нажатия на нее, то есть оно должно служить выше script цель

Справка Plz

Ответ 1

Другой способ сделать это:

  • Поместите изображение, которое вам нравится:

    <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);
    

Ответ 2

Да, это возможно. Мы используем 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>

Ответ 3

Вы можете сделать это, как показано ниже:

Создаем собственную пользовательскую кнопку и вызываем по ней функцию 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>

Ответ 4

Под головой тег

    <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>

Пожалуйста, попробуйте это и дайте мне знать

Ответ 5

Вы можете использовать свой собственный 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>

Ответ 6

для пользовательской кнопки 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>

Ответ 7

        **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) {

            }