“LINEでログイン”をさらに進化させる「Profile+」の機能と仕組み

Profile+とは何か

御代田亮平氏：「Profile+って知ってますか？」というタイトルで、御代田が発表させていただきます。

まず自己紹介ですが僕は、LINE Loginを簡単にネイティブのアプリケーションに導入することができる「Native SDK」の周囲を担当しているPMです。今日は京都オフィスから来ました。LINEもTwitterも、「@josolennoso」で検索すると出てきます。

では、もう1回タイトルに戻りますが、Profile+は知ってますか？　これ、みなさんに聞いてみようと思います。Profile+を使ったことある方はどれくらいいらっしゃいますかね……？

（会場挙手）

あんまりいない。なるほど。そうなんですね。

実際そうで、「実はこんなところにあります」というくらいわかりづらいところにあります。なのでご存知なかった方は、今LINEを開いていただいて、一緒に見ていただければと思います。

まずこのセッティングのところからですね。

プロフィール、と押すとこんな感じになると思います。

ここでもなくて、ここを1番下までスクロールしていくと、「LINE Profile+」というものがあります。これをクリックすると、こんなやつが出てくると思います。

使ったことない方は、「使いませんか？」みたいな、そういう画面が出てくると思います。これで今日、100人くらいユーザー数が増えたということですかね（笑）。

これはユーザーの自分自身のデータを、LINEを通じてLINEアカウントに保存することができます。そのデータをためるためのツールと思っていただければいいと思います。

実際に保持できるデータの属性としては、氏名・性別・誕生日・電話番号・Eメール、あとは住所です。

ちなみに住所は10個まで登録できるようになっています。なので今回の粗大ごみのLIFFの中でもこれが使われていて、もしProfile+でこのあたりの情報をためている方は、おそらく自動的に入力できた体験をしたことがあるかもしれません。

実際に今回使っているのは、氏名と電話番号、Eメールと住所ですね。

Profile+のコンセプト

もともとProfile+はどんなコンセプトでやっていたかと言うと、LINEに保持している個人のプロフィール情報を、自分で持つだけだと、眺めるだけで終わってしまいます。それをサードパーティの開発者のみなさんが作ったアプリケーションに簡単に共有することで、例えば会員登録だとか、そういったものを簡単にできるようにしよう、というコンセプトでやってきていました。

ただ、実際開発者にも使えるようなかたちのものもあったんですが、いろんな事情であまりうまくいかないこともありました。ですので、今後は新しいかたちで提供しようと考えています。

実はJSのSDKもあって、例えばWebページ上でこのように「Import～」とやると、先ほどの自分のProfile+に登録しているデータが表示されて。

それで「Import」とすると、このように会員登録とかの入力の手間を省けるという。そういったものでした。

ただこれは以前一部のパートナー様にのみ提供していたんですが、今は新規のパートナーの募集はやっていなくて。その代わり、ペイメントなどと結びついたかたちで提供する予定でございます。

サーバーサイドの挙動について

では、ここでサーバー側の話をさせていただきます。例えば今回の例で使ったように、LIFFの中からログインサーバーをこのように呼んでいます。

その中で「電話番号とEメール」と「ほかのデータ」は、実は分けて保存しています。

これはなぜかと言うと、電話番号やEメールはLINEではユーザーの認証情報に使っているので、もっとセキュアなエリアに入っています。そのため、このように2つに大きく分けたものを、サーバー側でこねくり回して返す、ということをしてます。

「Authentication DB」はわかりやすいと思いますが、その下の「Passport DB」という名前になっているものに対して、「なんでだろうな」と思われる方がいるかと思います。

これはProfile+の本体のデータが入っているDBなんですが、もともとそのようにLINE上にいろんな自分のデータをためて、それを外のサービスで使うと、いつでもどこでも簡単に、自分のデータが共有できる。それを見せることができる「パスポートのようなもの」という概念でプロジェクトが始まった経緯から、未だにDBだとかサーバーの名前は「Passport」という名前が入っていたりします。

このLINEアプリケーションとサーバー間で何をやっているか、もう少し説明いたします。

今回の例ではチャットボットのインスタンスが真ん中にあります。

LINEのトークルームの中にLIFFのブラウザが立ち上がるかと思うんですが、そのとき「Vanilla LIFF」というタイプのLIFFを特別に使っています。基本的にそこまで大きな違いはありません。

