web-dev-qa-db-ja.com

自動「続行」Googleポップアップのドキュメント

自分のサイトにある「Sign in with Google」フレームの1つを取得するにはどうすればよいですか？アカウントにサインインしていて、たとえばKayak.comにアクセスすると発生します。すべての 出会ったドキュメント は、古い[Googleでログイン]ボタン用です。

Kayak.comにアクセスすると、このように表示されます。

enter image description here

google-signingoogle-identity
14
Hem

編集（2019年11月9日）：

リンクが404につながるようです。ワンタップサインインの消失に関する情報が見つかりません。

元の回答：

私は同じ質問をして、これを見つけました（私は「google自動ログイン」をグーグルで検索しました）：

https://developers.google.com/identity/one-tap/web/

彼らが持っているスクリーンショットはモバイル用ですが、ポップアップは他のウェブアプリで表示されるものとまったく同じに見えます。

Guidesタブをクリックすると、Getting Startedセクションを含むいくつかのドキュメントが見つかります：

https://developers.google.com/identity/one-tap/web/get-started

これにより、Maps JavaScript APIなど、他のGoogle APIと同じように認証情報を設定する方法がわかります。

資格情報を取得したら、メインのHTMLファイルまたは他のスクリプトがある場合は他のスクリプトをロードする場所に、Googleからライブラリをロードします。

_<script src="https://smartlock.google.com/client"></script>
_

その後、googleyoloオブジェクトを介してライブラリにアクセスできます。

_window.onGoogleYoloLoad = (googleyolo) => {
  // The 'googleyolo' object is ready for use.
};
_

そのスクリーンショットに表示されているもの（および私が表示したもの）は、googleyolo.hint()呼び出しのようです。

これは、ユーザーが既にサイトにログインしているかどうかに依存しているようです。彼らが持っている場合、またはブラウザでサイトのパスワードを保存している場合は、自動的にサインインするか、少なくともパスワードを要求する必要があります。このAPIは、前述のgoogleyolo.hint()呼び出しを使用するサインインに加えて、サインアップも処理します。

より詳細なコード例はGuidesページにあります。

また、このサイトのバックエンドを制御して、成功したgoogleyolo.hint()またはgoogleyolo.retrieve()呼び出しからのIDトークンの整合性を検証する必要があります。 。 https://developers.google.com/identity/one-tap/web/idtoken-auth で説明されています。

11
Chris Gala