LINE Liffの開発をしています。
LINE経由で、Liff用のurlからLiffアプリを開いた時にプロフィール情報を取得したいのですが、できなくて困っております。
以下、コードです。
index.php
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex,nofollow">
<!-- viewportの設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../style/mysheet.css">
<title>〇〇〇</title>
</head>
<body>
<div id="wrapper">
<header>
省略
</header>
<div class="container">
<div class="h1title mt-4">
<h1>〇〇〇</h1>
</div>
<div>
<button onclick="getProfile();displayLiffData();" class="btn btn-danger">getProfile</button>
</div>
<div id="profilepicturediv">
</div>
<table border="1">
<tr>
<th>userId</th>
<td id="useridprofilefield"></td>
</tr>
<tr>
<th>displayName</th>
<td id="displaynamefield"></td>
</tr>
<tr>
<th>statusMessage</th>
<td id="statusmessagefield"></td>
</tr>
</table>
</div>
<div id="liffdata">
<h2>LIFF Data</h2>
<table border="1">
<tr>
<th>language</th>
<td id="browserLanguage"></td>
</tr>
<tr>
<th>isInClient</th>
<td id="isInClient"></td>
</tr>
<tr>
<th>isLoggedIn</th>
<td id="isLoggedIn"></td>
</tr>
<tr>
<th></th>
<td>終了</td>
</tr>
</table>
</div>
<footer class="text-center pt-1 pb-1 small fixed-bottom">
c All rights reserved by YADIRIGI.
</footer>
<!-- liff用scriptを読み込む -->
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script src="../style/liff.js"></script>
<script>
window.addEventListener('load', function() {
//初期化
liff.init({ liffId: "1654330436-BKj1ZRrQ" });
getProfile();
displayLiffData();
})
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
</div>
</div>
</body>
</html>
liff.js
// プロファイルの取得と表示
function getProfile(){
// https://developers.line.me/ja/reference/liff/#liffgetprofile()
liff.getProfile().then(function (profile) {
document.getElementById('useridprofilefield').textContent = profile.userId;
document.getElementById('displaynamefield').textContent = profile.displayName;
var profilePictureDiv = document.getElementById('profilepicturediv');
if (profilePictureDiv.firstElementChild) {
profilePictureDiv.removeChild(profilePictureDiv.firstElementChild);
}
var img = document.createElement('img');
img.src = profile.pictureUrl;
img.alt = "Profile Picture";
img.width = 200;
profilePictureDiv.appendChild(img);
document.getElementById('statusmessagefield').textContent = profile.statusMessage;
}).catch(function (error) {
window.alert("Error getting profile: " + error);
});
}
//その他の情報の取得
function displayLiffData() {
document.getElementById('browserLanguage').textContent = liff.getLanguage();
document.getElementById('isInClient').textContent = liff.isInClient();
document.getElementById('isLoggedIn').textContent = liff.isLoggedIn();
}
【結果】
table内にプロフィール情報が表示されるようにしているつもりですが、
index.phpを開いた時には記載されません。
苦肉の策で、getProfileボタンをつけてみました。クリックした時は、記載されます。
でも、onclickで取得するのではなく、ページを開いたときにgetProfileしたいです。
アドバイスいただけますと幸いです。よろしくお願いいたします。
【200615 編集】
index.phpのコードを誤っておりました。