# LIFFアプリを開く
LIFF v2では、LIFFブラウザまたは外部ブラウザでLIFFアプリを開くことができます。 ここでは、ユーザーがLIFFアプリを開く操作を説明します。
ユーザーがLIFF URLにアクセスします。
LIFF URLは、LIFFアプリをチャネルに追加すると、発行されます。
たとえば、LINEのトーク画面に、LIFFアプリを開くためのURLを入力し、吹き出しに表示されたURLをタップします。ユーザーがLIFFアプリに必要な権限を与えることを許可します。
LIFFアプリが開きます。
ユーザーがLIFF URLにアクセスすると、外部ブラウザまたはLINE上でLIFFブラウザが開きます。どちらの環境で開くかは、iOSの場合はユニバーサルリンク (opens new window)、Androidの場合はApp Links (opens new window)の仕様に従います。
LINE以外のネイティブアプリ上でも開けますが、その場合は各ネイティブアプリのWebView仕様に準拠するため、どこで開かれるかは保証しません。
# LIFF URLにアクセスしてからLIFFアプリが開くまでの動作について
2020年6月29日にお知らせしたとおり、LINE Developersコンソールの[エンドポイントURL]に入力したパス(/path
)およびクエリパラメータ(?key=value
)を、LIFFアプリで利用できるようになりました。
新仕様を利用するには、LIFFアプリの[LIFF URLの追加情報の処理方法]を「連結」に設定します。 今後は、新仕様を利用することを推奨します。
なお、以下の点に注意してください。
- LIFFアプリが新仕様に対応していない場合は、「置換(後方互換性モード)」に設定してください。この場合は、仕様変更の影響を受けません。
- 新しいLIFFアプリを追加した場合は、「連結」に設定されています。追加するときは、この設定項目は表示されません。必要に応じて編集してください。
- 「連結」を使用する場合、LIFF SDK v2.3.0以降を使用してください。v2.3.0より前のバージョンを使用すると、「連結」に設定していても「置換(後方互換性モード)」の仕様でLIFF URLの追加情報が処理されます。
ここでは、ユーザーがLIFF URLにアクセスしたときに、LIFFアプリが正しく開くように実装するために、2つのリダイレクト先の設定方法、およびliff.init()
メソッドを実行するタイミングを説明します。
リダイレクト先 | 説明 |
---|---|
1次リダイレクト先URL | ユーザーがLIFF URLにアクセスしたときに、LIFFサーバーから初めてリダイレクトされる先のURLです。ここにリダイレクトされたときに、liff.init() メソッドを実行します。 |
2次リダイレクト先URL | liff.init() メソッドが実行されたときに、ユーザーがリダイレクトされる先のURLです。ここにリダイレクトされたら、LIFFアプリのページを表示します。 |
1次リダイレクト先URL以外のタイミングでliff.init()
メソッドを実行すると、INIT_FAILED
が返され、LIFFアプリを開けません。
# LIFF URLを作成する
LIFF URLは、LINEが提供するLIFFサーバーを指すURLです。 LIFFアプリをチャネルに追加すると、発行されます。
# 1次リダイレクト先URLを作成する
1次リダイレクト先URLは、常にLINE Developersコンソールの[エンドポイントURL]に指定したURLです。
1次リダイレクト先URLでは[LIFF URLの追加情報の処理方法]の設定にかかわらず、LIFF URLに指定した追加情報(例:path_A/?key1=value1#URL-fragment
)はすべてliff.state
クエリパラメータに含まれています。
例:https://example.com/2020campaign/?key=value&liff.state=urlencoded(path_A/?key1=value1#URL-fragment)
なお、LIFF URLに追加情報を指定しない場合は、liff.state
クエリパラメータは省略されます。
# 2次リダイレクト先URLを作成する
2次リダイレクト先URLは、LINE Developersコンソールの[LIFF URLの追加情報の処理方法]の設定と、ユーザーがアクセスするURLによって異なります。
# [LIFF URLの追加情報の処理方法]が「連結」の場合
LINE Developersコンソールの[エンドポイントURL]に指定したパスやクエリパラメータ(/2020campaign/?key=value
)が、2次リダイレクト先に含まれます。
ユーザーがアクセスするURL | 2次リダイレクト先URL |
---|---|
LIFF URL(1) 例: https://liff.line.me/{liffId} | LINE Developersコンソールの[エンドポイントURL]に指定したURLです。 例: https://example.com/2020campaign/?key=value |
LIFF URLに追加情報を指定したURL(2) 例: https://liff.line.me/{liffId}/path_A/?key1=value1#URL-fragment | 図の(2)のように3種類の情報を組み合わせたURLです。
https://example.com/2020campaign/path_A/?key=value&key1=value1#URL-fragment |
# [LIFF URLの追加情報の処理方法]が「置換(後方互換性モード)」の場合
LINE Developersコンソールの[エンドポイントURL]に指定したパスやクエリパラメータ(/2020campaign/?key=value
)が、2次リダイレクト先に含まれないことがあります。
ユーザーがアクセスするURL | 2次リダイレクト先URL |
---|---|
LIFF URL | LINE Developersコンソールの[エンドポイントURL]に指定したURLです。 例: https://example.com/2020campaign/?key=value 注意:[エンドポイントURL]の設定内容によっては、指定したパスやクエリパラメータ( /2020campaign/?key=value )が、2次リダイレクト先に含まれないことがあります。 |
LIFF URLに追加情報を指定したURL | 以下の2種類の情報を組み合わせたURLです。
https://example.com/path_A/?key1=value1#URL-fragment 注意:[エンドポイントURL]に指定したパスやクエリパラメータ( /2020campaign/?key=value )は、2次リダイレクト先に含まれません。 |
liff.permanentLink.createUrl()
メソッドを実行したとき、現在のページのURLが、[エンドポイントURL]に指定したURLで始まらない場合、パーマネントリンクを取得できません。
特に[LIFF URLの追加情報の処理方法]が「置換(後方互換性モード)」のときは、[エンドポイントURL]に指定したパスやクエリパラメータ(/2020campaign/?key=value
)が、2次リダイレクト先に含まれないことがあります。
その場合、liff.permanentLink.createUrl()
メソッドが上記の条件を満たすため、パーマネントリンクを取得できません。
# LIFFアプリから別のLIFFアプリを開いた場合の動作について
画面サイズがFull
表示のLIFFアプリ内で、別のLIFFアプリへのリンクをクリックすると、LIFFブラウザを開いたまま別のアプリを表示することができます。
ブラウザが閉じないため、LIFFブラウザの戻るボタンで遷移元のLIFFアプリに戻ることができます。
別のLIFFアプリへ遷移する際に、liff.init()
がliff.login()
を実行しLINEログイン処理を行いますが、この画面遷移中はPromise
オブジェクトはresolveまたはrejectもされず、pending状態のままとなります。ログイン処理後のLIFFアプリのエンドポイントURLを開いたタイミングで、初めてliff.init()
がresolveあるいはrejectされます。
- LIFF SDKバージョンが2.4.1以上、ユーザーのLINEバージョンが10.18.0以上
- 遷移元のLIFFアプリの画面サイズが
Full
表示に設定されている - 遷移先のLIFFアプリが
liff.init()
で正しく初期化されている
liff.login()
メソッドの引数にredirectUri
を指定した場合、指定したURLが[エンドポイントURL]のドメイン名とパスの組み合わせ(例:https://example.com/path
)と一致しているか検証されます。不一致だった場合はエラー画面が表示され、LINEログインに失敗します。
if (!liff.isLoggedIn()) {
liff.login({ redirectUri: "https://example.com/path" });
//ドメイン名とパス(https://example.com/path)がエンドポイントURLと一致しているか検証します。
}
redirectUri
を指定することで、[エンドポイントURL]が正しく設定されていることを確認できます。なお、クエリパラメータ(?key=value
)やURLフラグメント(#URL-fragment
)は検証されません。
URL一致の判定基準は、[LIFF URLの追加情報の処理方法]の設定によって変わります。詳しくは、「URL検証機能」を参照してください。
- 遷移元のLIFFアプリの画面サイズが
Tall
もしくはCompact
の場合は、遷移先の画面サイズにかかわらず一度ブラウザが閉じてから、遷移先のLIFFアプリが表示されます。 - 遷移元のLIFFアプリの画面サイズが
Full
の場合は、遷移先のLIFFアプリの画面サイズがTall
もしくはCompact
でもFull
サイズで表示されます。
古いバージョンのLIFF SDKを使っている場合、以下のような意図しない動作になることがあります。
- パス(
/path
)が指定されたLIFF URLから別のLIFFアプリへ遷移したにもかかわらず、LINE Developersコンソールの[エンドポイントURL]に指定したURLへ遷移してしまう - ユーザーに権限の認可を求める同意画面で[キャンセル]をクリックした場合、一度LIFFブラウザを閉じなくてはならない
- 遷移先がLINEミニアプリの場合、LIFFブラウザヘッダのデザインが自動で変化しない
複数のLIFFアプリ間を遷移するように設計する際は、最新版のLIFF SDKを使うことをお勧めします。