1. TOP
  2. Q&A List
  3. LINE Liffで、画面を開いた時にユーザーのプロフィールを取得できない

Q&A

LINE Liffで、画面を開いた時にユーザーのプロフィールを取得できない

伊藤綾子(小森綾子)

Post:
14/06/2020
Last Update:
15/06/2020
Release Country:
Not set

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のコードを誤っておりました。

  • 0
  • 4
  • 2863
    • twitter facebook
Profile picture

伊藤綾子(小森綾子)
Post：
15/06/2020
Last Update：
15/06/2020

Shoya Shiraki様 ありがとうございます！scriptを

<script>
		            window.addEventListener('load', function() {
                    //初期化 
                 
                        liff.init({
                            liffId: "〇〇〇IDを入力〇〇〇"}).then(() => {
                                getProfile();
                                displayLiffData();
                            });
                       
                    })
		            
		        </script>

にすると、Liffアプリを開いた時からプロフィール情報が取得できておりました！ ありがとうございます！

ただ、×ボタンをクリックして再度開くと（LINEのトークルーム内です）、 何回かに一回はプロフィール情報が取得できないのですが、 皆様どうしていらっしゃるのでしょうか・・・

ご存じでしたらご教示いただけますと幸いです。

でもひとまず取得できましたので、助かりました！

  • 0
Profile picture

Shoya Shiraki
Post：
15/06/2020
Last Update：
16/06/2020
Best answer

添付のコードですとliff.initが完了する前にgetProfileが呼ばれており liff.getProfileが動作していないと思われます。

公式リファレンス参考にliff.initが完了した後(then関数の中)でgetProfileを 呼び出すように変更してみてください。

  • 1
Profile picture

伊藤綾子(小森綾子)
Post：
15/06/2020
Last Update：
15/06/2020

Shoya Shiraki様

メッセージありがとうございます。 すみません・・・index.phpのコードを誤っておりました。

<!-- 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: "〇〇〇ID入れております" });
                        getProfile();
                        displayLiffData();

                    })
                </script>

のように、初期化のコードを記載しておりますが、ページ読込時に getProfile(); displayLiffData(); が取得できません… 記載の仕方がいけないのでしょうか… アドバイスいただけますと幸いです。。

  • 0
Profile picture

Shoya Shiraki
Post：
15/06/2020
Last Update：
15/06/2020

ページを開いたときにliff.initの呼び出し処理がないようです。 LIFF SDKの各種メソッドはliff.initが完了した後に実行可能になります。

https://developers.line.biz/ja/reference/liff/#initialize-liff-app

  • 0

Similar posts

Are you sure? question.vm