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

ログインユーザー

Eiji Kitamura

Meggin Kearney

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

自動ログイン

自動ログインはウェブサイトのどこでも利用できます。トップページだけでなく他のリーフページにも影響を及ぼしますこれは、ユーザーがウェブサイトのさまざまなページにアクセスした場合や、検索します

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

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

認証情報を取得する

対応ブラウザ

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

ソース

認証情報を取得するには、次のコマンドを呼び出します。 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 が解決すると credential オブジェクトを受け取ったかどうかをチェックします表示されていない場合は、自動ログインできませんでした。自動ログインプロセスを通知せずに終了します。

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 を使用してユーザーにログインさせる通常のログインフォームをスキップします。次に例を示します。

Account Chooser からログインする手順は、自動ログイン、追加の呼び出しでアカウント選択ツールを表示次の点に注意してください。

認証情報を取得し、アカウント選択ツールを表示します。
お客様を認証します。
UI を更新するか、パーソナライズされたページに移動してください。

認証情報を取得し、アカウント選択ツールを表示

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

mediation が required の場合、ユーザーにはログイン用のアカウント選択ツールが常に表示されます。このオプションを使用すると、複数のアカウントを持っているユーザーは簡単にアカウントを切り替えることができます。 mediation が optional の場合、ユーザーには、ログインするための Account Chooser が明示的に表示されます。 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 で解決されます。その場合は、ログインフォームに戻ります。

ログインフォームへのフォールバックをお忘れなく

次のような場合は、ログインフォームにフォールバックする必要があります。

認証情報は保存されません。
ユーザーがアカウントを選択せずにアカウント選択ツールを閉じました。
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 でユーザーを認証する

ユーザーがフェデレーションログインボタンをタップすると、特定の ID プロバイダの認証フローを実行する FederatedCredential。

対応ブラウザ

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

ソース

たとえば、プロバイダが 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 は省略可能です）。この情報について詳しくは、 Credential Management の仕様。

連携アカウントの詳細を保存するには、新しい Cloud Storage バケットを FederatedCredential ユーザーの ID とプロバイダの ID を含むオブジェクトを作成します。次に、Cloud Shell を 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 の更新

認証エラー メッセージを表示することを忘れないでください。

サンプルコードの全文

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

認証情報を取得し、アカウント選択ツールを表示

ログイン フォームへのフォールバックをお忘れなく

サンプルコードの全文

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

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

ID 情報を保存する

ログアウト

今後のアクセス時に自動ログインをオフにする

フィードバック

ログインユーザー

認証エラーメッセージを表示することを忘れないでください。

ログインフォームへのフォールバックをお忘れなく

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