ユーザーをログインさせるには、ブラウザのパスワード マネージャーから認証情報を取得し、それらを使用してユーザーを自動的にログインします。複数のアカウントを持つユーザーの場合は、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 を使用してユーザーがログインできるようにし、通常のログイン フォームをスキップします。次に例を示します。
アカウント選択ツールでログインする手順は自動ログインの場合と同じですが、認証情報の取得の一部として 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();
}
これにより、ユーザーが次に自動ログインを有効にするまで自動ログインが行われなくなります。 自動ログインを再開するには、ユーザーはログインに使用するアカウントをアカウント選択ツールで選択することで、意図的にログインできます。その後、ユーザーは明示的にログアウトするまで、常に再ログインされます。