ラベル LINE の投稿を表示しています。 すべての投稿を表示
ラベル LINE の投稿を表示しています。 すべての投稿を表示

2024年9月21日土曜日

LINEログインの拡張に向けたロードマップ

こんにちは、富士榮です。

LINEログインやLIFFのロードマップが更新されていますね。

https://developers.line.biz/ja/docs/line-login/roadmap/



ログイン回りをピックアップしておきましょう。

リリース時期機能概要対象プロダクト
2024年後半LINEログインのダークモード表示の対象拡大LINEログインにおいて、ダークモード表示に対応するページの範囲を拡大します。LINEログイン
時期未定LINEログイン v1、v2.0へのアクセス遮断既に廃止されているLINEログイン v1、および非推奨となっているLINEログイン v2.0へのアクセスを完全に遮断します。LINEログイン
継続実施アクセシビリティ対応LINEログインを、より多くのエンドユーザーにとって使いやすいプロダクトにするため、アクセシビリティ対応を継続して推進していきます。LINEログイン
継続実施同意画面をより使いやすいものに改善LINEログインを、より多くのエンドユーザーにとって使いやすいプロダクトにするため、A/Bテストなどの分析に基づき、機能やUIの改善を継続して推進していきます。LINEログイン



まぁ、見た目の話が多いですが、旧バージョンのAPIが遮断される時期は引き続きみておかないといけませんね。(少なくとも1.0はもう使われていませんが、2.0からは結構使われているので)

2023年6月29日木曜日

LINEログインの2要素認証の強制とamrクレーム

こんにちは、富士榮です。

ものすごく久しぶりに書いている気がしますが、本当は4月ごろに書きたかったネタです。


簡単にいうと、

「LINEログイン(Webログイン)で2要素認証を要求するかどうかLINEアプリ側で設定できるようになりました。」
という話です。

アナウンス(4月26日付け)

そして、今回は
「LINEログイン(Webログイン)で2要素認証を要求するかどうかを管理者がコンソール側で設定できるようになりました。」
というアナウンスがありました。

アナウンス(6月28日付け)

まぁ、ここまではいいんですが実際2要素認証をした場合としなかった場合でid_token(特にamr=Authentication Method Reference Values。要は認証手段)がどう変わるのか?がアプリケーション開発者側の関心事項だと思うので確認しました。

結果、「2要素認証しても何も値が変わらない」ので非常に残念なんですが一応記録として残しておきます。

設定方法(コンソールで強制する設定)

LINE開発者コンソールからLINEログインを開くと2要素認証を要求する、というトグルスイッチがあります。現在初期値はOFFですが7月下旬ごろから初期値がONになるそうです。

この設定を入れると、Webログインをする際に2要素認証(実際はスマホのLINEアプリ側で画面に表示される4桁の数字を打ち込む)が求められます。

ちなみに、LINEアプリ側でも設定ができるので、先のコンソール側の設定とアプリ側の設定によって挙動が変わります。

ドキュメントにはこのように関係性が整理されています。まぁ、違和感はありません。


で、amrはどうなるのか?

本題ですが、そもそもLINEログインで想定されている認証手段は
  • パスワード
  • QRコード
  • シングルサインオン
  • 自動ログイン(スマホのみ)
の4種類です。

それぞれについてamrの値が以下の通り設定されています。
  • パスワード:pwd
  • QRコード:lineqr
  • シングルサインオン:linesso
  • 自動ログイン(スマホのみ):lineautologin
今回は自動ログイン以外のWebシナリオで2要素認証を強制する機能なのでlineqrとかlinessoがIANAに登録されているのか?(いやされていない)という話は置いておいて、RFC8176的には「mfa」とか素敵な値が返ってくることを期待するんですが、結果何も変わらずpwd/lineqr/linesso(まぁSSOの場合は2要素認証は求められないって仕様なのでいいとして)がそのまま返ってきてしまいました、というオチです。

ということでLINEログイン(Webログイン)を組み込むアプリケーション開発者の皆さんはLINEログイン側で2要素認証が行われているかどうかを判別する手段は今のところ提供されていないので、センシティブな処理を行う場合は独自でセキュリティ強化の対策を行う必要がまだまだありそうです。

ちょっとLINEさんにはフィードバックしておいた方が良さそうかな、と思います。


2021年8月6日金曜日

LINEがFIDO2サーバーをOSSで公開したので触ってみた

