皆さん こんにちは Googleのエジです このコードラボではWebOSの使ってWebサイトのサイン認証を生体認証を使って実現していただくという体験をしていただきます こちらのページをご覧いただきながら進めていきますので まずは このURLを開いてくださいなお このコードラボについて注意点が2つあります まず本日作っていただくのはあくまでWebOSのフロントエンド部分 ブラウザーに関わる部分であって サーバーについては 既に完成しているものを使っていただくことになります 2つ目はコードラボ中 生体認証ですとか質問認証という言葉が出てきますけれども 正確にはユーザー認証機能付き プラットフォーム認証機というものを指しています 正確さを犠牲に分かりにくい説明になることを避けたため こういった説明になりますけれども あるかじめご了承くださいさて 改めまして 今回のコードラボではWebOSの使ってWebサイトのサイン認証を 生体認証で実現する体験をしていただきます 現地点ではファイド2を使って実現できる認証のユースケースは大きく 2つあります 1つはニューゾー認証これはユーザー名とパスワードに加えて ファイドに対応したセキュリティキーをニューゾメとして使うという ものです エンタープライズ環境などで既に馴染みのある 方も多いかもしれませんけれどもUSBなどでコンピューターに接続 できるセキュリティキーをニューゾメとして使います セキュリティキー というハードウェアを入手しなければならないという意味では 一般のユーザーの皆さんには若干ハードルが高いものになっています そして もう一つのユースケースが今日のテーマでもあるサイン認証です ユーザーが既にログインしている状態で クレデンシャル 多くの場合はパスワードですけれどもこれを飲みを入力することで サイド認証することを指します例えばセッションが切れてしまった お金を払うページに占一したパスワードを変更する画面に 占一したといったようなときに見るユースケースです 例えば ショッピングサイトでお金を払う直前にパスワードが聞かれる ことがありますけれども あれを明示していただけるといいかと思います そして そういったサイン認証の場面でパスワードの代わりに 生態認証を使うというのが今日のコードラボで皆さんに挑戦 したたくないようになりますまずコードラボを開始した時点 では 生態認証なしのパスワードのみによるサイン認証が使える 状態になっています ユーザーメアを入力し パスワードを 入力することでログインできます このコードラボで 取り扱う画面はこの3つだけです その後 トライリーオース ボタンを押すとパスワードだけが聞かれて サイン認証することが できます このコードラボではまずは私が内容を解説し その後皆さんが 実際に行動を書くという作業を繰り返すことで 4つのステップに分け 生態認証を使ったサイン認証を導入していきます まず 最初のステップでは 指紋を使用してクレデンシャルを登録 するということで デバイスの持っている生態認証機能 いい方を変えるとユーザー認証機能を付き プラットフォーム 認証機を登録します 2つ目のステップでは クレデンシャルを登録 取得 削除するUIを作るということでホームのパスでクレデンシャル を登録する機能を呼び出せるようにし 簡単なクレデンシャル の管理機能を追加します 3つ目のステップでは 指紋でユーザー を認証するということで 逆に戻ってきたとき つまり 指紋などの 生態認証を使って認証する機能を追加します 最後の ステップでは 再認証を有効にするということで リオース のパスで追加した認証機能を呼び出せるようにUIを変更します 完成品 をご覧いただきましょうまずはユーザーネームとパスワード を入力してログインしていただきますここでパスワードが聞かれる理由 ですが FIDOでは公開鍵ペアを認証機ごとに生成するため 別のデバイス に移った際には必ず生態認証以外の方法でログインする 必要があります 将来的に FIDOによってパスワードが不必要な世界が実現 すると期待されていますけれども今回のコードラボではパスワード を完全なくすこと自体はゴールではありませんので ご了承ください 新しいクレデンシャルはログインした画面でアドアクレデンシャル ボタンを押すことで登録することができます これによって 以後 このデバイスを使った生態認証が可能になります トライリー 用すボタンを押していただくと先ほどパスワードを入力した 画面に戻ります それと今度はパスワードを入力するフォーム の代わりにオーセンティケートというボタンが表示されますので これをタップすることで生態認証が起動されます ここで無事認証できればログイン成功となります 本日のコードラボ はグリッチというサービスを使って実装していきます コードラボ 2ページ目にリンクがありますので これをクリックしてグリッチ を開いてくださいグリッチはブラウザだけで Node.js を使ったサーバーとフロントエンドのコードがかけるという大変 便利なプラスフォームになっています 画面左上にあるメニューの リミックスプロジェクトをクリックして自分用にフォークして作業を 開始します それではいよいよコードラボを開始していきます まずは3ページ目を開いてくださいまずはクレデンシャルを登録する ためのレジスタークレデンシャル関数を作るところからスタート しましょう 関数のプレスフォルダーから作ります この部分をコピー してグリッチのfabriccliant.jsというファイルを開いてto doの1の部分 にコピーしていきます 残りの作業も同様にして基本はコッピーで すべて完了しますけれども その都度書いてある注意事項などをよく 読んで何をしているか把握しながら進めていきましょう 続いてサーバー からチャレンジやオプションなどを取得します デフォルトのオプション を指定してあらかじめ用意されているサーバーのエンドポイント を送ることでパブリッキークレデンシャルクレーションオプション づというwebOSの関数に渡せる形のレスポンスを受け取ります このオブジェクトですが超重要ポイントなのでここでちょっとだけ時間 をかけて説明します皆さんご存知のとおりファイドウ は公開開機ペアを認証器という専用のデバイスで生成 管理 することができるという点が特徴になっています 認証器 には大きく二つの分類があります一つ目の分類はローミング 認証器 もしくはプラットフォーム認証器です ローミング認証器 はいわゆるセキュリティキーと呼ばれるものでデバイスとは別 に持ち歩いたり複数のデバイスをまたいで使うことができます 逆 にプラットフォーム認証器はデバイスにあらかじめ備え付けられている ものです 二つ目の分類はユーザーを認証する機能があるかないか です プラットフォーム認証器はほとんどの場合生態認証 指紋認証や顔認証などのユーザー認証機能を備えています ローミング 認証器の場合最近生態認証を備えたセキュリティキー も増えてきてはいるんですけれどもほとんどのものにはついていません ただ見た目上生態認証機能のないセキュリティキーでもピンを入力 する形でユーザー認証機能を備えているケースもあり得ます ファイド2と名記されているセキュリティキーの場合 何らかのユーザー認証機能が利用できる可能性があります ので 説明書などを読んでみてください さて これらを踏まえる と二つのパラメータの指定方法がわかります 一つはオーセンティケーターセレクションのオーセンティケーター をタッチメントでこれはプラトフォームもしくはクロスプラトフォームを指定 することができます プラトフォームであればプラトフォーム認証機 クロスプラトフォームであればローミン認証機もしくはセキュリティキー を指しています 二つ目はオーセンティケーターセレクションのユーザーベルフィケーション でリクワイド プリファードまたはディスカレッジドが指定 できます ユーザー認証機の利用したい場合はリクワイド 利用したくない場合はディスカレッジドを指定してください ここまででもうお分かりだと思いますけれども生態認証機のつまりユーザー認証機 のつきプラトフォーム認証機を使いたい場合はオーセンティケーター アタッチメントをプラトフォームにユーザーベルフィケーション はリクワイドを指定しましょうコードラボに実際にサーバー から帰ってくるオブジフトの例がありますのでその他のパラメータ についても時間になる時にご自分で調べてみてください さて サーバーからオブジェクトを受け取る際 本来バイナリーで渡される べきもののいくつかがベースロックユーゼルでエンコードされています のでデコードします この際 グリッジではベースロックユン関数が定義 されていないため赤い印がつきますしかしこの関数は外から呼び出して ライブラリーで利用可能になっているため無視していただいて構いません それではいよいよウェボースの使ってクレデンシャルを生成 登録します 先ほどのオプション数というオブジェクトをパブリッキー プロパティーの値としてナビゲータークレデンシャルズクレートに渡します この関数が実行されるとブラウザーを認証器を呼び出し 認証器を操作 することが求められます パラトフォーム認証器のついたデバイス上のブラウザー でこの関数を呼び出す場 生態認証のダイヤログが出てきて 認証することができるはずですここで起きることはすでに デバイスに登録されている生態認証を使って本人確認をする こと それと 認証器はオリジンに紐づいた公開鍵ペアを作り 公開鍵を返します 一点覚えておいていただきたいのは この際 ユーザー の指紋や顔など 生態情報はファイドのプロトコロンに含まれていない ため 一切サーバーに渡されないように作られているという点です 結果 として得られたクレデンシャルはサーバーにHTTPで送信します この際 バイナリーのデータをベース6読んでエンコードする 必要があります またクレデンシャルのIDはローカルストレージ に保存しておきましょう これは認証理事に利用します そして 最後 にクレデンシャルをサーバーに送信して終了です 改めて サーバー 側の処理はこのコードラブの内容に含まれませんが オープンソース のライブラリアスソリューションを駆使して必ず検証を行って ください それではいよいよ皆さんの番です これまで説明した 部分までの作業を開始してください 時間になりましたので 次の ステップに進みます現時点でホームパスの画面 はTry Reuseボタンとサインアウトボタン以外に何もありません が ここに新しい認証器の登録と削除が行える管理用UIを作って いきます まずはエシメールを追加します これは認証器が利用できる かに応じて 動的に表示内容を変えられるようをCSSで制御します これは bues-home.esmailのtude2.1にペーストします 認証器が利用できる かどうかは2つの軸で調べます1つはブラウザがWebOSのサポート しているかをパブリッキークレデンシャルオブジェクトがある かどうかで調べる もう1つはisUser Verifying Platform Authenticator Available が True を返すかどうかで調べます両方が使えれば新しい認証器を追加 するボタンを表示し いずれかが使えなければワーニングを表示します これはtude2の2に追加します次にサーバーからログインしている ユーザーのIDに紐付いたクレデンシャル情報を取得しリスト表示します ホーム を開いたらすぐに認証器一覧が表示されるようGetCredentials を呼び出しましょう 既に登録してある認証器を削除する機能も追加 します サーバー側には既にエンドポイントがありますので単純な Fetch リクエストで実現できますClient.jsにUnregisterCredential 関数を追加しましょうviews-home.asmrのインポート分に今 作ったUnregisterCredentialを追加します クレデンシャルのエントリ 事に表示されるリムーブボタンが押されたタイミングでクレデンシャル IDを指定して削除のリクエストを送り成功したら一覧を再表示します 最後に先ほど作ったRegisterCredentialを呼び出すボタンを追加します これもviews-home.asmrのインポート分に追加します ボタンが押されたらRegisterCredentialが呼び出される関数を追加します これで新しいクレデンシャルの登録登録されたクレデンシャル の一覧表示そして削除が可能なりました この段階で新しいクレデンシャルの登録に関しては実際に動かして試すことが できます それではここまで説明した部分の作業を開始してください 時間になりましたので次のステップに進みます いよいよ元々パスワードを開くページだったviewsを生体認証を使った 再認証に置き換えていきますまずは認証を行う関数をセンテケート を作ります 今回もまずはプレスフォルダーを用意しましょう 先ほどローカルストレージにクレデンシャルIDを保存したことを覚えてます でしょうか それを取得してサーバーにリクエストを送ります そして サーバーにフェッチリクエストを送ります 戻ってきたオブジェクト はパブリッキークレデンシャルリクエストオプションになっています ここで重要なパロメーターがあらうクレデンシャルです これはブラウザに対して受け付け可能な認証器を指定するための もので 例えばユーザーが3つのセキュリティを登録していた としたら 登録時に取得したクレデンシャルIDをすべて この配列に指定することでどれを使っても認証できると 示す ことができますしかし 今回想定しているのは デバイスに付属しているプラットフォーム認証器 ただ1つだけですので それを指定してあげる必要がありますローカルストレージにクレデンシャルID を保存していたのは サーバー側にデバイスを識別する方法がない そのためにブラウザ上で保存して それをそのまま使える ようにしたと そういうわけですあらうクレデンシャルズに何も 入っていない状態で帰ってきた場合は サーバー側に否定された クレデンシャルIDと位置するクレデンシャルが見つからなかった ということになりますので プロミスをぬるでリゾーブして パスワードでの認証にフォールバックさせます WebOSには からのあらうクレデンシャルズを渡すことで アカウント選ぶ ダイアログを表示する機能もありますが 今回はスコープ外ですので 活用します無事にオプションが取得できたら 登録時と同様にサーバーから受け取ったオプションの エンコードされているものをデコードします 認証は ナビゲータークレデンシャルをゲットを誘い出して行います 先ほどのオブジェクトをパブリッキープロパティーの値として渡してください この関数が実行されると 登録時と同様 生態認証が起動されます 生態認証に成功するとクレデンシャルが返ってきますので これをエンコード した上でサーバーに送って サーバー側でも認証を行います サイドになりますが WebOSでセキュリティの金目になるのはサーバー側のコード です そして その部分についてこのコードラボではカバーしていません 脆弱性を生むだけですので 廃堂のサーバーを自分で作ることはせず サーダーパーティーのライブラリーやソリューションをうまく活用して この認証機能を作ってくださいここではサーバーがレスポンスコード 200 を返せば認証成功です それではここまで説明した部分の 作業を行ってください 時間になりましたので 次のステップに進みます 最後にリオスの画面で今作ったオーセンティケートを呼び出して 生態認証を行うUIを追加して生態認証 言い換えるとローカル認証 はあくまで補助的なものであってローカル認証が使えない場合は 別の方法にフォールバックできなければならないというところが重要のポイント と言いますここではパスワード認証にフォール バックできるようにしていきますまずはこれまでパスワードフォーム のみし表示していたページに生態認証を行うオーセンティケート ボタンとフォールバックとなるサインインウィズパスワード ボタンを置きますまた既にあるフォームにクラス イコール秘訓を追加しましょう今回も認証機が使える状況かどうか を判断して CSSで表示を制御しますWebOSが使えて プラットフォーム 認証機が使えてかつクレデンシャルIDが保存されている 場合のみオーセンティケートボタンを表示して それ以外の場合は既存のパスワードフォームを表示します またオーセンティケートボタンを表示している場合でもユーザー が2にパスワードでログインできることも必要です サインインウィズパスワードボタンがクリックされたらパスワード フォームに切り替えるコードも追加します 先ほど作ったオーセンティケートのコードを忘れないようにインポート 分に追加しましょうオーセンティケートボタンを押されたら オーセンティケート関数を呼び出します認証に成功したらフォームにリダリデクト し失敗したらパスワードフォームに フォールバックするようにしますこれが最後の作業になります 始めてください時間になりました 作業を終了してくださいさて皆さんの作ったWebOSの うまく動作しましたでしょうかかなり駆け足に作業すること になってしまいましたけれどもファイドオーやWebOSの仕組みを 理解する良い機会になってくれたら嬉しいです 本日はご参加いただき ありがとうございましたまたお会いしましょう