流れ(PHPで実装)
- トップページの
<script>
にliff.login()
を設置して、アプリに訪れたユーザーにログインしてもらう。 - ユーザーがログインボタンを押すと、トークン等やユーザー情報をJavascriptで取得できるようになる。(このタイミングでも
getProfil()
やliff.getDecodedIDToken()
でユーザー情報を取得できるが、偽装されている可能性があり信用できないので、サーバーには送ってはいけない) -
getIDToken()
で、トークンを取得する。 - 取得したトークンをPHP側に送信
- PHP側で受け取ったトークンと、チャネルIDの2つをパラメータに含めて、
https://api.line.me/oauth2/v2.1/verify
にPOSTリクエストする。 - トークンに基づくユーザー情報がレスポンスされる。(このユーザー情報は信用して良い)
リクエストとレスポンスの詳細は下記に記載。
実装
JavaScript
JavascriptでIDTokenを受け取って、PHPにIDTokenを渡す。
<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js>"></script>
<script charset="utf-8" src="<https://static.line-scdn.net/liff/edge/2/sdk.js>"></script>
<script>
liff
.init({
liffId: '***************'
})
.then(() => {
if (!liff.isLoggedIn()) {
liff.login()
}
const idToken = liff.getIDToken();
console.log(idToken);
})
</script>
ページを読み込む順番は、PHP→HTMLなので、デバッグの時は注意!
PHPはHTMLを描画するためのものなので。
PHP
getIDToken() でトークンを取得して、そのトークンとチャネルIDの2つをリクエストボディに含んでLINE APIにPOSTリクエストすると、そのユーザー情報がレスポンスされる。
http_build_query($params) これを忘れずに!
params のままリクエストしてもエラーになる。
$line_id_token = filter_input(INPUT_POST, 'id_token');
// line_id_tokenをもとにユーザー情報をLINEプラットフォームから取得
$base_url = '<https://api.line.me/oauth2/v2.1/verify>';
$params = [
'id_token' => $line_id_token,
'client_id' => $_ENV['LINE_CLIENT_ID']
];
$query_params = http_build_query($params);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $base_url);
curl_setopt($ch, CURLOPT_POST, TRUE);
curl_setopt($ch, CURLOPT_POSTFIELDS, $query_params);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$return_value = curl_exec($ch);
curl_close($ch);
$ary_return_value = json_decode($return_value, true);
$line_id = $ary_return_value['sub'];
注意
liff.getDecodedIDToken()
ユーザー情報をサーバーに送信しないでください このAPIで取得したユーザー情報をサーバーに送信しないでください。 サーバーでユーザー情報を使用する方法について詳しくは、『LIFFドキュメント』の「LIFFアプリおよびサーバーでユーザー情報を使用する」を参照してください。
上記のように注意書きされているが、liff.getDecodedIDToken()
でユーザー情報を取得すると、その情報が偽装されている可能性があるため。
getIDToken
で習得したトークンを検証して取得したユーザー情報が正しいので、サーバーに保存するならこっちを使うようにする。