テレビや限られた入力デバイスでのログイン

インターネットに接続されたテレビなど、入力機能が制限されたデバイスで、ユーザーが Google アカウントを使用してアプリにログインできるようにできます。

アプリで、ユーザーにショートコードとログイン URL が表示されます。次に、ユーザーはウェブブラウザでログイン URL を開き、コードを入力して、ユーザーのログイン情報にアクセスする権限をアプリに付与します。最後に、アプリが確認を受け取り、ユーザーがログインすることになります。

このログインフローを使用するには、次の条件を満たすデバイスでアプリを実行する必要があります。

  • デバイスは、40 文字の URL と 15 文字のユーザーコード、およびユーザーへの指示を表示できる必要があります。
  • デバイスがインターネットに接続されている必要があります。

クライアント ID とクライアント シークレットを作成する

アプリが Google のログイン エンドポイントにリクエストを送信するには、OAuth 2.0 クライアント ID とクライアント シークレットが必要です。

プロジェクトのクライアント ID とクライアント シークレットを検索するには、次の手順を実行します。

  1. 既存の OAuth 2.0 認証情報を選択するか、[認証情報] ページを開きます。
  2. プロジェクトの OAuth 2.0 認証情報をまだ作成していない場合は、[認証情報を作成] > [OAuth クライアント ID] をクリックし、認証情報の作成に必要な情報を入力して、作成します。
  3. [OAuth 2.0 クライアント ID] セクションで [クライアント ID] を探します。詳細を確認するには、クライアント ID をクリックします。

新しいクライアント ID を作成する場合は、アプリケーション タイプとして [TV and Limited Input devices] を選択します。

ユーザーコードと確認用 URL を取得する

ユーザーが Google アカウントを使用してログインするようリクエストしたら、OAuth 2.0 デバイス エンドポイント https://oauth2.googleapis.com/device/code に HTTP POST リクエストを送信して、ユーザーコードと確認 URL を取得します。クライアント ID と、リクエストに必要なスコープのリストを含めます。ユーザーの Google アカウントでのみログインする場合は、profile スコープと email スコープのみをリクエストします。または、ユーザーに代わってサポートされている API を呼び出す権限をリクエストする場合は、profile スコープと email スコープに加えて、必要なスコープをリクエストします。

ユーザーコードのリクエストの例を次に示します。

POST /device/code HTTP/1.1
Host: oauth2.googleapis.com
Content-Type: application/x-www-form-urlencoded

client_id=YOUR_GOOGLE_CLIENT_ID&scope=email%20profile

使用中: curl

curl -d "client_id=YOUR_GOOGLE_CLIENT_ID&scope=email profile" https://oauth2.googleapis.com/device/code

レスポンスは JSON オブジェクトとして返されます。

 {
  "device_code" : "4/4-GMMhmHCXhWEzkobqIHGG_EnNYYsAkukHspeYUk9E8",
  "user_code" : "GQVQ-JKEC",
  "verification_url" : "https://www.google.com/device",
  "expires_in" : 1800,
  "interval" : 5
}

アプリは、user_code 値と verification_url 値をユーザーに表示するとともに、ユーザーがログインするか expires_in で指定された時間が経過するまで、指定された interval のログイン エンドポイントをポーリングします。

ユーザーコードと確認用 URL を表示する

デバイス エンドポイントからユーザーコードと確認 URL を受信したら、それらを表示し、URL を開いてユーザーコードを入力するようユーザーに指示してください。

verification_url と user_code の値は変更される可能性があります。次の制限に対処できるように UI を設計します。

  • user_code は、W サイズの 15 文字を処理できる幅のフィールドに表示する必要があります。
  • verification_url は、40 文字の長さの URL 文字列を処理できる幅のフィールドに表示する必要があります。

どちらの文字列にも、US-ASCII 文字セットの印刷可能な文字を含めることができます。

user_code 文字列を表示するときは、いかなる方法でも（大文字と小文字の変更や、他の書式設定文字の挿入など）文字列を変更しないでください。今後コードの形式が変更されると、アプリが機能しなくなる可能性があります。

