このページは Cloud Translation API によって翻訳されました。

ログインユーザー

Eiji Kitamura 氏

Meggin Kearney

ユーザーをログインさせるには、ブラウザのパスワードマネージャーから認証情報を取得し、それらを使用してユーザーを自動的にログインします。複数のアカウントを持つユーザーの場合は、Account Chooser を使用して、1 回のタップでアカウントを選択できるようにします。

自動ログイン

自動ログインは、トップページだけでなく、他のリーフページでも、ウェブサイトのあらゆる場所で行うことができます。これは、ユーザーが検索エンジンを介してウェブサイトのさまざまなページにアクセスする場合に役立ちます。

自動ログインを有効にするには:

認証情報を取得します。
お客様の認証を行います。
UI を更新するか、カスタマイズされたページに移動します。

認証情報を取得する

対応ブラウザ

ソース

認証情報を取得するには、navigator.credentials.get() を呼び出します。password または federated を指定して、リクエストする認証情報の種類を指定します。

自動ログインには常に mediation: 'silent' を使用して、ユーザーが次の場合にプロセスを簡単に終了できるようにします。

認証情報が保存されていません。
複数の認証情報が保存されている。
ログアウトしている。

認証情報を取得する前に、ユーザーがすでにログインしているかどうかを必ず確認してください。

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials.get({
      password: true,
      federated: {
        providers: ['https://accounts.google.com'],
      },
      mediation: 'silent',
    });
    // ...
  }
}

navigator.credentials.get() によって返される Promise は、認証情報オブジェクトまたは null で解決されます。PasswordCredential と FederatedCredential のどちらであるかは、オブジェクトの .type プロパティ（password または federated）で判断します。

.type が federated の場合、.provider プロパティは ID プロバイダを表す文字列です。

お客様を認証する

認証情報を取得したら、認証情報の種類（password または federated）に応じて認証フローを実行します。

    }).then(c => {
     if (c) {
       switch (c.type) {
         case 'password':
           return sendRequest(c);
           break;
         case 'federated':
           return gSignIn(c);
           break;
       }
     } else {
       return Promise.resolve();
     }

Promise が解決されたら、認証情報オブジェクトを受信したかどうかを確認します。「いいえ」の場合、自動ログインができませんでした。通知せずに自動ログインプロセスを閉じます。

UI の更新

認証が成功したら、UI を更新するか、ユーザーをパーソナライズされたページに転送します。

    }).then(profile => {
     if (profile) {
       updateUI(profile);
     }

認証のエラーメッセージを必ず表示してください

ユーザーの混乱を避けるため、認証情報オブジェクトの取得時に「ログイン中」という青いトーストが表示されます。

重要なヒントとして、認証情報オブジェクトの取得に成功したものの、ユーザーの認証に失敗した場合は、エラーメッセージを表示する必要があります。

        }).catch(error => {
          showError('Sign-in Failed');
        });
      }
    }

完全なコードサンプル

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'silent',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        }
      })
      .catch((error) => {
        showError('Sign-in Failed');
      });
  }
}

アカウント選択ツールからログイン

ユーザーがメディエーションを必要とする場合、または複数のアカウントを持っている場合は、Account Chooser を使用してユーザーがログインできるようにし、通常のログインフォームをスキップします。次に例を示します。

複数のアカウントが表示されている Google Account Chooser。

アカウント選択ツールでログインする手順は自動ログインの場合と同じですが、認証情報の取得の一部として Account Chooser を表示する追加の呼び出しがあります。

認証情報を取得し、Account Chooser を表示します。
お客様を認証します。
UI を更新するか、カスタマイズされたページに移動します。

認証情報を取得し、Account Chooser を表示する

定義されたユーザー操作（ユーザーが [ログイン] ボタンをタップしたときなど）に応じてアカウント選択ツールを表示します。navigator.credentials.get() を呼び出し、mediation: 'optional' または mediation: 'required' を追加してアカウント選択ツールを表示します。

mediation が required の場合、ユーザーにはログイン用のアカウント選択ツールが常に表示されます。このオプションを使用すると、複数のアカウントを持つユーザーはアカウントを簡単に切り替えることができます。 mediation が optional の場合、navigator.credentials.preventSilentAccess() 呼び出しの後、ログイン用のアカウント選択ツールがユーザーに明示的に表示されます。これは通常、ユーザーがログアウトまたは登録解除を選択した後に自動ログインが発生しないようにするためです。

