web-dev-qa-db-ja.com

Linkedinログインボタンのカスタマイズ

LinkedInログインをWebアプリに実装しています。次のスクリプトを使用しています。

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

linkedInのサインインボタンをロードします。このスクリプトは、修正されたデザインまたは画像を含むLinkedInサインインボタンを自動的にロードします。

しかし、LinkedInのカスタム画像を使用してボタンをカスタマイズしたいのですが、このボタンをクリックすると、LinkedInログインイベントが生成されます。つまり、スクリプトの目的を超えている必要があります。

Plzヘルプ

oauth-2.0linkedin-jsapi
13
Sam

これを行う他の方法：

  1. 好きな画像を配置します。

    <a href=""><img onclick="liAuth()" src="./img/widget_signin.png"></a>

  2. 次のようなJS関数を作成します。

    function liAuth(){
   IN.User.authorize(function(){
       callback();
   });
}

  3. LinkedInユーザーデータを使用する：

    IN.API.Profile("me")
   .fields("firstName", "lastName", "headline")
   .result(resultFunction);
25
Rostik

はい、可能です。 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>
10
Ajeesh

あなたはそれを以下のように行うことができます：

独自のカスタムボタンを作成し、クリックするだけで関数を呼び出します（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>
2
Anant Singh---Alive to Die

ヘッドタグの下

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

これを試して、私に知らせてください

0
Tapas Palui