こんにちは、富士榮です。

もうすでに記憶の彼方ですがLINEさんは過去にFIDO2サーバーをOSSで公開する!と宣言していました。それが遂に公開されました!素晴らしい!

ということでとりあえず動かしてみました。(まだ中身は全然みてません、単に動かしただけです)




とりあえず公開されているレポジトリをcloneしてREADME.mdに記載の通り動かしてみました。


# Start RP Server
cd rpserver
./gradlew bootRun
# Start FIDO2 Server or Line-fido2-spring-boot Demo
cd server
./gradlew bootRun
cd spring-boot-starter/line-fido2-spring-boot-demo
./gradlew bootRun


やることとしては以上です。

これで http://localhost:8000 にアクセスするとテスト用のトップ画面が出てきます。

まずは認証器の登録

まず画面上部のuser nameとdisplay nameに適当に名前を入れます。

その状態で画面下部のregisterをクリックすると認証器の登録を求められます。今回はMacbook ProのTouch IDを使っていますが、Yubikeyなどのローミングキーやモバイルの場合はFace IDなども使えます。

うまくいけば成功したよ、というメッセージが表示されます。



認証器を使って認証してみる

次は登録した認証器を使って認証してみます。resident_keyにも対応しているので画面丈夫のuser nameを入れないとユーザ名の選択をするところからスタートしてくれます。とっても便利です。
もちろんuser nameを入れてAuthenticateをクリックするとユーザ名を選択することなく認証することもできます。

こちらもうまく認証されると画面下部に成功!とメッセージが出ます。




とりあえず動かしてみた、というだけなので簡単ではありますが以上となります。

OSSでピュアなFIDOサーバーの実装が出てきたというのは非常に画期的なので、これから実装をする方にとってはもちろん、自社のWebサイトへFIDO認証を組み込む方にとっても一つの選択肢になるのかもしれません。(もちろんこれまでもKeycloakのようにOSSでFIDOをサポートしたソフトウェアはありましたが、FIDOの部分だけ抜き出すのも苦労するので)




















2019年8月14日水曜日

Auth0がLINE Loginに対応しました

こんにちは、富士榮です。

先日のCEO訪日もあり色々と盛り上がっているAuth0ですが、訪日時にCEOが宣言した通り、LINE Loginに対応しました。

これまでカスタムコネクタで設定していましたが、これからはスイッチONしてclient設定をすれば使えるようになります。便利です。

ちなみに過去に投稿したカスタムコネクタでの設定方法はこちらです。
 https://idmlab.eidentity.jp/2019/01/auth0line.html


設定は非常に簡単なので解説するまでもありませんが、ざっくりと。


ConnectionsからSocialを開くとLINEのアイコンがありますのでクリックすると設定画面が開きます。



LINEの管理コンソールからChannel ID(=client_id)、Channel Secret(=client_secret)を取ってきます

Auth0側の設定画面に取得したclient_idとclient_secretを設定します

ちなみに、LINEからメールアドレスを取得したい場合は、Auth0の画面でEmail addressの項目にチェックを入れ、かつLINE管理コンソール側のOpenID Connect設定でemail属性を取得できるように申請、承認される必要があります。(私はすぐに承認されました。皆さんがすぐに申請されるものかどうかはわかりませんが)
ここまで設定すればAuth0側はおしまいですが、LINE管理コンソール側にCallback URL(redirect_uri)を設定しておく必要があります。設定するのは、「https://{テナント名}.auth0.com/login/callback」です。
ちなみに、LINE側で良くハマるのが、チャネルを作って設定したのに公開していない、というケースなので、上の図の右上の公開/非公開の部分が公開済み(Published)になっていることを確認しておいてください。


これですべて終了です。
Auth0で「try」をクリックするとLINEログイン(初回は属性提供のための認可画面)が出てきて、認可を行うとログインができます。

尚、その後メールアドレスの確認のためのメールが届きますので、VerifyをクリックするとAuth0上のメールアドレスについても確認済みのフラグが付きます。

ちなみにLINE Loginのクセなのですが、メールアドレスはid_tokenから、その他の属性はprofileエンドポイントから取得するのでAuth0のクセとの相性的に「try」の結果のjsonにはメールアドレスが載ってきません。


Auth0上に登録されたすべての属性を見たければユーザを開いて、Raw Jsonを見るとどんな属性が登録されているかがわかります。

