ログイン ユーザー

Meggin Kearney
Meggin Kearney

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

自動ログイン

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

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

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

認証情報を取得する

対応ブラウザ

  • Chrome: 51. <ph type="x-smartling-placeholder">
  • Edge: 18。 <ph type="x-smartling-placeholder">
  • Firefox: 60。 <ph type="x-smartling-placeholder">
  • Safari: 13。 <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 に置き換えます。 PasswordCredentialFederatedCredential のどちらであるかを判別するには、次のようにします。 オブジェクトの .type プロパティを見てください。 これは password または federated です。

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

複数のアカウントを表示している Google Account Chooser。

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

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

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

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

mediationrequired の場合、ユーザーにはログイン用のアカウント選択ツールが常に表示されます。 このオプションを使用すると、複数のアカウントを持っているユーザーは簡単にアカウントを切り替えることができます。 mediationoptional の場合、 ユーザーには、ログインするための 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';
      });
  }
});

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

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

フェデレーション ログインを実装するには:

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

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

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

対応ブラウザ

  • Chrome: 51. <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: サポートされていません。 <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 プロバイダを表すプロバイダ文字列と (nameiconURL は省略可能です)。 この情報について詳しくは、 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();
}

これにより、ユーザーが次回自動ログインを有効にするまで自動ログインは発生しません。 自動ログインを再開するために、ユーザーは意図的にログインすることを選択できます アカウント選択ツールからログインするアカウントを選択します。 その後は、ユーザーが明示的にログアウトするまで常に再ログインされます。

フィードバック