必要に応じて、表示のために URL からスキームを取り除くことで、verification_url 文字列を変更できます。その場合は、アプリが「http」と「https」の両方のバリアントを処理できることを確認してください。それ以外の場合、verification_url 文字列は変更しないでください。

ユーザーが確認用 URL に移動すると、次のようなページが表示されます。

コードを入力してデバイスを接続します

ユーザーがユーザーコードを入力すると、Google ログインサイトに次のような同意画面が表示されます。

デバイス クライアントの同意画面の例

ユーザーが [許可] をクリックすると、アプリはユーザーを識別するための ID トークン、Google API を呼び出すためのアクセス トークン、新しいトークンを取得するための更新トークンを取得できます。

ID トークンと更新トークンを取得する

アプリにユーザーコードと確認用 URL が表示されたら、デバイス エンドポイントから受け取ったデバイスコードを使用して、トークン エンドポイント（https://oauth2.googleapis.com/token）のポーリングを開始します。interval 値で指定された間隔（秒単位）でトークン エンドポイントをポーリングします。

リクエストの例を次に示します。

POST /token HTTP/1.1
Host: oauth2.googleapis.com
Content-Type: application/x-www-form-urlencoded

client_id=YOUR_GOOGLE_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&code=DEVICE_CODE&grant_type=http://oauth.net/grant_type/device/1.0

使用中: curl

curl -d "client_id=YOUR_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&code=YOUR_DEVICE_CODE&grant_type=http://oauth.net/grant_type/device/1.0" https://oauth2.googleapis.com/token

ユーザーがリクエストをまだ承認していない場合は、次のようなレスポンスが返されます。

{
  "error" : "authorization_pending"
}

アプリは、interval の値を超えない頻度でこれらのリクエストを繰り返す必要があります。アプリが短期間にポーリングすると、レスポンスは次のようになります。

{
  "error" : "slow_down"
}

ユーザーがログインしてリクエストしたスコープへのアクセスをアプリに許可すると、アプリの次のリクエストに対するレスポンスに、ID トークン、アクセス トークン、更新トークンが含まれます。

{
  "access_token": "ya29.AHES6ZSuY8f6WFLswSv0HZLP2J4cCvFSj-8GiZM0Pr6cgXU",
  "token_type": "Bearer",
  "expires_in": 3600,
  "refresh_token": "1/551G1yXUqgkDGnkfFk6ZbjMMMDIMxo3JFc8lY8CAR-Q",
  "id_token": "eyJhbGciOiJSUzI..."
}

このレスポンスを受信すると、アプリは ID トークンをデコードしてログイン ユーザーの基本的なプロフィール情報を取得するか、ID トークンをアプリのバックエンド サーバーに送信して、サーバーで安全に認証できます。また、アプリはアクセス トークンを使用して、ユーザーが承認した Google API を呼び出すこともできます。

ID トークンとアクセス トークンの存続期間は限定されています。トークンの存続期間を超えてユーザーのログイン状態を維持するには、更新トークンを保存し、その更新トークンを使用して新しいトークンをリクエストします。

ID トークンからユーザー プロフィール情報を取得する

ログイン ユーザーのプロフィール情報を取得するには、任意の JWT デコード ライブラリを使用して ID トークンをデコードします。たとえば、Auth0 の jwt-decode JavaScript ライブラリを使用すると次のようになります。

var user_profile = jwt_decode(<var>id_token</var>);

// The "sub" field is available on all ID tokens. This value is unique for each
// Google account and can be used to identify the user. (But do not send this
// value to your server; instead, send the whole ID token so its authenticity
// can be verified.)
var user_id = user_profile["sub"];

// These values are available when you request the "profile" and "email" scopes.
var user_email = user_profile["email"];
var email_verified = user_profile["email_verified"];
var user_name = user_profile["name"];
var user_photo_url = user_profile["picture"];
var user_given_name = user_profile["given_name"];
var user_family_name = user_profile["family_name"];
var user_locale = user_profile["locale"];

詳細情報