メールアドレスもちゃんと取れてますし、うまく動いていそうです。
(実はクローズドベータの時はメールアドレスがうまくとれてなかったんです・・・)

2019年6月27日木曜日

[LINE Login]どうやってユーザが認証されたのかを判別する

こんにちは、富士榮です。

LINE Loginの最新の更新によりid_tokenにamr(Authentication Method References)が含まれるようになりました。このパラメータはユーザがどのような方式で認証されて来たのか?を判別するためのパラメータで、例えば多要素認証をしたのかどうかをアプリケーション側が把握して追加のセキュリティ対策をするかどうか判断したい、という場合に使われます。

LINEのニュース
https://developers.line.biz/ja/news/2019/06/

詳しくはこちらを、とあるので早速見てみると確かにid_tokenの構成の中にamrの記述が追加されています。

確かに最近LINEは様々なログイン方法をサポートしているのでアプリケーション側でどんな方式でログインして来たのかを把握したいケースも増えてくると思います。
※現状LINEは多要素認証などはサポートしていないので、例えばシングルサインオンでログインして来たら強制的に追加認証を要求する、などのシナリオくらいの使いみちだとは思いますが。今後FIDOのサポートなどが実現してくればもう少し使えると思います。

と、いうことでログインしてみました。
以下はQRを使った場合ですが、確かにamrにログイン方法が出て来ます。便利です!


先に書いた通り、まだまだ使いみちは限定的ですが、今後の多要素認証やFIDOのサポートに期待ですね。

2019年6月18日火曜日

Sign In with Apple連携その後。続々とIDaaSと連携~Auth0編

こんにちは、富士榮です。

前回のポストでAzure AD B2CとのApple ID連携を紹介しましたが、その後も各社が情報を出してきているのでUpdateしておきます。
やっぱりApple ID強いですね。

各社公式記事


特にAuth0はカスタムコネクションではなく、ベータ版ながらもビルトインでの接続を早くも出してきています。

話は変わりますが、先日のAuth0のCEOのEuginioさんが来日された時に発表されたLINE Loginとの連携についても早くビルトインで繋げられるようになればいいですね。

現状LINE Login連携はカスタムコネクションで実装する必要があるので、今すぐつなぎたい人はこちらで。


と、話を元に戻します。
今回はAuth0のビルトインコネクションでのApple Id連携を試してみます。

◆コネクションの有効化~設定

ダッシュボードを開き、ConnectionsよりSocialを選ぶとApple[BETA]が出てきますので、このスイッチをONにします。

続いて、前回Azure AD B2Cに設定したのと同様にclient idなどのApple側の値を設定していきます。
設定するのは、
  • Client ID
  • Client Secret Signing Key
  • Apple Team ID
  • Key ID
  • 取得する属性(名前、メールアドレス)※要するにscopeにnameとemailがつきます(なんだかうまく動いていない気がします)
ポイントはAppleからダウンロードした秘密鍵を張り付けるだけでclient secretを自前で生成しなくて済むのが非常に便利です。




設定が終わってSAVEをするとTRYボタンが現れるので、クリックすると設定が上手く行っているか実際にログインして確認が出来ます。



「It Works!」が出ればOKです。

◆実際のアプリケーションに組み込む

Auth0のダッシュボードからアプリケーションを作成し、Connectionsタブを開くと先ほど設定したAppleが出てきますのでスイッチをONにします。※今回は昔作ったアプリケーションを流用していますので、アプリケーション名が変ですw


これで設定は終わりです。
実際のアプリケーションへアクセスするとAuth0のログイン画面が表示され、その中にAppleが出てくれば成功です。
※ちなみに上2つはカスタムコネクションで設定したLINE LoginとApple Id連携で、今回設定したApple Id連携は一番下のボタンです。


まだ属性の取得周りなど上手く動いていなさそうなところもありますが、今後ブラッシュアップされてくると思うので、期待しておきたいと思います。

2019年5月11日土曜日

European Identity & Cloud Conference 2019でBYOID+DIDの話をします

こんにちは、富士榮です。

昨年に引き続き今年もミュンヘンで開催されるEuropean Identity & Cloud Conferenceでお話させていただくことになりました。

公式サイト
 https://www.kuppingercole.com/events/eic2019

アジェンダを見ていると、AIとDecentralized Identity(ブロックチェーン)が半々くらいですかね。