mediation: 'optional' の例:

    var signin = document.querySelector('#signin');
    signin.addEventListener('click', e => {
     if (window.PasswordCredential || window.FederatedCredential) {
       navigator.credentials.get({
         password: true,
         federated: {
           providers: [
             'https://accounts.google.com'
           ]
         },
         mediation: 'optional'
       }).then(c => {

ユーザーがアカウントを選択すると、Promise は認証情報で解決されます。ユーザーが Account Chooser をキャンセルするか、認証情報が保存されていない場合、Promise は null で解決されます。その場合は、ログインフォームのエクスペリエンスにフォールバックします。

ログインフォームへのフォールバックを忘れないでください

次のいずれかの場合は、ログインフォームを使用する必要があります。

認証情報は保存されません。
ユーザーがアカウントを選択せずに Account Chooser を閉じています。
この API は利用できません。

    }).then(profile => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
    }).catch(error => {
        location.href = '/signin';
    });

完全なコードサンプル

var signin = document.querySelector('#signin');
signin.addEventListener('click', (e) => {
  if (window.PasswordCredential || window.FederatedCredential) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'optional',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
      })
      .catch((error) => {
        location.href = '/signin';
      });
  }
});

フェデレーションログイン

フェデレーションログインを使用すると、ユーザーはワンタップでログインでき、ウェブサイトの追加のログイン情報を覚えておく必要がなくなります。

連携ログインを実装するには:

サードパーティの ID でユーザーを認証します。
ID 情報を保存します。
UI を更新するか、カスタマイズされたページに移動します（自動ログインの場合と同様）。

サードパーティの ID でユーザーを認証する

ユーザーが連携ログインボタンをタップしたら、FederatedCredential を使用して特定の ID プロバイダ認証フローを実行します。

対応ブラウザ

ソース

たとえば、プロバイダが Google の場合は、Google ログイン JavaScript ライブラリを使用します。

navigator.credentials
  .get({
    password: true,
    mediation: 'optional',
    federated: {
      providers: ['https://account.google.com'],
    },
  })
  .then(function (cred) {
    if (cred) {
      // Instantiate an auth object
      var auth2 = gapi.auth2.getAuthInstance();

      // Is this user already signed in?
      if (auth2.isSignedIn.get()) {
        var googleUser = auth2.currentUser.get();

        // Same user as in the credential object?
        if (googleUser.getBasicProfile().getEmail() === cred.id) {
          // Continue with the signed-in user.
          return Promise.resolve(googleUser);
        }
      }

      // Otherwise, run a new authentication flow.
      return auth2.signIn({
        login_hint: id || '',
      });
    }
  });

Google ログインでは、認証の証明として ID トークンが生成されます。

一般に、連携ログインは OpenID Connect や OAuth などの標準プロトコルの上に構築されます。フェデレーションアカウントで認証する方法については、それぞれのフェデレーション ID プロバイダのドキュメントをご覧ください。一般的な例は次のとおりです。

ID 情報を保存する

認証が完了したら、ID 情報を保存できます。ここで保存する情報は、ID プロバイダの id と、ID プロバイダを表すプロバイダ文字列です（name と iconURL は省略可能です）。詳細については、認証情報管理の仕様をご覧ください。

フェデレーションアカウントの詳細を保存するには、ユーザーの ID とプロバイダの ID で新しい FederatedCredential オブジェクトをインスタンス化します。次に、navigator.credentials.store() を呼び出して ID 情報を保存します。

連携が正常に完了したら、FederatedCredential を同期的または非同期的にインスタンス化します。

同期アプローチの例:

// Create credential object synchronously.
var cred = new FederatedCredential({
  id: id, // id in IdP
  provider: 'https://account.google.com', // A string representing IdP
  name: name, // name in IdP
  iconURL: iconUrl, // Profile image url
});

非同期アプローチの例:

// Create credential object asynchronously.
var cred = await navigator.credentials.create({
  federated: {
    id: id,
    provider: 'https://accounts.google.com',
    name: name,
    iconURL: iconUrl,
  },
});

次に、credential オブジェクトを保存します。

// Store it
navigator.credentials.store(cred).then(function () {
  // continuation
});

ログアウト

ログアウトボタンがタップされたら、ユーザーをログアウトします。まずセッションを終了してから、今後のアクセスのために自動ログインをオフにします。（セッションを終了する方法は任意です）。

今後の訪問に対して自動ログインをオフにする

navigator.credentials.preventSilentAccess() を呼び出します。

signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  navigator.credentials.preventSilentAccess();
}

これにより、ユーザーが次に自動ログインを有効にするまで自動ログインが行われなくなります。自動ログインを再開するには、ユーザーはログインに使用するアカウントをアカウント選択ツールで選択することで、意図的にログインできます。その後、ユーザーは明示的にログアウトするまで、常に再ログインされます。

ログイン ユーザー

自動ログイン

認証情報を取得する

お客様を認証する

UI の更新

認証のエラー メッセージを必ず表示してください

完全なコードサンプル

アカウント選択ツールからログイン

認証情報を取得し、Account Chooser を表示する

ログイン フォームへのフォールバックを忘れないでください

完全なコードサンプル

フェデレーション ログイン

サードパーティの ID でユーザーを認証する

ID 情報を保存する

ログアウト

今後の訪問に対して自動ログインをオフにする

フィードバック

ログインユーザー

認証のエラーメッセージを必ず表示してください

ログインフォームへのフォールバックを忘れないでください

フェデレーションログイン