LinkedInログインをWebアプリに実装しています。次のスクリプトを使用しています。
<script type="in/Login"> </script>
linkedInのサインインボタンをロードします。このスクリプトは、修正されたデザインまたは画像を含むLinkedInサインインボタンを自動的にロードします。
しかし、LinkedInのカスタム画像を使用してボタンをカスタマイズしたいのですが、このボタンをクリックすると、LinkedInログインイベントが生成されます。つまり、スクリプトの目的を超えている必要があります。
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>
あなたはそれを以下のように行うことができます:
独自のカスタムボタンを作成し、クリックするだけで関数を呼び出します(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'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>
これを試して、私に知らせてください