私は昨年に引き続きBYOID(Bring Your Own Identity)のテーマでケーススタディ+昨年シンガポールで開催されたConsumer Identity World APACで少し頭出しをしたBYOID+Decentralized Identityのテーマで、動くものを少しお見せしようと思っています。

こんな感じの仕組みです。

外部ユーザを招待してOffice365(Teamsとか)を使ってもらうシナリオの一種ではあるんですが、通常のAzure AD B2Bでゲストの招待だとドメインのホワイトリストやTOU(Term of Use/利用規約)への同意くらいしか相手を確認する方法が無いので、その部分でDecentralized IdentityのVerifiable Claimsを使って証明書を提出させて本人確認を行う、というシナリオです。

このことにより、外部ユーザは組織アカウントでもLINEやFacebookなどの個人アカウントでのサインアップ+証明書を提出することによりTeamsやAzure ADに参加したPCへのログインなどが出来るようになります。この辺りをAzure AD B2CやAzure Functionsなどを使って自動化をしています。
外部IDを受け入れる側の組織ではID管理やパスワード管理をする必要が全くありませんので、組織の形態にもよると思いますが使える場面も出てくると考えています。

こんなことも出来るようになります。


ちなみにID Proofing周りはOSSテクノロジー社のLibJeIDとuPortを使って実装しています。

おいおいこの辺りの話しも解説したいと思います。
(月末に開催されるde:code 2019でも触れる予定です)

2019年3月25日月曜日

[LINE Login]LINE Developer CommunityでOpenID Connect(+少しAzure AD B2C)の解説をしました

こんにちは、富士榮です。

そういえば去る3/8にLINE Developer Communityの勉強会でLINE Loginを題材にOpenID Connectの解説をしてきました。(公開資料にはのっけてませんがちょっとだけAzure AD B2Cの話しもしました)

どうもアイデンティティの分野って概念と実装の両方を勉強しないとちゃんと理解できないことが多いので、座学+ハンズオンみたいな感じで勉強する形があっているんじゃないかな?と思っています。

資料とコードはこちらに公開しています。


コード
https://github.com/fujie/line_login

今回はOpenID Connectの基本的な流れを理解してもらうことが目標だったので、特にLINE LoginのSDKも使いませんでしたし、サンプルコードもステップ by ステップでストップしながら流れを理解してもらうことを想定したものなので、プロダクション環境ではくれぐれも使わない様にしてください。。。

ひっそりと申込を開始した割にすぐに定員が埋まってしまったのと最終的にキャンセル待ちが参加できた方の数と同じくらい存在したので、2回目以降の開催も考えていかないとダメですね。(どうしてもハンズオンを入れると1回あたりの人数が絞られますし)

ということで乞うご期待。


早くもクラスメソッドの方がレポートを書いて頂いておりました。感謝です。
 [レポート] 実装して理解するLINE LoginとOpenID Connect入門 に参加してOAuthとOpenID Connectについても学んできた #linedc
 https://dev.classmethod.jp/report/mrmo-linelogin-20190315/

2019年2月6日水曜日

[LINE Login]QRコードログインでメールアドレスもパスワードも不要に!

こんにちは、富士榮です。

ついにLINE LoginがブラウザシナリオでのQRコードログインをサポートしました!
このことにより、LINEへのメールアドレスとパスワードの登録がない人でもPCのブラウザやスマホの標準ブラウザ以外でWebアプリへのLINEログインできるようになりました。
(永らく待ち望んでいた機能なのでとっても嬉しいです)

公式アナウンス
 https://developers.line.biz/ja/news/tags/line-login/


■従来の制限(ブラウザシナリオ)

従来もQRコードログインはPCやMac、iPad用のLINEアプリへのログインには使えていましたが、PCブラウザやスマホでも標準ブラウザ以外でLINE Loginを使ったWebアプリへアクセスすると、メールアドレスとパスワードを使ってログインする必要がありました。

もちろんスマホの場合はLINE Loginの自動ログイン機能が使える環境であれば、ブラウザからLINEアプリが呼び出されて自動的にログイン、ブラウザへ制御が戻る、という流れでメールアドレス・パスワードを使わないログインが実現できていました。

