認証情報管理 API を使用したログインフローの効率化

Eiji Kitamura

洗練されたユーザー エクスペリエンスを提供するには、ユーザーが 認証を行います。認証されたユーザーは 専用のプロファイルを使用して相互にデータを同期したり、デバイス間でデータを同期したり、データを処理する できます。その数は今も増え続けています。しかし 作成、記憶、入力 エンドユーザーにとってパスワードが煩雑になりがち（特にモバイル画面の場合） 別のサイトで同じパスワードを使い回してしまいます。もちろんこれは セキュリティ上のリスクとなります。

Chrome の最新バージョン（51）は Credential Management API をサポートしています。Google 標準トラッキング プロポーザルであり、デベロッパーが ユーザーのログインを容易にします。

Credential Management API とは何ですか？

Credential Management API を使用すると、デベロッパーはパスワードを保存、取得できる フェデレーション認証情報の 3 つの機能があり、

• navigator.credentials.get()
• navigator.credentials.store()
• navigator.credentials.requireUserMediation()

これらのシンプルな API を使用することで、デベロッパーは次のような強力なことが可能になります。

• ユーザーがワンタップでログインできるようにします。
• ユーザーがログインに使用したフェデレーション アカウントを覚えておいてください。
• セッションの有効期限が切れたときに、ユーザーに再度ログインする。

Chrome の実装では、認証情報は Chrome のパスワードに保存されます。 なります。ユーザーが Chrome にログインしている場合は、ユーザーのパスワードを同期できる 。同期されたパスワードを Android アプリと共有することもできます Smart Lock for Passwords API for Android を統合済みである シームレスなクロスプラットフォームエクスペリエンスを実現できます

Credential Management API をサイトに統合する

ウェブサイトで Credential Management API を使用する方法は、 アーキテクチャによって異なります。シングルページ アプリですか？レガシーか ページ遷移を伴うアーキテクチャはどのようなものでしょうか。ログイン フォームが上部にしか表示されない どうすればよいでしょうか。ログインボタンはどこにでも設置されていますか？ユーザーはニュース メディアの どうしたらいいですか？ポップアップ ウィンドウで連携は機能しますか？または 複数ページでのやり取りが必要か

すべてのケースを網羅することはほぼ不可能ですが、ここでは、 一般的なシングルページアプリです

• トップページは登録フォームです。
• [ログイン] をタップするボタンをクリックすると、ユーザーはログイン フォームに移動します。
• 登録フォームとログイン フォームのどちらにも一般的な ID/パスワードのオプションがある 認証情報、フェデレーション情報を提供します。例:Google ログインや Facebook ログインを使用できます。

Credential Management API を使用すると、以下を追加できます サイトに追加できます。たとえば、

• ログイン時にアカウント選択ツールを表示: ネイティブのアカウント選択ツール UI を表示します。 ユーザーが [ログイン] をタップしたとき。
• 認証情報を保存する: ログインが正常に完了したら、 認証情報をブラウザのパスワード マネージャーに転送し、後で使用できるようにします。
• ユーザーを自動的に再度ログインできるようにする: ユーザーが次の場合に再度ログインできるようにします。 セッションが期限切れになります。
• 自動ログインをメディエーションする: ユーザーがログアウトしたら、次のユーザーについて自動ログインを無効にします。 指定することもできます

これらの機能は、サンプルコードのデモサイトで実装されています。

ログイン時に Account Chooser を表示する

ユーザーが [ログイン] をタップした後ログイン フォームに移動すると、 使用可能 navigator.credentials.get() 認証情報を取得できます。表示されるアカウント選択ツールの UI から ユーザーはアカウントを選択できます

</ph>

パスワード認証情報オブジェクトの取得

アカウント オプションとしてパスワード認証情報を表示するには、password: true を使用します。