LIFFの中で立ち上がったWebアプリから、今回はチャットボットのインスタンスになっていますが、そこからLINE Login Serverになんらかの通信が行き、リクエストとレスポンスが行われています。

LINE Login Serverからチャットボットのインスタンスには、このようなデータを返しています。

先ほど清水からも話したとおり、OpenID Connectの形式でLINE Loginの個人のデータは、各アプリケーションサーバーに返しているというかたちになっています。

OpenID Connectに準拠

LINE Loginはそういった意味で、OpenID Connectに準拠しているサービスになってます。ちなみに、OpenID Connectをご存知の方はどれくらいいらっしゃいますか？

（会場挙手）

まだ半分くらいということですね。OpenID ConnectとはOAuth 2.0の上に乗っかってるシンプルな、アイデンティティだとか自分のオーセンティケーション情報をためるようなレイヤー……みたいなことが、もともとのRFC上は書いてます。

実際そのとおりで、感覚的には「個人のアイデンティティ情報・オーセンティケーション情報にOAuth 2.0を加えたもの」が、OpenID Connectだと思っていただければいいと思います。

id_tokenの動き方

とくに「id_token」と強調されている部分のところについて、もう少し説明しようと思います。

このid_tokenがどのように返ってくるかと言うと、OAuth 2.0の認証・認可の最後の段階で、アクセストークンをログインサーバーから取るフローがあると思います。実際、ここで「api.line.me/oauth2/v2.1/token」というところに叩いてるんですが、そうするとデベロッパー側が「このデータが欲しい」と言うデータを、このid_tokenの中に入れて返してきてくれる、ということをしています。

このあとデモもお見せしますが、id_tokenの中身をもうちょっと見てみると、このようなデータが入っています。

よく見ると、例えば「sub」。「user_id」となっているところは、LINEのユーザーIDが入っています。このid_tokenの中では、名前や「picture」「email」「phone_number」というものが返ってくることがわかると思います。

JS SDKのデモ

ということでちょっとデモを、2つお見せしたいと思います。

まずは先ほどの、Profile+のJS SDKのデモをしたいと思います。例えばこれが実際の、なにかの会員登録ページだと思ってください。そのときに、もしProfile+上にデータをためていると、このWebページにはProfile+のJSのSDKを埋め込んであるんですが、このように別タブで自分のProfile+のデータを表示してくれます。これ、LINEのドメイン上にここからは移動しているのがわかると思います。

ここでインポートしたいデータを……例えば今回、「性別」と「誕生日」はやめときましょう、とやると、このようにオートフィルインされます。

とくにモバイルのWebアプリケーションのときは、ユーザーは入力するのはすごく煩雑です。そのために、こういったものがあると、ECサイトさんにとって非常に便利ということで、一部に提供しておりました。もう少しするともっと良い形で一般の開発者のみなさまにも提供できる予定でございます。

もう1つ、先ほどLINE Loginサーバーからチャットボットに向けてid_tokenが返っていたと思いますが、そのフローをデモしたいと思います。

OAuthのフローの最初のところで、そのユーザーに対して「どういうデータが欲しい」という、「スコープ」と呼ばれるものですが、それを指定すると思います。ここでは、「OpenID」というスコープと、「email」と「font」、「address」と「real name」。これはおそらく、実際に粗大ごみBotのLIFFアプリケーションの中で使っているものと同じスコープのセットだと思いますが、これを設定いたします。

ちなみに現在、OpenID・emailに関しては、一般のデベロッパーのみなさんに提供しております。emailは申請ベースで提供しております。ただ、ほかのものに関してはまだパートナー先行となっていますので、まだみなさまには、すぐにはお使いいただけません。

ここでLINE Loginをすると、このように認可画面が出てきます。ここを見ると「メールアドレス」「電話番号」「住所」「氏名」。「あげていいですか？」というふうに聞いてくるので「同意する」と。

そうすると、先ほどのLINEのログインサーバーからチャットボットのサーバーにこのようなトークンが返されています。ここにid_tokenというフィールドがあって、非常に長い文字列があるんですが、これをデコードするとこんな情報が入ってます。

実際に見てみると、address、Email、電話番号など、そういった値が入っているのがわかると思います。