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年2月4日月曜日

    Google+のサービス提供終了に伴うbloggerへの影響と本ブログにおける対応

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

    先日アナウンスされた通り、2019年4月でGoogle+のサービス提供が終了しますね。

    ご存知の通り、本blogはGoogleが提供しているbloggerを使っているので、何か影響があるのか調べてみました。
    結果、個人的にはそれほど大きな影響ではなさそうなので、放置することにします。

    ■Googleからの発表内容と本ブログへの影響

    2018年12月の発表、およびその後のメールなどによると、影響と対策は以下の通り。
    ※赤字部分が自身、本ブログに影響がありそうなところ
    ※今後アップデートがある可能性もあるので、一次ソースを見て対策をしてください。(本ポストの内容により影響が出ても責任はもてません)

    • 個人のGoogle+アカウントを持っている人、Google+ページを持っている人
      • 2019年2月4日
        • 新規にGoogle+プロフィール、ページ、コミュニティ、イベントの作成ができなくなる
        • 対策)特になし
      • 2019年4月2日
        • Google+アカウント、ページ等のコンテンツの削除を開始
        • 対策)コンテンツのダウンロードと保存をしておくこと(Googleフォトは消えないので大丈夫)
    • Google+コミュニティのオーナー、管理者の人
      • 2019年3月上旬〜
        • コンテンツのダウンロードと保存が可能になる
        • 対策)ダウンロードしておくこと
    • Google+ログインのボタンをサイトやアプリに配置している人
      • 今後数週間
        • ボタンが機能しなくなる(Googleログインのボタンが代わりに表示されることもあり)
        • 対策)ボタンの撤去。Googleログインのボタンが表示された人はそのまま使える(Googleアカウントでログイン)
    • Google+を使って自身のサイトや他のサイトへコメントを追加している人
      • 2019年2月4日
        • BloggerでGoogle+を使ったコメント機能は使えなくなる
        • 対策)他の機能でコメントする
      • 2019年3月7日
        • 他のサイトでGoogle+を使ったコメント機能は使えなくなる
        • 対策)他の機能でコメントする
      • 2019年4月2日〜
        • 既存のGoogle+で作成されたコメントが順次削除される
        • 対策)ダウンロードして保存しておくこと
    • G Suiteを使っている人
      • ビジネス向けGoogle+はサービス継続(新機能追加、デザイン変更あり)
      • ただし、G Suiteアカウントが外部Google+ユーザと共用しているページやコミュニティ、サークルなどについては一般向けGoogle+と同様に影響を受けるので対策は必要
      • 詳細はこちら
    • Google+ APIを使っている人(開発者)
      • 2019年3月7日
        • 全てのGoogle+ API(Google+ REST APIなど)が停止
        • Google+に関連するscope(例えば、plus.meやplug.login)を使った認可リクエストも受け付けられなくなるので注意

    ■本ブログにおける対応

    特に大きな影響はないので、基本方針は「放置」とします。

    一部影響があるのは以下。

    • プロフィール(私のプロフィール)
      • 対策)Bloggerプロフィールに戻します





    • コメントとリンク(そんなに使っている人もいないと思いますが)
      • Google+アカウントでのコメントは使えなくなります
      • 過去にGoogle+でコメントした人のコメントは消えます(特にこちらでバックアップ、どこかへ移行・公開はしません)
      • Google+への共有はできなくなります




    まぁ、大部分の方には影響ないですね。

    2019年1月31日木曜日

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

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

    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 = JSON.parse(jwt.decode(ctx.id_token));
      var p = {
        user_id: i.sub,
        name: i.name,
        picture: i.picture,
        email: i.email
      };
      cb(null, p);
    }
    

    ちなみに、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では出てこない)ので、ユーザ・プロファイルの画面を張っておきます。