navigator.credentials.get({
    password: true, // `true` to obtain password credentials
}).then(function(cred) {
    // continuation
    ...

パスワード認証情報を使用してログインする

ユーザーがアカウントを選択すると、解決関数が 使用します。fetch() を使用してサーバーに送信することができます。

    // continued from previous example
}).then(function(cred) {
    if (cred) {
    if (cred.type == 'password') {
        // Construct FormData object
        var form = new FormData();

        // Append CSRF Token
        var csrf_token = document.querySelector('csrf_token').value;
        form.append('csrf_token', csrf_token);

        // You can append additional credential data to `.additionalData`
        cred.additionalData = form;

        // `POST` the credential object as `credentials`.
        // id, password and the additional data will be encoded and
        // sent to the url as the HTTP body.
        fetch(url, {           // Make sure the URL is HTTPS
        method: 'POST',      // Use POST
        credentials: cred    // Add the password credential object
        }).then(function() {
        // continuation
        });
    } else if (cred.type == 'federated') {
        // continuation

フェデレーション認証情報を使用したログイン

連携アカウントをユーザーに表示するには、federated を追加します。これは、 get() オプションに追加します。

</ph> <ph type="x-smartling-placeholder">をご覧ください。

navigator.credentials.get({
    password: true, // `true` to obtain password credentials
    federated: {
    providers: [  // Specify an array of IdP strings
        'https://accounts.google.com',
        'https://www.facebook.com'
    ]
    }
}).then(function(cred) {
    // continuation
    ...

credential オブジェクトの type プロパティを調べて、PasswordCredential であるかどうかを確認できます。 （type == 'password'）または FederatedCredential（type == 'federated'）。 認証情報が FederatedCredential, 含まれている情報を使用して、適切な API を呼び出すことができます。

    });
} else if (cred.type == 'federated') {
    // `provider` contains the identity provider string
    switch (cred.provider) {
    case 'https://accounts.google.com':
        // Federated login using Google Sign-In
        var auth2 = gapi.auth2.getAuthInstance();

        // In Google Sign-In library, you can specify an account.
        // Attempt to sign in with by using `login_hint`.
        return auth2.signIn({
        login_hint: cred.id || ''
        }).then(function(profile) {
        // continuation
        });
        break;

    case 'https://www.facebook.com':
        // Federated login using Facebook Login
        // continuation
        break;

    default:
        // show form
        break;
    }
}
// if the credential is `undefined`
} else {
// show form

認証情報を保存する

ユーザーがフォームを使用してウェブサイトにログインしたら、 navigator.credentials.store() 認証情報を保存します。ユーザーは、保存するかどうかを尋ねるメッセージが表示されます。影響する 認証情報のタイプ: new PasswordCredential() を使用します。 または new FederatedCredential() 保存する認証情報オブジェクトを作成します。

</ph> <ph type="x-smartling-placeholder">をご覧ください。

フォーム要素からパスワード認証情報を作成して保存する

次のコードでは、autocomplete 属性を使用して、 マップ フォームの要素を PasswordCredential に設定します。 オブジェクト パラメータ。

HTML html <form id="form" method="post"> <input type="text" name="id" autocomplete="username" /> <input type="password" name="password" autocomplete="current-password" /> <input type="hidden" name="csrf_token" value="******" /> </form>

JavaScript

var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
    // continuation
});

連携認証情報の作成と保存

// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
    id: id,                                  // The id for the user
    name: name,                              // Optional user name
    provider: 'https://accounts.google.com',  // A string that represents the identity provider
    iconURL: iconUrl                         // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
    // continuation
});

ユーザーを自動的に再度ログインできるようにする

ユーザーがウェブサイトを離れた後、後で戻ってくると、 セッションが期限切れになります。毎回パスワードを入力する手間を省く 戻ってきてください。ユーザーが自動的に再度ログインできるようにします。

</ph> <ph type="x-smartling-placeholder">

認証情報オブジェクトの取得

navigator.credentials.get({
    password: true, // Obtain password credentials or not
    federated: {    // Obtain federation credentials or not
    providers: [  // Specify an array of IdP strings
        'https://accounts.google.com',
        'https://www.facebook.com'
    ]
    },
    unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
    if (cred) {
    // auto sign-in possible
    ...
    } else {
    // auto sign-in not possible
    ...
    }
});

コードは [アカウント選択ツールを表示] に表示されるようなコードです ] をオンにします。。唯一の違いは unmediated: true。

これにより関数が直ちに解決され、認証情報が ユーザーが自動的にログインされます。次のような条件があります。

• ユーザーが自動ログイン機能を承諾しました。
• ユーザーが以前に Credential Management API を使用してウェブサイトにログインしたことがある。
• ユーザーの認証情報がオリジンに 1 つだけ保存されている。
• ユーザーが前回のセッションで明示的にログアウトしなかった。

これらの条件のいずれかが満たされない場合、関数は拒否されます。

自動ログインをメディエーションする

ユーザーがウェブサイトからログアウトした場合、 ユーザーが自動的に再ログインしないようにする必要があります。Google Cloud の Credential Management API には、メディエーションと呼ばれるメカニズムが用意されています。 メディエーション モードを有効にするには、 navigator.credentials.requireUserMediation()。 オリジンに対するユーザーのメディエーション ステータスがオンになっている限り、 unmediated: true を navigator.credentials.get() に置き換えると、この関数は次のようになります。 undefined で解決します。

自動ログインのメディエーション

navigator.credentials.requireUserMediation();

よくある質問

ウェブサイトの JavaScript で パスワードはあるか？ いいえ。パスワードは PasswordCredential の一部としてのみ取得でき、 あらゆる手段で公開できます

認証情報を使用して、ID に 3 組の数字を保存することは可能ですか？ Management API はどうですか？ 現時点では受け付けていません。仕様に関するフィードバックは、 高く評価されます

iframe 内で Credential Management API を使用できますか？ API はトップレベル コンテキストに限定されています。.get() または .store() への呼び出し 即座に解決されます。

パスワード管理用の Chrome 拡張機能を認証情報に統合できますか？ Management API はどうですか？ navigator.credentials をオーバーライドして Chrome 拡張機能にフックすることで、 get() または store() 認証情報。

リソース

Credential Management API について詳しくは、統合ガイドをご覧ください。

• API 仕様
• 仕様のディスカッションとフィードバック
• MDN API リファレンス
• Credential Management API 統合ガイド
• デモ
• デモのソースコード
• Codelab「Credential Management API で自動ログインを有効にする」