しかし、この自動ログイン機能はカスタムスキームを使ってLINEアプリを呼び出すところまではOKなのですが、標準以外のブラウザだとLINEアプリからブラウザへの戻す時に戻し先ブラウザの制御を行うことが出来なかったため、標準ブラウザの場合に制限されていました。
ということで、自動ログイン機能を使う場合は、以下の制限があります。
  • iOSの場合
  • LINE 7.5.0未満:アプリ内ブラウザで、LINEログインv2を実装したウェブサイトにアクセスすると、自動ログインできます。
  • LINE 7.5.0以降:アプリ内ブラウザまたはSafariブラウザで、LINEログインv2を実装したウェブサイトにアクセスすると、自動ログインできます。 
  • LINE 7.12.0以降:アプリ内ブラウザまたはSafariブラウザで、LINEログインv2またはv2.1を実装したウェブサイトにアクセスすると、自動ログインできます。 
  • Androidの場合
  • LINE 7.14.0未満:アプリ内ブラウザまたはChromeなどの外部ブラウザで、LINEログインv2を実装したウェブサイトにアクセスすると、自動ログインできます。 
  • LINE 7.14.0以降:アプリ内ブラウザまたはChromeなどの外部ブラウザで、LINEログインv2またはv2.1を実装したウェブサイトにアクセスすると、自動ログインできます。
  • 出典)https://developers.line.biz/ja/faq/


    ■QRコードログインが付かなかったことによる制限

    新規にLINEアプリを登録する時、SMSさえ通じればメールアドレスの登録は必須ではなく、パスワードも不要なため、スマホ・ネイティブな世代の殆どがメールアドレスもパスワードも登録しない状態でLINEの利用を開始していると思われます。
    もちろん、LINEもアカウントのリカバリの容易さなどを理由にメールアドレスとパスワードの登録を推奨していましたが、現実問題登録していないアカウントもそれなりの数、存在していました。(数字は言えませんが)

    上記の制限事項もあり、LINE Loginをブラウザシナリオで実装する際は、ある程度の数「使えない」ユーザが存在することを前提に設計を行う必要がありました。

    以前よりLINEさんにはブラウザでもQRコードログインをサポートしてもらえるようにお願いはしていたのですが、ようやく実現した!!というのが今回の発表です。

    ■早速使ってみる

    では、早速使ってみます。(といっても見た目は地味ですが)

    LINE Loginを使うWebサイトにアクセスするとLINEへリダイレクトされます。
    (ちなみに、QRコードログインを使うには、LINE Login v2.1を使っている必要があります)

    ログイン画面が変わっています。下の方に「QRコードログイン」がみえます!
    早速クリックすると、QRコードが表示されます。(一部マスクしています)

    おもむろにスマホを取り出してQRコードをスキャンします。
    (友達追加の時に使うアプリ内のQRリーダーを使います)

    ログイン確認をされるので、ログインボタンをタップします。
    すると、ブラウザに認証番号が表示されるので、スマホ側で数字を入力します。

    ここで入力します。


    問題なく確認が終わると、ブラウザ側でログイン処理が完了、アプリへ遷移します。



    ということで、メールアドレスもパスワードも使わずにアプリケーションへのログインができるようになりました!
    Microsoftアカウント、Yahoo! JAPANのパスワード・レス・ログインに続いてLINEも同体験を実現してきており、ようやく人類がパスワードを捨てることが出来る日がくる予感がしてきました。

    2019年1月31日木曜日

    Auth0でLINEログインを行う(メールアドレスの取得も)

    #2019/07/20 修正:user profile scriptの中でのid_tokenの扱いが変わったので修正

    こんにちは、富士榮です。

    Auth0楽しいです。
    LINE Loginも楽しいです。

    と、言うことでAuth0を使ってLINE Loginを実装してみます。

    ちなみに、Auth0の古田さんが以前書いていらっしゃるQiitaを見ればそのままなんですが、メールアドレスが取れない!という課題が解決していないので、そのあたりもカバーしてみます。

    古田さんのQiita:Auth0でLINEログインを実装してみた(v2.1対応)
     https://qiita.com/furuth/items/6df4334c3821ffc69d9c

    ざっくり解説すると以下のとおり実装します。細かい手順は古田さんのQiitaを見てください。

    1. Auth0のExtensionの「Custom Social Connections」を使う(流石にLINEはビルトインされていない)
    2. LINE側に登録したClientID、ClientSecretをAuth0のExtensionに設定する
    3. Auth0のExtensionは基本的にOAuthなので、ユーザ属性はLINEのProfileエンドポイントから取得する

    LINEの場合、この3番が曲者ですね。
    以前、紹介したとおり、LINE Loginでメールアドレスを取得できるようにはなりましたが、あくまでid_tokenの中に入っており、Profileエンドポイントからは取得できないんです。

    以前のポスト


    と、言うことでAuth0のExtensionの中のプロファイル取得スクリプトでなんとかするしかありません。

    が、このプロファイル取得スクリプト、先に書いた通り、OAuthな前提なので、access_tokenを基にProfileエンドポイントへアクセスして属性を取得するようなサンプルしかありません。

    今回はここでid_tokenをとってきて中からメールアドレスを取り出したいので、以下のようにスクリプトを書き換えます。access_tokenは使いません。
    function(accessToken, ctx, cb) {
      var i = jwt.decode(ctx.id_token);
      var p = {
        user_id: i.sub,
        name: i.name,
        picture: i.picture,
        email: i.email
      };
      cb(null, p);
    }
    

    2019/07/20修正 直ってしました
    ちなみに、LINEが返してくるid_token(JWT)はヘッダにtyp: JWTの記載がないので、node.jsのjsonwebtokenライブラリがうまくjsonオブジェクトに変換をしてくれず、stringで結果が返ってきてしまします。そのため、2行目でJSON.parseをつけてjsonオブジェクトに変換しています。
    ※Azure ADなどの場合はtyp: JWTがヘッダにあるので、JSON.parseは不要でした。jwt.decodeの第2引数にjson: trueってつけるとうまいことやってくれる、というドキュメントは見たことがあるんですが、今回は上手く動きませんでした
    ※場合によってjwt.decodeで怒られることがあるみたいなので、その場合は
     var jwt = require('jsonwebtoken');
     を追記してみてください。

    Tryボタンで動作確認ができ、ログインするとこんな感じでid_token内の属性が取得できます。

    ※(追記)スクリーンショットがわかりにくい(メールアドレスはTryでは出てこない)ので、ユーザ・プロファイルの画面を張っておきます。


    2018年8月27日月曜日

    [LINE Login/LIFF]メールアドレス登録無しでLINEログインできるWebアプリを作るには

    こんにちは、富士榮です。

    LINEログインを使うと、WebサイトへLINE IDを使って簡単にログインすることが出来ます。

    また、LINEログインにはオートログインという機能があり、特定の環境においては端末にLINEアプリがインストールされていれば、ブラウザでLINE IDとパスワードを打ち込むことなく、Universal Linkやインテントを使ってLINEアプリへの遷移、自動的にログインをすることが出来ます。

    しかし、このオートログイン、少々適用条件が厳しめです。

    https://developers.line.me/ja/faq/ より
    iOSの場合
    LINE 5.2.0以降:LINEのアプリ内ブラウザでLINEログインv2の自動ログインが可能
    LINE 7.5.0以降:SafariブラウザでLINEログインv2の自動ログインが可能
    LINE 7.12.0以降:LINEログインv2.1の自動ログインが可能

    Androidの場合
    LINE 6.3.0以降:外部ブラウザででLINEログインv2の自動ログインが可能
    LINE 6.4.0以降:LINEのアプリ内ブラウザでLINEログインv2の自動ログインが可能
    LINE 7.14.0以降:LINEログインv2.1の自動ログインが可能


    こうなってくると、私のようにiOSでChromeを使っている人は結局IDとパスワードの入力から逃れられず、ソーシャルログインのメリットが目減りしてしまいます。
    (もちろん、セッションが永続するので2度目以降は大丈夫なんですが)

    Safariの場合:LINEアプリが立ち上がり自動ログインされる


    Chromeの場合:初回はログイン画面が表示され、2回目以降は確認だけ行われる



    結局のところ、外部ブラウザからの遷移を考えるからこうなるので、LINEアプリ内のブラウザでWebアプリを開いてもらえばこのような問題は起きない話しです。ただし、これまではユーザにアプリ内ブラウザの利用を強制する方法がなく、リッチメニュー(トークルームの下に表示できるカスタムメニュー)を個別に作って対応したりしていた訳です。

    こういう時に便利なのが、LIFF(LINE Front-end Framework)です。

     LIFF概要
     https://developers.line.me/ja/docs/liff/overview/

    仕組み的には、LINEのカスタムURLスキームを使ってLINEアプリ内のブラウザを立ち上げる、という単純な仕組みです。これまではLINEアプリ内でカメラを立ち上げたり、特定のボットのタイムラインを開くことは出来たのですが、アプリ内ブラウザを立ち上げることが出来なかったので、LIFFの登場によりLINEアプリを外部からコントロールする幅が大きく広がった、と言えるでしょう。

     LINEで利用できるURLスキームの一覧
     https://developers.line.me/ja/docs/messaging-api/using-line-url-scheme/


    LIFFを立ち上げるには
     line://app/{liff_app_id}
    を指定します。

    LIFFアプリを作成する際、特定のURLを開くような形でLINEプラットフォームへ登録するため、カスタムURLスキームで外部からLIFFアプリが呼び出されると、LINEアプリ内であらかじめ登録したWebページが開かれる、という仕組みです。

    この仕組みを応用すれば、LINEログインをさせたいアプリを開いたときはLIFFを経由して強制的にアプリ内ブラウザを起動する、ということが出来るので、呼び出し元ブラウザを意識することなくオートログインをさせることが出来るようになります。

    では、早速やってみましょう。


    ◆LIFFアプリを登録する


    LIFFはボット(Messaging API)の一部の機能として提供されていますので、LIFFを登録するためのエンドポイントへのPOSTを行う際は、Messaging APIのチャネルのアクセストークンを使います。

    具体的には、こんな感じのクエリを投げます。
    エンドポイントhttps://api.line.me/liff/v1/apps
    メソッドPOST
    リクエストヘッダauthorizationBearer {Messaging APIのチャネルアクセストークン}
    content-typeapplication/json
    ボディ{
    "view":{
    "type":"full",
    "url":"起動したいWebアプリのURL(要https)"
    }
    }


    上手くいくと、LIFFアプリIDがボディで返ってきます。
    {
     "liffId": "xxxxxx"
    }

    このボディにセットするURLにLINEログインをさせたいWebアプリのURLを指定すればLINEアプリ内のブラウザでアプリを起動することが出来るので、オートログインができるようになります。


    ◆LIFF経由でWebアプリを呼び出す


    後は呼び出すだけですので、User-Agentを見るなりなんなりしてモバイル系ならカスタムURLスキームで呼び出せば問題ありません。

    LIFFアプリを外部ブラウザから呼び出します。


    LINEアプリ内でWebアプリが起動され、自動ログオンされます。


    ちょっとトリッキーではありますが、現段階で様々な環境のユーザをアプリ内ブラウザへ誘導するにはこの方法しかなさそうなので、覚えておくとよいかと思います。

    2018年3月3日土曜日

    [LINE Login]emailアドレスをid_tokenに含めることが出来るようになりました

    こんにちは、富士榮です。

    LINE Login v2.1で新たにメールアドレスが取得できるようになっています。

    https://developers.line.me/ja/docs/line-login/web/integrate-line-login/#applying-for-email-permission

    ポイントは以下の通りです。

    • 事前に申請が必要(ユーザに表示する同意画面のスクリーンショットが必要)
    • 特に承認の連絡はなく、いつの間にかメールアドレスが取得できるようになる
    • id_tokenの中のクレームとして取得できる
    • 当然ですが、scope指定でemailを設定する必要がある

    以前は個別にパートナー登録が必要、かつprofile apiで取得しないと取れなかった属性なので大きな進歩です。

    ということで、やってみます。

    ◆申請

    LINE Developerコンソールを開きます。

    Channel設定の下の方にメールアドレス取得申請が出来ています。

    ここで申請をします。

    この際、同意文書のスクリーンショットが必要なので、あらかじめ用意しておきアップロードする。

    申請済み、となるのでしばし待つ。(いつ有効になったのかは不明です。私は申請当日はテストできなかったので、翌朝テストしたら取得できました)


    ◆クライアントの要求scopeを修正する

    メールアドレスを取得するので、scopeにemailを入れてあげます。

    ◆アクセスする

    後は実際に取得できるか確認するだけです。
    アクセスするとクライアントがメールアドレスへのアクセスを要求していることがわかりますので、同意します。

    ちゃんとメールアドレスが取得できました。

    まだまだ全ユーザがLINEのプロファイルにメールアドレスを登録している訳ではないと思いますが、他方でメールアドレス登録を必須としているアプリケーションやサービスも多いので、メールアドレスをLINEから取得できればユーザのID登録の手間を下げることができ、離脱率をさげることが出来ると思います。

    是非、活用して行きましょう。